CSS笔记（四） 边框、内边距、外边距

   盒子边框border

   内边距padding：控制盒子的内容，有撑开盒子的问题

   外边距margin：盒子和盒子的距离，有外边距合并问题

 

1、边框：border

　　边框三个属性必须一起出现：border-width：1px; border-color: red;  border-style: solid;  //solid实线边框，dashed虚线，dotted点线

　　三个属性连写：border: 1px solid red;

 

注：  border会撑开带有width和height的盒子

 

属性：border-top/bottom/left/right：5px；设置上下左右的距离

　　   border-radius：5px; 设置边框圆角

　　   border-collapse：collapse；合并相邻边框

 

 

 

2、内边距：padding

     padding：10px;有一个上下左右10像素的边框

     padding-left/right/top/bottom

     padding: 10px 20px 30px; 上10  左右20  下30

 

注：padding会撑开带有width和height的盒子，

注：padding会撑开盒子，border也会撑开，如果规定盒子的大小，要把这两个的长度也计算进去。

 

（1）padding不会撑开盒子的情况

         给有宽度的div设置padding会撑开盒子，而div里面的子div如果没有给宽度，继承父div的宽度，padding就不撑开。

 

 

 

3、外边距：margin

（1）text-align：只能让div里面的文本居中对齐；

     让div盒子居中对齐：margin: 0 auto;  自动充满。左右充满就居中了

                                  =margin-left: auto; margin-right: auoto;

     用margin: 0 auto;设置居中条件：必须是块级元素和有指定高度；

 

（2）外边距合并：

     相邻元素垂直外边距会合并，以最大的为准，如上下两个div，一个有margin-bottom一个有margin-top,这两个会合并。无法避免。

 

（3）嵌套块集元素垂直外边距合并：

     一个大div里面有个小的div，小的div设置margin-top会把两个div一起下来，而不是小div距离大div的mergin-top；无法避免。

      解决：（1）为父亲元素定义1像素的上边框或者上内边距：border：1px solid #000；会撑开盒子大小

                （2）为父亲元素添加overflow:hidden;