CSS之盒子模型

盒子模型组成
1.border边框

2.content内容

3.padding内边距

4.margin外边距

1.1 border
      border-width   border-style  border-color
     表格边框：table td:{
                                       border:1px solid pink;
                                        border-collapse:collapse;
                                    }
     边框的值会影响盒子的高度和宽度

1.2 padding
      padding:5px 上下左右5个项目内边距
      padding:5px 10px 上下5像素内边距  左右10像素内边距
      padding:5px 10px 20px  上内边距5像素 左右内边距10像素  下边距20像素
      padding:5px 10px 20px 30px 上5 右10 下20 左30 顺时针
     内边距会影响盒子的实际大小 ,内边距会彻撑大盒子大小
     故不改变盒子大小的话，则width/height减去内边距大小
     没有给高度和宽度，padding不会改变盒子大小

1.3外边距 margin
     复合写法跟padding一样
     利用内外边距水平居中：(1)盒子必须要有宽 (2)margin:0 auto;注：必须是块元素，行内元素和行内块元素水平居中需要在父级元素添加:text-align:center;即可
     嵌套块元素垂直外边距的塌陷：父元素有上边距，子元素也有上边距，此时父元素会塌陷较大的的边距。
     解决办法：(1):可以给父元素定义边框
                       (2):可以给度元素添加内边距
                       (3):可以给父元素添加overflow:hidden

1.4清除内外边距
     网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局之前，首要先清除网页元素的内外边距
   *{
        padding:0;/*清除内边距*/
        margin:0;/*清除外边距*/
    }