CSS之盒模型

组成

1. border (边框)，具有的属性:border-width, border-style, border-color，简写border:1px solid red
   四条边框边border-[top|left|right|bottom]
   合并相邻的边框 border-collapse:collapse;
   注意： 如果不是CSS3的盒模型，边框会影响盒子的实际大小
   圆角：border-radius: 50%宽度的一半, 圆角矩形改属性设置为高度的一半
2. padding(内边距)：内容和边框的距离
   写法：

   padding: 5%;                /* 所有边：5% 的内边距 */
   
   padding: 10px;              /* 所有边：10px 的内边距 */
   
   padding: 10px 20px;         /* 上边和下边：10px 的内边距 */
                               /* 左边和右边：20px 的内边距 */
   
   padding: 10px 3% 20px;      /* 上边：   10px 的内边距 */
                               /* 左边和右边：3% 的内边距 */
                               /* 下边：   20px 的内边距 */
   
   padding: 1em 3px 30px 5px;  /* 上边：1em  的内边距*/
                               /* 右边：3px  的内边距*/
                               /* 下边：30px 的内边距*/
                               /* 左边：5px  的内边距*/
   

   注意： padding会影响盒子的实际大小，若已经指定height，weight，则会撑大整个盒子，反之则不会。
   应用：当设置nav的时候，文字字数不一致时，可以给左右设置一个padding，这样就会每个盒子的宽度不同，但是左右距离是相同的
3. margin (外边距)：盒子和盒子之间的距离，写法类似padding
   外边距塌陷（合并）：对于两个父子关系的块元素，父子元素都有边距margin，则父元素会塌陷(使用)较大的值。不过浮动的元素不会有外边距合并的问题
   解决方案 1.父元素定义边框 2.父元素定义内边距 3. 父元素添加overflow:hidden
4. content（内容）：盒子的内容

关于盒模型需要注意：

1. 默认的网页元素自带默认的内外边距，可以在布局前清除网页的内外边距

* {
	padding: 0;
	margin: 0;
}

2. 行内元素只需要左右边距，不需要设置上下边距。

盒子阴影

上述属性讲解

问题

CSS3之前的盒子模型，如果使用padding或margin属性不当，会撑大我们的盒子，给我们的布局带来了不必要的麻烦

解决：CSS3盒模型

属性:box-sizing，有两个值:

1.content-box(默认)
2.border-box ：直接框定了最终盒子的大小，不会为撑大盒子的问题所困扰（前提是padding和border不会超过width）