重点：
行内元素进行绝对定位、固定定位或浮动后，就变成了行内块元素，可以设置宽高。
一、盒子模型
盒子包含： 内容、内填充、边框线和外边距。
背景包含： 内容、内填充、边框线。
盒子属性：
| 属性名称 | 属性值 |
|---|---|
| padding 内填充 | padding-top / padding-left / padding-right / padding-bottom 四个边上的内填充 padding:a 一个值表示四边相同的填充 padding:a b 两个值表示上下是a，左右是b padding:a b c 三个值表示上是a,左右是b,下是c padding:a b c d 四个值表示上，右，下，左 |
| margin 外边距 | margin-top / margin-left / margin-right / margin-bottom 四个边上的外边距 margin:a 一个值表示四边相同的外边距 margin:a b 两个值表示上下是a，左右是b margin:a b c 三个值表示上是a,左右是b,下是c margin:a b c d 四个值表示上，右，下，左 |
| border 边框线 | 样式：border-top-style / border-right-style / border-bottom-style / border-left-style 合并：border-style （1-4个值）（默认值是none，没有边框线） 宽度：border-top-width / border-right-width / border-bottom-width / border-left-width 合并：border-width （1-4个值） 颜色：border-top-color / border-right-color / border-bottom-color / border-left-color 合并：border-color （1-4个值）（属性值是transparent：透明的边框线） 总合并： border-top / border-right / border-bottom / border-left / border |
| box-sizing 盒子大小 | content-box （默认值）宽度和高度是内容区的高度和宽度 border-box 宽度和高度是包含边框线以内的高度和宽度 |
二、浮动
float : left 左浮动
float : right 右浮动
1. 浮动前：标准流
<head>
.top{
width:300px;
background: yellow;
}
.top .div1,.top .div2,.top .div3{
height:50px;
width:50px;
border:1px solid black;
background: red;
}
.bottom{
height:100px;
width:100px;
border:1px solid black;
background: green;
}
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
<div class="bottom"></div>
</body>
结果：
2. div1，div2，div3 浮动后：浮动流
<head>
.top{
width:300px;
background: yellow;
}
.top .div1,.top .div2,.top .div3{
height:50px;
width:50px;
border:1px solid black;
background: red;
float:left; //左浮动！！！！！！！
}
.bottom{
height:100px;
width:100px;
border:1px solid black;
background: green;
}
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
<div class="bottom"></div>
</body>
结果：
浮动后， div1，div2，div3不占空间，黄色的div高度为0，绿色的div受影响跑到上面去了，为了不让绿色的div受影响，需要清除浮动。
3. 清除浮动的方法（六种）
清除浮动主要是为了解决：父元素因为子元素浮动引起的内部高度为0的问题，想让谁不受浮动影响，就给谁添加clear 属性。
方法一、使用after伪元素clear（推荐）
<head>
.top{
width:300px;
background: yellow;
}
.top .div1,.top .div2,.top .div3{
height:50px;
width:50px;
border:1px solid black;
background: red;
float:left; //左浮动！！！！！！！
}
.bottom{
height:100px;
width:100px;
border:1px solid black;
background: green;
}
.top:after{ //用after伪元素清浮动
content:"";
display:block;
clear:both;
}
.top{ //兼容浏览器
*zoom: 1;
}
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
<div class="bottom"></div>
</body>
结果：
方法二、使用 before 和 after 双伪元素clear（推荐）
<head>
.top{
width:300px;
background: yellow;
}
.top .div1,.top .div2,.top .div3{
height:50px;
width:50px;
border:1px solid black;
background: red;
float:left; //左浮动！！！！！！！
}
.bottom{
height:100px;
width:100px;
border:1px solid black;
background: green;
}
.top:after,.top:before{ //使用双伪元素
content:"";
display: table;
}
.top:after{
clear:both;
}
.top{ //兼容浏览器
*zoom: 1;
}
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
<div class="bottom"></div>
</body>
结果：
方法三：给浮动元素的父元素定义 overflow:hidden
<head>
.top{
width:300px;
background: yellow;
overflow:hidden;
}
.top .div1,.top .div2,.top .div3{
height:50px;
width:50px;
border:1px solid black;
background: red;
float:left; //左浮动！！！！！！！
}
.bottom{
height:100px;
width:100px;
border:1px solid black;
background: green;
}
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
<div class="bottom"></div>
</body>
结果：
方法四：内墙元素隔离法
给最后一个浮动元素的后面添加一个空的 div 清除浮动
<head>
.top{
width:300px;
background: yellow;
}
.top .div1,.top .div2,.top .div3{
height:50px;
width:50px;
border:1px solid black;
background: red;
float:left; //左浮动！！！！！！！
}
.bottom{
height:100px;
width:100px;
border:1px solid black;
background: green;
}
.clear{ //清除浮动
clear:both;
}
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="clear"></div> //添加一个空的div
</div>
<div class="bottom"></div>
</body>
结果：
方法五：外墙元素隔离法
<head>
.top{
width:300px;
background: yellow;
}
.top .div1,.top .div2,.top .div3{
height:50px;
width:50px;
border:1px solid black;
background: red;
float:left; //左浮动！！！！！！！
}
.bottom{
clear:both; //清除浮动
height:100px;
width:100px;
border:1px solid black;
background: green;
}
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
<div class="bottom"></div>
</body>
结果： 给bottom清除浮动，这样他就不受上面浮动的影响，但是上面的三个 div 还是浮动的， top 的高度没有撑开，所以不显示黄色的背景。
方法六：给浮动元素的父元素设置高度
<head>
.top{
width:300px;
height:52px; //设置高度
background: yellow;
}
.top .div1,.top .div2,.top .div3{
height:50px;
width:50px;
border:1px solid black;
background: red;
float:left; //左浮动！！！！！！！
}
.bottom{
height:100px;
width:100px;
border:1px solid black;
background: green;
}
</head>
<body>
<div class="top">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
<div class="bottom"></div>
</body>
结果：
三、定位 position
定位前：
<style>
div{
width:80px;
height:80px;
}
.div1{
background: red;
}
.div2{
background: yellow;
}
.div3{
background: green;
}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
结果：
1. 相对定位
<style>
div{
width:80px;
height:80px;
}
.div1{
background: red;
}
.div2{
background: yellow;
position:relative; //相对定位
left:20px;
top:20px;
}
.div3{
background: green;
}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
结果： 相对定位是 div2 相对于其本身原来的位置进行移动，并且原来的位置仍然占据着，没有释放
2. 绝对定位
<style>
div{
width:80px;
height:80px;
}
.div1{
background: red;
}
.div2{
background: yellow;
position:absolute; //绝对定位
left:20px;
top:20px;
}
.div3{
background: green;
}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
结果： 绝对定位是 div2 相对于最近的有定位属性的祖先元素进行移动，并且原来的位置释放。如果不存在已定位的祖先元素，那么“相对于”最初的包含块（html元素）。
3. 固定定位
<style>
div{
width:80px;
height:80px;
}
.div1{
background: red;
}
.div2{
background: yellow;
position:fixed; //固定定位
left:20px;
top:20px;
}
.div3{
background: green;
}
</style>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
结果： 固定定位是 div2 相对于浏览器窗口进行移动，并且原来的位置释放，移动后当鼠标滑动时，div2 相对于浏览器窗口位置固定不变。
4. 使用定位实现水平居中
<style>
.div1{
width:100px;
height:100px;
border:solid 1px black;
position: relative;
}
span{
width:30px;
height:30px;
background: yellow;
position:absolute; //实现水平居中
left:0;
right:0;
margin:auto;
}
</style>
<body>
<div class="div1">
<span>div2</span>
</div>
</body>
结果：
实现居中的代码：
position:absolute;
left:0;
right:0;
margin:auto;
5. 使用定位实现上下左右居中
<style>
.div1{
width:100px;
height:100px;
border:solid 1px black;
position: relative;
}
span{
background: red;
width:50px;
height:50px;
position: absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
}
</style>
<body>
<div class="div1">
<span>div2</span>
</div>
</body>
结果：
实现居中的代码：
position: absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
