2020-12-09盒模型与标准文档流

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、盒模型

1.盒模型基本概念

• 盒子：容器 盒子模型 英文：box model。
• 最常见的盒子是div span
• 盒子中的区域：content
  1.宽 width px content
  2.高 height content
  3.内边距 padding
  4.边框 border
  5.外边距 margin
• 【注】
  标准盒模型的宽和高和盒子真实占有的宽高不是一个概念。
• 【注】
  盒子的宽不设置时，默认为100%；但是宽度一般会做设置，高度却不一定。
  盒子真实占有的宽：内容的宽+左padding+右padding+左边框+右边框
  盒子真实占有的高：内容的高+上padding+下padding+上边框+下边框

 div {
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 1px solid red;
            margin: 10px;
        }

1.内边距padding

内边距
内容与边框的距离。
内边距的区域也会被背景渲染。
padding有四个方向：上下左右。

• 写法：
  1.小属性
  padding-left
  padding-right
  padding-top
  padding-bottom

• 2.复合属性写法：
  四种写法：
  一值法：
  padding:20px; 上下左右的padding相等。
  二值法
  padding:20px 10px; 上下 左右
  三值法：
  padding:20px 10px 30px; 上 左右 下。
  四值法：
  padding：10px 20px 30px 40px; 上 右 下 左 顺时针。

• 小技巧：
  若只有单个方向的内边距与其他内边距不同，可以先设置总体，再用单一属性单独设置不同的内边距

.box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color: green;
            padding: 20px;
            padding-left: 10px;
        }

2.边框border

border 边框
盒子占有的最外层的区域。

• border是一个复合属性。
  border有三个要素：宽度，线的类型，颜色。
• 按三要素拆分：
  border-width 设置宽度
  border-style 设置线的类型
  border-color 设置颜色
• 按照三要素与方向设置
  border-left-width
  border-left-style
  border-left-color
• 按照方向设置：
  border-left
  border-right
  border-top
  border-bottom

.box {
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }

• 制作三角形：
  1.宽高设置为0；
  2.取消对应的边框。
  3.将相邻的边框颜色设置为白色（透明色）

.box{
            width: 0px;
            height: 0px;
            border: 100px solid green;
            border-bottom: none;
            border-left-color: white;
            border-right-color: white;
        }

3.外边距margin

margin 外边距
盒子与盒子之间的距离。
margin有四个方向：上下左右。

• 写法：
  1.小属性
  margin-left
  margin-right
  margin-top
  margin-bottom
  2.复合属性写法：
  四种写法：
  一值法：margin:20px; 上下左右的margin相等。
  二值法 margin:20px 10px; 上下 左右
  三值法： margin:20px 10px 30px; 上 左右 下。
  四值法：margin：10px 20px 30px 40px; 上 右 下 左 顺时针。
• auto:代表自适应。
  会将剩余的空间自动分配给设置auto的外边距。
  margin : 0 auto;
  可以让盒子水平居中。

4.高度不固定

盒子的内容多少不确定时，为了保证元素的高度始终合适，不会出现大片留白与溢出，这种情况下一般不设置高度，而是用内容去撑开高度。

 div {
            margin: 0 auto;
            width: 500px;
            border: 1px solid seagreen;
        }

5.父子盒模型

子盒子的整体占有的位置不要超过父盒子的内容区域
若子盒子不设置宽度，会自动撑满父盒子的内容区域。
若不设置宽，只设置内边距和边框，宽度会自适应。

<div class="father">
        <div class="son"></div>
    </div>

.father {
            width: 300px;
            height: 300px;
            background-color: seagreen;
            padding: 50px;
        }
        
        .son {
            height: 200px;
            padding-left: 10px;
            border: 10px solid black;
            background-color: sienna;
        }

6.外边距塌陷

• 1.上下盒子的外边距塌陷

  垂直方向上相邻的两个元素，如果都有外边距，则相交的地方会出现外边距重合现象，也叫作外边距塌陷。
  在垂直方向上，margin有相遇的部分，不是取两个margin的和，而是取最大值。
  当margin相遇的部分，一个值为正，一个值为负，结果为两个值的和。
  当margin相遇的部分，两个值都为负数，结果为绝对值最大的。

