CSS盒子模型知识总结

前言

2020年春招开始，作为一个前端菜鸟，我也想在春招找到一份比较好的实习，为我的秋招助力
这篇文章是我在面试之前css盒子模型的知识进行的总结

正片

一、基本概念

CSS将页面中所有的元素都设置成一个矩形盒子，每个盒子都由以下几个部分组成：

• 内容区（content）：元素中所有子元素和文本内容都在内容区中排列，width和height均为内容区的属性
• 内边距（padding）:内容区和边框之间的距离，会影响盒子的大小

    给盒子设置背景颜色的时候，颜色会延伸到内边距上，但内容只会显示在content中

• 边框（border）：盒子的边缘，边框里边属于盒子内部，边框外边属于盒子外部，会影响盒子的大小

    要设置边框，至少要设置三个样式：
    1.border-width：有默认值，一般为3px（具体浏览器而定），可分开指定不同方向的宽度
    2.border-color：默认为color的值
    3.border-style：默认为none，可取值：dotted（点状虚线）、dashed（线装虚线）、double（双线）、solid（实线）
    
    可分开指定不同方向边框的样式
    四个值指定，分别为 上 右 下 左
    三个值指定，分别为 上 左右 下
    两个值指定，分别为 上下 左右
    
    可同时指定三个样式
    例如：border: 1px black solid（三个样式的顺序不分先后）

• 外边距（margin）：不会影响盒子可见框大小，但会影响盒子的位置和盒子实际占用的空间

    元素在页面中是按照自左向右的方向排列的，默认情况下，设置左或上margin会移动自身，设置下或右margin会移动其他元素
    也可以设置负值，那么盒子就会往相反方向走

盒子可见框大小为content + padding + border

二、标准盒子模型和IE盒子模型

1.标准盒子模型

2.IE盒子模型

三、水平布局

元素的水平方向的布局，元素在其父元素中水平方向的的位置由以下几个属性共同决定：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right

必须满足等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度

若等式不成立，则称为 过渡约束 ，等式会自动调整

调整规则（ 只有margin（左右）和width可设为auto ）：

• 若七个值中无auto，浏览器自动调整margin-right
• 若有auto，则自动调整auto的值
• 一个width和一个margin设为auto，则width自动调整为最大，margin自动调整为0

若两个margin为auto，width固定，则元素居中
因此得到第一种水平居中方法：
width：xxx px;
margin: 0 auto;

四、垂直布局

默认情况下父元素的高度被内容撑开，子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则会溢出
此时，可以使用overflow属性来设置如何处理溢出元素

overflow属性可选值：

• visible：默认值，子元素会从父元素溢出，在父元素外部显示
• hidden：溢出部分不会显示
• scroll：生成两个滚动条，通过滚动条来查看完整的内容
• auto：根据需要生成滚动条

可指定某一方向单独处理：

• overflow-x：水平方向处理
• overflow-y：垂直方向处理

五、行内元素的盒模型

行内元素不支持修改width和height属性，即不支持手动修改内容区大小，但可以设置：

• padding：垂直方向的padding不会影响页面的布局（可能会出现覆盖情况）
• border：垂直方向的border不会影响页面的布局（可能会出现覆盖情况）
• margin：垂直方向的margin不会影响页面的布局（可能会出现覆盖情况）

想要设置行内元素的宽高：设置display属性让它变成块级元素
display属性可选值：

• inline：行内元素
• block：块元素
• inline-block：行内块元素（既可以设置宽高，又不独占一行）
• table：将元素设置成表格
• none：元素不在页面中显示

隐藏元素的两种做法：

• display:none 隐藏元素
• vivibility:hidden 隐藏元素，但该元素仍占据位置