实训第四天所学记录

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）。
盒子类型：

1. 行盒，display等于inline的元素
2. 快盒，display等于block的元素
   行盒在页面中不换行，块盒独占一行
   display默认值为inline
   浏览器默认样式表设置的块盒：容器元素、h1~h6、p
   常见的行盒：span、a、img、video、audio

盒子的组成部分

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：

1. 内容 content

width、height设置的盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2. 填充（内边距） padding

盒子边框到盒子内容的尺寸
padding-left、padding-right、padding-top、padding-bottom
padding：简写属性
padding：上 右 下 左

填充区+内容区 = 填充盒 padding-box
3. 边框 border
边框=边框样式 + 边框粗细 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color

边框+填充区+内容区 = 边框盒 border-box
4. 外边距 margin

边框到其他盒子的距离
margin-top、left、right、bottom

浮动

视觉格式化模型，大体上将页面中盒子的排列方式分为三种方式：

1. 常规流
2. 浮动
3. 定位

应用场景

1. 文字环绕
2. 横向排列

浮动的基本特点

修改CSS的float属性值为：
1）left：左浮动，元素靠上，靠左排列
2）right：右浮动，元素靠上，靠右排列
默认值为none

1. 当一个元素浮动后，元素必定为块盒（更改display属性为block）
2. 浮动元素的包含块和常规流一样为父元素的内容盒

盒子尺寸

1. 宽度为auto时，适应内容宽度
2. 高度为auto时，与常规流一致，适应内容高度
3. margin为auto时，为0.
4. 边框，内边距，百分比设置与常规流一样

盒子排列

1. 左浮动的盒子靠上 靠左排列
2. 右浮动的盒子靠上 靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子
5. 行盒在排列时会避开浮动盒子
   如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
6. 外边距合并不会发生。

高度坍塌

高度坍塌的根源是：常规流盒子的自动高度，在计算时不会考虑浮动盒子。
清除浮动，设计CSS属性：
clear：默认值为none，
取值为left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方。
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方。
both：清除左右浮动，该元素必须出现在前面所有左右浮动盒子的下方。