4-11 盒子模型（CSS的重点）

（承上启下）

网页布局的本质就是：

利用CSS设置好盒子的大小，

再进行盒子的摆放，

最后把网页元素（文字、图片等）放入盒子里。

-----------------------------------------

14.1 盒子模型（四部分组成：内容content、边框border、内边距padding、外边距margin）

14.2 边框(可以单独指定哪一边)　　border： border-width  ||  border-style  ||  border-color

border-top: 2px solid red;

border-left: 1px dashed green;

border-right: 3px dotted blue;

border-bottom: 4px inset pink;

理解过程的转化(两者等价，都是用后者，简单方便)：

border-top: none;                                                                              

border-left: none;                               --------------------->>>>>                    border: none;               

border-right: none;                                                                                    border-bottom: 1px dashed red;

bordr-bottom: 1px dashed red; 

 小技巧：全班都不许吃饭，哦，小明你可以去吃饭。 后者的border-bottom根据层叠性，把上面整个border里的bottom一块给层叠掉了（层叠体现在chorme浏览器检查模式

　　　　的style里面，就是样式被删除线给从中间删去了。），

　　　　但是border的剩余的其他三条边的样式并没有冲突，所以就保留了下来。 根据层叠性的原则，这2句语法不能交换顺序。

4-11 盒子模型（CSS的重点）

原文：https://www.cnblogs.com/Nelson-Yen/p/14167539.html