一 盒模型
1属性
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
2例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!DOCTYPE html> 9 <html lang="en"> 10 <head> 11 <meta charset="UTF-8"> 12 <title>盒模型</title> 13 <style> 14 div{ 15 width:200px; 16 height:200px; 17 background-color: red; 18 padding: 50px; #如果写四个数字顺序是上右下左 19 border: 1px solid green; 20 } 21 </style> 22 </head> 23 <body> 24 <div> 25 26 </div> 27 28 </body> 29 </html> 30 31 </body> 32 </html>
3 图解
二 margin用法
标准文档流：
margin:调整兄弟之间的距离
padding:调整父子标签之间的位置，注意盒模型的计算
坑1：
margin垂直方向塌陷问题：
当设置第一个盒子为margin-bottom:50px;
第二个盒子为margin-top:100px;那么小的margin会掉到大的magin中，这就是margin塌陷
水平方向上不会出现塌陷问题。
非标准文档流（脱标）：
标准流下的标签,兄弟之间使用margin调整位置，父子之间使用padding调整子标签的位置（小心盒模型的计算）
脱标的元素，margin和padding可以任意使用
浮动的盒子： margin: 0 auto;不起任何作用
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
例子一：标准文档流：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin用法</title> 6 <style> 7 .box{ 8 width:200px; 9 height:200px; 10 background-color: red; 11 margin-bottom: 50px; 12 /*margin-left: -20px;*/ 13 } 14 .box2{ 15 width: 200px; 16 height: 200px; 17 background-color: yellow; 18 margin-top: 50px; 19 } 20 span{ 21 background-color: red; 22 } 23 .t{ 24 margin-right: 20px; 25 /*右边出现20px的距离，并不是他自己向右移动20px*/ 26 } 27 .f{ 28 margin-left: 10px; 29 } 30 31 </style> 32 </head> 33 <body> 34 <div class="box"> 35 漂洋过海来看你 36 37 </div> 38 <div class="box2"> 39 40 </div> 41 <span class="t">看就看就看</span> 42 <spanc class="f">大幅度发</spanc> 43 44 </body> 45 </html>