margin的特点
1. 上下外边距会重叠，取最大的显示！
2. 父元素的第1个子元素的margin-top没有碰到父元素的border或者padding的时候，会将子元素的margin-top作用在父元素身上
解决：
1. 给父元素加有效的边框或padding(不能为0)
2. 给父元素加overflow:hidden，触发父元素的BFC
块级格式化上下文
block formating context
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>margin外边距</title> 5 <style> 6 .box{ 7 width:100px; 8 height:100px; 9 background:red; 10 11 /*display:inline-block;*/ 12 } 13 14 .die{ 15 width:300px; 16 height:300px; 17 background:lime; 18 19 /*解决问题2的方式一*/ 20 /*border:1px solid lime;*/ 21 /*padding-top:1px;*/ 22 23 /*方式二（触发了父元素的BFC）*/ 24 overflow:hidden; 25 } 26 .die .son{ 27 width:100px; 28 height:100px; 29 background:orange; 30 margin-top:30px; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box" style="margin-bottom:20px"></div><div class="box" style="margin-top:20px"></div> 36 <!-- <p>段落标签的特点：上下会空两行，上下会有16px的外边距</p> 37 <p>两个p标签之间的距离应该是多少？</p> --> 38 39 <div class="die"> 40 <div class="son"></div> 41 <div class="son" style="margin-top:30px"></div> 42 </div> 43 </body> 44 </html>
overflow 溢出处理
值：
hidden 超出部分隐藏起来
scroll 显示滚动条
auto 自动，超出就显示滚动条
<html lang="en"> <head> <meta charset="UTF-8"> <title>溢出处理</title> <style> .box{ width:100px; height:100px; border:1px solid red; /*溢出显示方式*/ overflow:hidden; overflow:scroll; /*超出才显示滚动条*/ overflow:auto; } </style> </head> <body> <div class="box">陌陌APP，你值得拥有！昨天泄露了3000万条数据，15年产生的数据，包括手机号、账号、密码，50美元，不到350元！</div> </body> </html>
visibility 隐藏元素
值：
hidden 隐藏元素，但保留物理位置
visible 默认，看得见的！
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>visibility隐藏</title> 5 <style> 6 .two{ 7 /*隐藏元素*/ 8 visibility:hidden; 9 } 10 .one:hover+p{ 11 /*显示元素*/ 12 visibility:visible; 13 } 14 </style> 15 </head> 16 <body> 17 <p class="one">黄与坑</p> 18 <p class="two">孔凌风</p> 19 <p style="display:none">李王茹</p> 20 21 <p>行黑红</p> 22 </body> 23 </html>
float 浮动
值：
none 不浮动
left 左浮动
right 右浮动
会脱离文档流，破坏性和包裹性，文字环绕
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>浮动</title> 5 <style> 6 *{margin:0;} 7 .box{ 8 width:100px; 9 height:100px; 10 background:tan; 11 float:right; 12 margin-top:5px; 13 } 14 .top{ 15 background:#333; 16 height:40px; 17 } 18 .container{ 19 width:1230px; 20 height:40px; 21 margin:0 auto; 22 } 23 .left{ 24 float:left; 25 line-height:40px; 26 } 27 .right{ 28 line-height:40px; 29 float:right; 30 } 31 .top a{ 32 color:#ccc; 33 text-decoration:none; 34 font-size:13px; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="top"> 40 <div class="container"> 41 <div class="left"> 42 <a href="">小米商城</a> 43 <a href="">MIUI</a> 44 <a href="">云服务</a> 45 <a href="">云服务</a> 46 <a href="">云服务</a> 47 <a href="">云服务</a> 48 </div> 49 <div class="right"> 50 <a href="">登录</a> 51 <a href="">注册</a> 52 </div> 53 </div> 54 </div> 55 <!-- <div class="box"></div> 56 <p style="border:1px solid red">123</p> --> 57 </body> 58 </html>
clear 清除浮动
值：
both 清除两边的浮动(常用)
left/right 不常用
清除浮动必须加在块级元素身上
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>清除浮动</title> 5 <style> 6 .box{ 7 width:100px; 8 height:100px; 9 background:red; 10 11 /*3个盒子一起浮动*/ 12 float:left; 13 } 14 15 .one{ 16 width:100%; 17 height:40px; 18 background:#333; 19 } 20 </style> 21 </head> 22 <body> 23 <!-- 3个都飘了 --> 24 <div class="box"></div> 25 <div class="box" style="background:green"></div> 26 <div class="box" style="float:right;"></div> 27 28 <div style="clear:both"></div> 29 30 <!-- 无视前面3个喝飘的，自己顶上去 --> 31 <div class="one"></div> 32 </body> 33 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>子元素浮动后，父元素的高度塌陷</title> 5 <style> 6 .son{ 7 width:100px; 8 height:100px; 9 background:tan; 10 11 float:left; 12 } 13 14 /*伪对象清除浮动*/ 15 .box::after{ 16 /*content属性必须的*/ 17 content:''; 18 display:block; 19 clear:both; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="box"> 25 <div class="son"></div> 26 <div class="son"></div> 27 <div class="son"></div> 28 29 <!-- <div style="clear:both"></div> --> 30 </div> 31 123 32 33 </body> 34 </html>
position定位
值：
relative 相对定位
参照自己原来的位置进行定位
不会脱离文档流，不会影响其他元素的布局
absolute 绝对定位
会脱离文档流
参照离自己最近的，定位过的祖宗元素进行定位，如果没有定位过的祖宗元素，则参照浏览器的窗口进行定位
fixed 固定定位
脱离文档流
固定在浏览器窗口的某个位置，跟随滚动条一起滚动
static 默认值(不定位)
配合top/bottom/left/right 属性，可以控制元素的位置
1 <head> 2 <meta charset="UTF-8"> 3 <title>定位</title> 4 <style> 5 .box{ 6 width:200px; 7 height:40px; 8 background:#333; 9 10 /*相对定位*/ 11 /*position:relative;*/ 12 /*top:40px;*/ 13 14 /*绝对定位：块级经典的水平和垂直都居中*/ 15 position:absolute; 16 left:50%; top:50%; 17 margin-left:-100px; 18 margin-top:-20px; 19 /*bottom:0; 20 right:0;*/ 21 22 /* 23 行级元素水平垂直都居中： 24 text-align:cetner; 25 line-height:高度一致; 26 */ 27 } 28 .die{ 29 width:500px; 30 height:300px; 31 background:orange; 32 33 /*给父元素设置定位后，子元素就会参照父元素的位置进行定位*/ 34 /*position:relative;*/ 35 36 position:fixed; 37 } 38 </style> 39 </head> 40 <body style="height:1000px"> 41 <div class="die"> 42 <div class="box"></div> 43 小时候，你妈妈打过你没有？打过，打过3次！3次没打掉，我就出生了！ 44 </div> 45 <p>小时候，你妈妈打过你没有？打过，打过3次！3次没打掉，我就出生了！小时候，你妈妈打过你没有？打过，打过3次！3次没打掉，我就出生了！小时候，你妈妈打过你没有？打过，打过3次！3次没打掉，我就出生了！</p> 46 </body> 47 </html>
z-index
值：
是数字，数字越大，层级越高
auto 默认值，可以想象为层级是0
注意：必须设置了position定位只有才有用
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>元素的堆叠层级</title> 5 <style> 6 .box{ 7 width:100px; 8 height:100px; 9 background:orange; 10 11 position:absolute; 12 } 13 </style> 14 </head> 15 <body> 16 <!-- 设置z-index堆叠层级 --> 17 <div class="box" style="background:red;margin-left:50px;z-index:-1;"></div> 18 <div class="box"></div> 19 20 <p>找啊找啊找朋友，找到一个女朋友，亲个嘴来，么么手，晚上生个小朋友</p> 21 </body> 22 </html>