详解 盒模型与浮动——padding / border / margin / float

1 盒模型

1-1 盒模型的格式

盒子：容器
盒子模型 英文：box model。
最常见的盒子是div span

盒子中的区域：
1.宽 width px content
2.高 height content
3.内边距 padding
4.边框 border
5.外边距 margin

【注】 标准盒模型的宽和高和盒子真实占有的宽高不是一个概念。

• 盒子真实占有的宽：内容的宽+左padding+右padding+左边框+右边框
• 盒子真实占有的高：内容的高+上padding+下padding+上边框+下边框

1-2 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; 上 右 下 左 顺时针。

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

1-3 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

1-4 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;
可以让盒子水平居中

1-5 盒子高度不固定

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

去掉高度后：

1-6 父子盒模型——不设置子盒子的宽

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

1-7 垂直盒子的外边距塌陷

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

• 当margin相遇的部分，一个值为正，一个值为负，结果为两个值的和。
• 当margin相遇的部分，两个值都为负数，结果为绝对值最大的。

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

1-8 嵌套盒子的外边距塌陷

父盒子没有填充内容，也没有设置顶部边框，那么子盒子的margin-top会让父盒子与子盒子一起掉下来。
示例：

        .father{
            width: 300px;
            height: 300px;
            background-color: slateblue;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: tan;
            margin-top: 100px;
        }

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

显示：
解释：.son子标签设置了margin-top为100px，由于父框中没有内容，所以随子框也一同被拉下来了，增加了外间距。

解决方法：

• 有填充内容即可。（不推荐）
• 给父盒子添加顶部的边框。（不推荐）
• 将margin换成padding。
  同级之间的盒子距离使用margin，父子盒子使用padding。
  比如将上文中的.son中的margin-top删掉，在.father中添加padding-top（同时父框的实际高度也会增加）：
  

1-9 其他盒模型

盒模型分为：

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

2 元素的浮动

2-1 标准文档流

内容必须是从左到右，由上往下书写。前面的内容大小或位置发生变化时，后面的内容也会随之变化。

html网页就是一个标准文档流。

1. 空白折叠现象
2. 无论多少个空格，换行 缩进，都会折叠成一个空格。
3. 高矮不齐，底部对齐。
4. 自动换行

2-2 行内元素、块状元素、行内块元素

标准文档流将HTML元素分为了三种：
1.行内元素 inline
可以与其他行内元素并排展示。
设置宽高无效。
实际的宽高，由内容的宽高来决定。

• 行内元素：除了p标签之外，所有的文本级标签都是行内元素。p标签是文本级标签，但属于块级元素。

2.块级元素 block
独占一行。
可以设置宽高

• 块级元素：所有的容器级标签都是块级元素，包括p标签。

3.行内块元素 inline-block
可以设置宽高
可以与其他行内元素或行内块元素并排。

通过display属性来查看和修改当前元素的类型。

• 块级元素转行内元素
  display:inline; 拥有行内元素的属性，块级元素属性就会失效。

• 行内元素转块级元素
  display:block; 拥有块级元素的属性，行内元素属性就会失效。

• 转行内块元素
  display:inline-block；可以设置宽高

2 -3 按显示分类

将html元素按照显示类型分类：

1. 替换元素
   浏览器根据元素的标签和属性，来决定元素的具体显示内容。比如： img/input
2. 非替换元素
   不是通过标签的属性来决定显示内容的，而是通过标签所包裹的具体内容来决定。比如div、span标签

2-4 浮动

标准文档流的限制比较多，导致页面效果很多无法实现。为了可以并排展示，又可以设置宽高，我们可以脱离标准文档流。
css中一共有三种方法可以脱标——脱离标准文档流：
1.浮动
2.绝对定位
3.固定定位

设置浮动的方法：
float：left/right

2-5 脱标

设置浮动的元素会脱离标准文档流。浮动会在原来的位置上浮起来。
一个元素一旦浮动，那么就可以并排展示，同时可以设置宽高。
【注】设置浮动之后，不要再设置display属性了。

2-6 元素贴靠

每一个浮动元素都会去紧靠上一个浮动元素的底部

      div {
            float: left;
            width: 300px;
        }
        
        .box1 {
            height: 40px;
            background-color: teal;
        }
        
        .box2 {
            height: 60px;
            background-color: thistle;
        }
        
        .box3 {
            height: 80px;
            background-color: tomato;
        }

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

显示：

2-7 字围效果

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

        div {
            float: left;
        }
        
        img {
            width: 150px;
        }
        
        p {
            height: 600px;
            background-color: rgb(244, 255, 179);
        }

2-8 浮动后的块状元素的收缩

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

    div {
            float: left;
            width: 500px;
            background-color: tomato;
        }

<div>奥黛丽·赫本</div>

2-9 浮动的嵌套

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

小白训练中，欢迎指正！