CSS盒子模型

盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子

• content（内容）：盒子的内容
• padding（内边距）：用于控制元素内部与边框之间的距离
• border（边框）：盒子的边框
• margin（外边距）：用于控制元素与其他元素之间的距离（不影响盒子的大小，如果没设置width会影响盒子大小）

盒子的大小 = content + 左右 padding + 左右 border

div {
    /** 背景颜色包括内容区、内边距、 */
    background-color: red;

    /** 内容区的高和宽 */
    width: 200px;
    height: 200px;

    /** 内边距 */
    padding: 10px;

    /** 盒子边框 */
    border: red 10px solid;

    /** margin不影响盒子整体的大小 */
    margin: 10px;
}

content_内容区

属性名	功能
width / height	设置内容区域宽、高度
max-width / min-width	设置内容区域的最大/小宽度（一般不与width一起使用）
max-height / min-height	设置内容区域的最大/小高度（一般不与height一起使用）

div {
    min-height: 500px;
    min-width: 500px;
    background-color: red;
}

默认宽度

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度

总宽度 = 父元素content - 自身的左右margin

内容区的宽度 = 父的 content --- 自身的左右 margin --- 自身的左右 border --- 自身的左右padding

padding_内边距

属性名	功能	属性值
padding-top	上内边距	长度
padding-right	右内边距	长度
padding-bottom	下内边距	长度
padding-left	左内边距	长度
padding	复合属性	长度，可以设置 1 ~ 4 个值

padding复合属性的使用规则：

1. padding : 10px; 四个方向内边距都是10px
2. padding : 10px 20px; 上 10px ，左右 20px（上下、左右）
3. padding : 10px 20px 30px; 上 10px ，左右 20px ，下 30px（上、左右、下）
4. padding : 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px（上、右、下、左）

        div {
            width: 400px;
            height: 400px;
            background-color: red;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

注意：

• padding的值不能为负数
• 行内元素的上下内边距不能完美设置，左右内边距可以，会导致元素覆盖
• 块级元素、行内块元素，四个方向内边距都可以完美设置

border_边框

属性名	功能	属性值
border-style	边框线风格，复合了四个方向的边框风格	none： 默认值 solid： 实线 dashed： 虚线 dotted： 点线 double： 双实线
border-width	边框线宽度，复合了四个方向的边框风格	长度，默认 3px
border-color	边框线颜色，复合了四个方向的边框颜色	颜色，默认黑色
border	复合属性	值没有顺序和数量要求
border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color	分别设置各个方向的边框，left、right、top、bottom是各个方向的复合属性	同上
border-radius	边框圆角

div {
    width: 400px;
    height: 400px;
    background-color: red;
    /** border-left: blue 10px solid; */
    border-left-width: 10px;
    border-color: blue;
    border-style: solid;
    border-radius: 40px
}

margin_外边距

属性名	功能
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距
margin	复合属性，可以写 1~4 个值，规律同padding（顺时针）

注意：

1. 子元素的margin，是参考父元素的content计算的
2. 设置上、左的margin影响自己的位置，下、右margin影响后面兄弟元素的位置
3. 块级元素、行内块元素，均可以完美地设置四个方向的margin，行内元素可以完美设置左右margin，上下margin设置无效
4. margin的值也可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中
5. margin的值可以是负值
6. 没有直接设置 margin 属性时，浏览器会默认应用一些样式规则

    <style>
        .outer {
            width: 400px;
            height: 400px;
            padding: 50px;
            background-color: orangered;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: auto;
        }
    </style>

<div class="outer">
    <div class="inner"></div>
</div>

margin塌陷问题

什么是 margin 塌陷？

第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上，也就是被父元素吃掉了，这个属于历史遗留问题

如何解决 margin 塌陷？

1. 给父元素设置不为0的padding
2. 给父元素设置宽度不为0的border
3. 给父元素设置css样式overflow:hidden

    <style>
        .outer {
            width: 400px;
            background-color: gray;
            overflow: hidden;
        }

        .inner {
            width: 100px;
            height: 100px;
        }

        .inner1 {
            background-color: red;
            margin-top: 50px;
        }

        .inner2 {
            background-color: orange;
            margin-bottom: 50px;
        }
    </style>
    
<div class="outer">
    <div class="inner inner1"></div>
    <div class="inner inner2"></div>
</div>
<div>测试</div>

margin合并问题

什么是margin合并？

上面元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加

如何解决margin塌陷？

上下两个元素设置上或下外边距就可以了，或者使用float

    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 50px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 60px;
        }
    </style>

<div class="box1"></div>
<div class="box2"></div>

处理内容溢出

