HTML&CSS精华知识点——常规流、浮动、定位

HTML&CSS精华知识点——第七节

一、常规流
视觉格式化模型（布局规则）：页面中的多个盒子排列规则，大体上将页面中盒子的排列分为三种：常规流、浮动、定位
常规流：所有元素，默认情况下，默认都属于常规流布局
1、布局的总体规则：块盒独占一行，行盒水平依次排列
【扩展】包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域，绝大部分情况下，盒子的包含块，为其父元素的内容盒
1）、块盒

• 每个块盒总宽度，必须刚好等于包含块的宽度，宽度的默认值是auto，auto：将剩余空间吸收掉，若宽度边框内边距计算后仍然有剩余空间，该剩余空间被margin-right吸收
• 在常规流中，块盒在其包含快中居中可以定宽margin：0 auto
  • 百分比取值
• padding、margin、可以取值为百分比，相对于包含块的宽度
• 高度的百分比：包含块的高度是否取决于子元素的高度，设置百分比无效，包含块高度不取决于子元素高度，百分比相对于父元素的高度
• 上下外边距合并，上下边距相邻、会进行合并，两个值取最大值
  二、浮动 float：这个属性可以让元素排队
  1、应用场景：文字环绕、横向排列
  2、修改float属性值为
  -left：元素靠上靠左排列
  -right：元素靠上靠右排列
  -none：默认值，常规流
  3、浮动的基本特点：当一个元素浮动后࿰