ruorbb自用|前端学习9—CSS盒子模型

一、盒子模型组成

边框、内容、外边距、内边距

 

1、边框（border）

border-width        定义边框粗细 5px

border-style         边框样式（solid实线，dashed虚线，dotted点线）

border-color        边框颜色

——复合写法：border: 5px solid pink;   （没有顺序）

只设置上边框，border-top: 1px solid #000;，四个边框均可设置

2、细边框

border-collapse: collapse;           合并相邻的边框

3、内边距(padding)

简写：

 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小，继承的宽高也不会影响盒子大小

4、外边距（margin）

作用：控制盒子与盒子之间的距离。

                margin-left：左外边距。   top、bottom、right都有

                margin的简写含义和padding一样

（1）外边距可以让块级盒子水平居中，但是要满足两个条件：

                1.盒子必须指定宽度（width）

                2.盒子的左右外边距都设置为auto，即margin：0 auto；

（2）让行内元素或行内块元素水平居中，给其父元素添加text-align：center即可

（3）外边距合并

         第一种情况：相邻块级元素垂直外边距的合并

                     解决方案：只给一个盒子添加外边距。

        第二种情况：嵌套块元素垂直外边距的塌陷

                 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时 子元素也有上外

                边距，此时父元素会塌陷较大的外边距值

 解决方案（三个）：1.为父元素定义上边框 border：1px solid transparent

                                  2.为父元素定义上内边框 padding-top：1px 

                                  3.为父元素添加overflow：hidden

5、清除内外边距

网页元素很多都带有默认的捏外边距，而且不同浏览器默认的也不一样，因此我们在布局前，首先要清楚下网页的内外边距

        这句话也是我们CSS第一行代码
        * {
            margin: 0;
            padding: 0;
        }

【注意】行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了

二、PS基本操作