属性名	功能	属性值
overflow	溢出内容的处理方式	visible：显示（默认值） hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：内容时显示滚动条，不溢出不显示
overflow-x	水平方向溢出内容的处理方式	同overflow
overflow-y	垂直方向溢出内容的处理方式	同overflow

    <style>
        .outer {
            width: 400px;
            height: 200px;
            background-color: blue;
            overflow: hidden;
        }

        .inner {
            width: 1000px;
            background-color: red;
        }
    </style>

<div class="outer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, iste pariatur? Esse impedit iure
    nobis officia voluptates! Adipisci alias amet at doloremque error et magnam maiores minima, nemo neque perferendis,
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti, dicta distinctio dolorem ducimus eius fuga hic iste maxime, nam porro praesentium quam, sunt tempora voluptas. Ad, consequuntur cumque dicta, dolorem eos esse impedit iusto libero magni nam natus nisi nostrum nulla obcaecati optio, pariatur quas quisquam quos repudiandae tempora.</div>
    facilis illum nihil omnis quidem temporibus. Alias ducimus pariatur ratione repudiandae, sunt tempore voluptatem. Ea
    eaque eveniet fuga nulla pariatur. Accusamus at expedita laborum nam natus odio officia perspiciatis quam quibusdam
</div>

注意：

1. overflow-x、overflow-y不能一个是hidden，一个是visible，这两个属于实验性属性，不建议使用
2. overflow常用的值是hidden、auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症

隐藏元素

属性	属性值
visibility	visible：显示元素（默认值） hidden：隐藏元素，但会占有原来的位置
display	none：隐藏元素且不占位

    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /*visibility: hidden;*/
            display: none;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

<div class="box1"></div>
<div class="box2"></div>

继承样式

元素如果本身设置了某个样式，就使用本身设置的样式。本身没有设置样式，会从父元素开始一级一级继承。但继承的样式优先级是最低的。

能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的

支持继承的属性：字体属性、文本属性（除了vertical-align）、文字颜色等

不支持继承的属性：边框、背景、内边距、外边距、宽高、溢出方式等

默认样式

元素一般都些默认的样式，如：

1. a：下划线、字体颜色、鼠标小手
2. h1 ~ h6：文字加粗、文字大小、上下外边距。
3. p元素：上下外边距
4. ul、ol：左内边距
5. body>：有8px外边距（4个方向）

优先级：元素的默认样式 > 继承的样式

布局小技巧

行内元素、行内块元素，可以被父元素当做文本处理，如： text-align 、 line-height 、 text-indent 等

如何让子元素，在父元素中水平居中，在子元素加margin: (父元素content － 子元素盒子总高) / 2 auto;

    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: blue;
            overflow: hidden;
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: red;
            margin: 150px auto;
            text-align: center;
            line-height: 100px;
        }
    </style>

<div class="outer">
    <div class="inner">居中</div>
</div>

当子元素为行内元素、行内块元素，给父元素加上：text-align:center和line-height

    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: blue;
            text-align: center;
            line-height: 400px;
        }

        .inner {
            background-color: red;
            font-size: 20px;
            text-align: center;
        }
    </style>

<div class="outer">
    <span class="inner">居中</span>
</div>

如何让子元素，在父亲中垂直居中：

子元素为行内元素、行内块元素：让父元素的 height = line-height ，每个子元素都加上： vertical- align:middle;（若想绝对垂直居中，父元素font-size设置为0）

    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: gray;
            text-align: center;
            line-height: 400px;
            font-size: 0;

        }

        img {
            vertical-align: middle;
        }

        span {
            background-color: red;
            vertical-align: middle;
            font-size: 20px;
        }
    </style>

<div class="box">
    <span>你好</span>
    <img src="./images/3.png">
</div>

元素之间的空白问题

**产生的原因：**行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

**解决方案：**给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小

    <style>
        div {
            height: 200px;
            background-color: darkgreen;
            font-size: 0;
        }

        .d1 {
            background-color: blue;
        }

        .d2 {
            background-color: red;
        }

        .d3 {
            background-color: chocolate;
        }

        span {
            font-size: 20px;
        }
    </style>
    
<div>
    <span class="d1">韩信</span>
    <span class="d2">李白</span>
    <span class="d3">露娜</span>
</div>

行内块的幽灵空白问题

**产生原因：**行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的

    <style>
        div {
            width: 600px;
            background-color: red;
        }

        img{
            height: 200px;
            vertical-align: bottom;
        }
    </style>

<div>
    <img src="001.jpeg">x
</div>

解决方案：

• 方案一： 给行行内块设置vertical-align，值不为baseline即可，设置为middel、bottom、top均可
• 方案二： 若父元素中只有一张图片，设置图片为块元素display:block
• 方案三： 给父元素设置font-size:0如果该行内块内部还有文本，则需单独设置font- size