重点： 行内元素进行绝对定位、固定定位或浮动后，就变成了行内块元素，可以设置宽高。
盒子包含： 内容、内填充、边框线和外边距。 背景包含： 内容、内填充、边框线。 盒子属性：
属性名称属性值padding 内填充padding-top / padding-left / padding-right / padding-bottom 四个边上的内填充padding:a 一个值表示四边相同的填充padding:a b 两个值表示上下是a，左右是bpadding:a b c 三个值表示上是a,左右是b,下是cpadding:a b c d 四个值表示上，右，下，左margin 外边距margin-top / margin-left / margin-right / margin-bottom 四个边上的外边距margin:a 一个值表示四边相同的外边距margin:a b 两个值表示上下是a，左右是bmargin:a b c 三个值表示上是a,左右是b,下是cmargin: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 / borderbox-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>结果：
定位前：
<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;