• 解决办法：
  1.BFC规范
  2.两个上下相邻的同级盒子之间，为了避免出现外边距塌陷，尽量只设置上盒子的底部margin或下盒子的顶部margin。

 div {
            width: 200px;
            height: 200px;
        }
 .box1 {
            background-color: sienna;
            margin-bottom: -40px;
        }
 .box2 {
            margin-top: 40px;
            background-color: slateblue;
        }

7.嵌套盒子的外边距塌陷

嵌套盒子的外边距塌陷
父盒子没有填充内容，也没有设置顶部边框，那么子盒子的margin-top会让父盒子与子盒子一起掉下来。

• 解决办法：
  1.有填充内容即可。（不推荐）
  2.给父盒子添加顶部的边框。（不推荐）
  3.将margin换成padding。
  同级之间的盒子距离使用margin，父子盒子使用padding。

.father {
        width: 300px;
        height: 300px;
        background-color: slateblue;
        /* 顶部边框
        border-top: 1px solid; */
    }
.son {
        width: 100px;
        height: 100px;
        background-color: tan;
        margin-top: 100px;
    }

8.盒模型

盒模型分为两类：

• 1.标准盒模型
  设置的width和height是指内容的宽和高。增加内边距与边框会影响盒子的真实尺寸，但不会影响内容区域的大小。
• 2.IE盒模型（怪异盒模型）
  设置的width和height是指盒子的真实尺寸。增加内边距与边框会影响内容区域的大小，但不会影响盒子的真实尺寸。

.normal {
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 默认值  标准盒模型 */
            box-sizing: content-box;
        }
        
        .ie {
            margin-top: 50px;
            /* IE盒模型 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }

二、标准文档流

1.标准文档流含义

• 定义：
  内容必须是从左到右，由上往下书写。前面的内容大小或位置发生变化时，后面的内容也会随之变化。
  html网页就是一个标准文档流。
  1.空白折叠现象
  无论多少个空格，换行 缩进，都会折叠成一个空格。
  2.高矮不齐，底部对齐。
  3.自动换行

2.行内元素与块级元素

标准文档流将HTML元素分为了三种

• 1.行内元素 inline
  可以与其他行内元素并排展示。
  设置宽高无效。
  实际的宽高，由内容的宽高来决定。
• 2.块级元素 block
  独占一行。
  可以设置宽高
• 3.行内块元素 inline-block
  可以设置宽高
  可以与其他行内元素或行内块元素并排。
• 容器级标签 div h li dt dd
• 文本级标签 span p a i em b
• 行内元素：
  除了p标签之外，所有的文本级标签都是行内元素。p标签是文本级标签，但属于块级元素。
• 块级元素：
  所有的容器级标签都是块级元素，包括p标签。
• 通过display属性来查看当前元素的类型。
  也可以通过该属性修改当前元素的类型。
• 块级元素转行内元素
  display:inline; 拥有行内元素的属性，块级元素属性就会失效。
• 行内元素转块级元素
  display:block; 拥有块级元素的属性，行内元素属性就会失效。
• 转行内块元素
  display:inline-block；
  1.可以设置宽高
  2.可以与其他行内元素并排。

3.浮动

标准文档流的限制比较多，导致页面效果很多无法实现。
为了可以并排展示，又可以设置宽高，我们可以脱离标准文档流。

• css中一共有三种方法可以脱标：
  1.浮动
  2.绝对定位
  3.固定定位
  设置浮动的方法：
  float：left/right

div:nth-child(1) {
            float: right;
            width: 200px;
            height: 300px;
            background-color: teal;
        }

4.脱标

设置浮动的元素会脱离标准文档流
浮动会在原来的位置上浮起来。
一个元素一旦浮动，那么就可以并排展示，同时可以设置宽高。

• 【注】设置浮动之后，不要再设置display属性了。

5.元素贴靠

每一个浮动元素都会去紧靠上一个浮动元素。

6.字围效果

标准文档流的文字不会被浮动元素遮挡。

7.收缩

一个浮动的元素，如果没有设置宽高，那么元素将自动收缩为内容的宽高。

8.浮动的嵌套

如果浮动的子元素的宽的和大于父盒子的宽，那么后面的子元素会换行。