兄弟元素和父子元素的浮动的影响
实例
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.box1,
.box5 {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.box2,
.box6 {
width: 100px;
height: 100px;
background-color: lightblue;
}
.box3,
.box7 {
width: 100px;
height: 100px;
background-color: yellowgreen
}
/* 兄弟元素浮动：1、浮动水平方向分左右浮动，在其原来的位置上左右浮动，若上一个元素为浮动元素，其会紧挨着
上个元素排列一行，一行排列不了，自动下一行。
2、下一个兄弟元素无浮动，其位置会占据第一个浮动的兄弟元素的位置。
3、若无浮动元素不想占据浮动的兄弟元素位置，可以采取清除浮动。 */
.box1,
.box2,
.box5,
.box6 {
float: left
}
/* 清除浮动, 清除两侧的浮动，*/
.box3 {
clear: both;
}
/* 父元素未浮动，可以采用overflow: hidden来使其高宽撑大 */
.box4 {
border: 3px dashed red;
overflow: hidden;
}
.box5 {
float: left;
}
.box7 {
clear: both;
}
</style>
<title>浮动案例</title>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
<div class="box4">
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实现样式
登录遮罩
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body {
background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567693198546&di=12d9248aa605521ffcc931cf51145241&imgtype=0&src=http%3A%2F%2Fpic68.nipic.com%2Ffile%2F20150601%2F8164280_104301508000_2.jpg);
background-repeat: repeat;
}
.box {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.8;
}
.login {
position: relative;
top: 50%;
left: 50%;
/* 设置定点50%后，图片的左上角位置居中，但图片位置不居中，需负一个外边距 */
margin-left: -150px;
margin-top: -120px;
}
.login img {
width: 300px;
height: 240px;
}
</style>
<title>整个页面显示登录</title>
</head>
<body>
<div class="box">
<div class="login"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567694605542&di=b499cd6e0875facbb05cd1dea4bc9aab&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fexp%2Fw%3D500%2Fsign%3D41185a4c2e381f309e198da999014c67%2F730e0cf3d7ca7bcbd571af5bb8096b63f624a8b8.jpg"
alt=""></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
注意事项：1、满屏定位需要用到绝对定位，即相对于body进行定位。
2、定位居中时，取值50%只定位到元素的左上角居中，若整个元素居中需加上元素宽度的一半外作为外边距的负值。
三列布局
一、浮动布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body,
.box {
margin: 0;
padding: 0;
}
/* 头部和底部设置 */
.header,
.footer {
box-sizing: border-box;
width: 1200px;/* 也可以设置成百分比 如：80% */
margin: 0 auto;
height: 70px;
background-color: lightgray;
}
/* 主体设置 */
.main {
box-sizing: border-box;
width: 1200px;/* 也可以设置成百分比 如：80% */
margin: 0 auto;
overflow: hidden;
}
.left {
width: 200px;/* 也可以设置成百分比 如：20% */
min-height: 800px;
background-color: aqua;
float: left;
}
.container {
float: left;
width: 800px;/* 也可以设置成百分比 如：60% */
}
.right {
float: right;
width: 200px;/* 也可以设置成百分比 如：20% */
min-height: 800px;
background-color: aqua;
}
</style>
<title>三列布局(浮动布局）</title>
</head>
<body>
<div class="box">
<div class="header">头部</div>
<div class="main">
<div class="left">左侧</div>
<div class="container">主体内容区</div>
<div class="right">右侧</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
注意：浮动布局的box-sizing必须是border宽度，其后的padding的宽度不影响整体布局。
二、绝对布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body,
.box {
margin: 0;
padding: 0;
}
/* 头部和底部设置 */
.header,
.footer {
box-sizing: border-box;
width: 80%;
margin: 0 auto;
height: 70px;
background-color: lightgray;
}
/* 主体设置 */
.main {
box-sizing: border-box;
width: 80%;
margin: 0 auto;
position: relative;
}
.left {
width: 20%;
min-height: 800px;
background-color: aqua;
position: absolute;
top: 0;
left: 0;
}
.container {
width: 60%;
position: absolute;
left: 20%;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 20%;
min-height: 800px;
background-color: aqua;
}
</style>
<title>三列布局(浮动布局）</title>
</head>
<body>
<div class="box">
<div class="header">头部</div>
<div class="main">
<div class="left">左侧</div>
<div class="container">主体内容区</div>
<div class="right">右侧</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
注意事项：若左中右全部选用绝对定位，则底部内容会占据绝对定位之前的元素的位置，即上浮。
