CSS盒子模型（border、padding、margin、content）

盒子模型

1. 网页布局三大核心

盒子模型、浮动、定位

2. 组成

border 、margin 、padding 、 content ：边框，内边距，外边距，实际内容

2.1 边框（border）

语法：

border : border-weight | border-style | color

属性	作用
border-weight	边框的粗细，以px为单位
border-style	边框样式
border-color	边框颜色，默认为黑色

*****边框样式：有三种参数比较常用，solid(实线)、dashed(虚线) 、dotted(点线)

1. 可以分开写：border-top , border-left , border-right , border-bottom来设置上左右下的边框。

2. 边框简写，例如：

   border：1px solid red;
   

3. 后期布局时会遇到一些默认就有的border，那么就可以设置 border：0；，将边框设置没有。

4. 边框会影响盒子的大小

2.2 内边距（padding）

设置内边距，即边框与内容之间的距离。

语法：

合写属性:

书写个数	表达意思
padding ：10px;	1个值，上、右、下、左的内边距是10像素
padding ：10px 5px;	2个值，上下内边距是10像素，左右内边距是5像素
padding ：10px 5px 3px;	3个值，上内边距10像素，左右内边距5像素，下内边距3像素
padding ：10px 5px 3px 1px;	4个值，上内边距10像素、右内边距5像素、下内边距3像素、左内边距1像素

分写属性：

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

注意：

1. 内边距会影响盒子的大小

​ 解决方法：将盒子的宽度或者高度减去多出来的内边距大小即可。

2.如果盒子没有宽度，内边距就不会撑大盒子。

2.3 外边距（margin）

盒子与盒子之间的距离

语法和上文的内边距一样。故不重复。

1.外边距不会影响盒子大小，但会影响盒子的位置

2.水平方向居中

属性	要求
text-align: center;	文字，行内元素、行内块元素(img/input)
margin: 0 auto;/margin: auto;	块元素(固定宽度)

3. 垂直居中

属性	要求
line-height=盒子高度	设置其高度和盒子高度相同

2.3.1外边距合并

当相邻的第一个盒子和第二个盒子设置margin-bottom、margin-top，垂直距离并不是相加的，而是会自动选取其像素最大的外边距。

2.3.2外边距塌陷

子盒子添加margin-top时，并不会给子盒子上外边距，反而会给父盒子一个上外边距，此情况是外边距塌陷问题。但是margin-left和margin-right不会出现此情况。

解决方法：

1. 给父元素设置上边框
2. 给父元素设置上内边距
3. (推荐) 给父盒子添加隐藏，设置overflow:hidden
   例如：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .f {
            height: 200px;
            width: 200px;
            background-color: blue;
            overflow: hidden;
        }
        
        .son {
            height: 50px;
            width: 50px;
            margin-top: 20px;
            background-color: yellow;
        }
    </style>

<div class="f">
        <div class="son">

        </div>
</div>

效果如图：

2.4 影响盒子大小属性

padding、border、height、width