概念：所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。
盒子模型特性
一、盒子模型的分类
标准的盒子模型
组成部分： 内容区 content + 填充补白（里面的） + padding + 边框 border+外边距 （margin）
在标准盒子模型下，计算一个容器的总高度
- 如果是计算的自己 设置的height+padding+border
- 如果计算的是父元素的，子元素设置的height+子元素设置padding+子元素设置border+子元素设置margin。
怪异盒子模型（IE的标准盒模型）
组成部分： 内容区域 + margin外边距
触发条件：
- 给元素添加CSS3属性 box-sizing：border-box
div{box-sizing：border-box；}
- CSS3属性的兼容都到IE9+，部分兼容到IE10+
- 所以如果用CSS3新属性，就不要考虑低版本浏览器了
- 触发容器为怪异盒子模型之后，再给元素添加border或者 padding就不会把盒子撑大，也不需要去做减法了。
- 文档结构的 doctype 不写，这个是在 IE8 IE7 IE6 IE5等低版本上有，测试可以在 win7 系统上比较老旧的IE浏览器上，win10 自带的新IE浏览器不可以。
二、盒子边框（border）
border 属性来定义盒子的边框，该属性包含3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。
1、边框样式border-style
| 属性值 | 说明 |
|---|---|
| none | 默认值，无边框，不受任何指定的 border-width 影响 |
| hidden | 隐藏边框，IE 不支持 |
| dotted | 定义边框为点线 |
| dashed | 定义边框为虚线 |
| solid | 定义边框为实线 |
| double | 定义边框为双线边框，两条线及其间隔宽度之和等于指定的border-width 值 |
| groove | 根据 border-color 定义 3D 凹槽 |
| ridge | 根据 border-color 定义 3D 凸槽 |
| inset | 根据 border-color 定义 3D 凹边 |
| outset | 根据 border-color 定义 3D 凸边 |
2、综合写法
border : border-width || border-style || border-color
border 是一个复合属性，可以把3个子属性结合写在一起。注意：顺序不能错误。
扩展1：
table{ border-collapse:collapse; }
collapse 单词是合并的意思，通过该属性可以来设置一个细线表格。
扩展2：
圆角边框（CSS3）：
语法：取值可以是指定的固定的长度，也可以使用百分比来表示。
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 10px 40px 80px 100px; /* 左上角 10 右上角 40 右下角 80 左下角 右下角100 */
三、margin 应用
- margin-top:上外边距
- margin-right:右外边距
- margin-bottom:下外边距
- margin-left:上外边距
- margin:上外边距 右外边距 下外边距 左外边
- margin：0 auto；实现一个有宽度的容器水平居中。
注意点：
A. margin支持左右auto，上下无效
B. margin-top使用的时候，有兼容问题。
产生条件：默认情况下，如果一个子元素给了 margin-top ，父元素会一起下来，这个是兼容问题
解决方法：
- 子元素或者父元素浮动（看页面布局来定）
- 给父元素添加border-top
- 给父元素添加overflow：hidden；
1、 拓展案例
<style>
.wrapper{width: 200px;height: 200px;background: skyblue;}
.content{width: 50px;height: 50px;background:pink;margin-top: 50px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
<style>
.wrapper{width: 200px;height: 200px;background: skyblue;overflow: hidden;}
.content{width: 50px;height: 50px;background:pink;margin-top: 50px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
C、margin的上下外边距重叠{原因是因为BFC}
（注意：具体详细点击下面一篇BFC的深层理解和应用场景及布局方式的文章中有介绍）
产生条件：默认情况下，2个并列的元素，上面元素给了margin-top，下面元素给了margin-bottom，这个时候上下会发生重叠，解析的结果是最大的数值。
解决方法：
1、给下面的元素添加父元素并且添加声明overflow：hidden；
四、padding 应用
padding 是内间距 （填充 补白）
什么时候用，需要调整间距，并且这个间距相对于该元素来说是里面的时候用
用法：简写 和拆开
padding:10px; padding:10px 20px 30px 40px;
padding-top bottom left right
注意点：
- padding添加上去之后，会把容器给撑大， 如果设置了容器固定的宽高，又添加了padding之后，想要保证盒子大小不变，必须得减去padding的数值，如果没有设置容器的宽高，那么就不需要做减法
- padding不支持负值写法
- padding也不支持auto
五、盒子模型布局稳定性
根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin
原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题 我们经常使用宽度剩余法 高度剩余法来做
六、盒子阴影
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
注意
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 默认值，但是不能写 ，想要内阴影写上 inset 即可。
- 可以添加多个阴影，如同时添加内阴影和外阴影。
4215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
