课堂随笔6

1. Float（浮动）常用属性值： left 、 right 、 none 
​
2. 各属性值含义：

• Float:none ：不使用浮动，元素保持默认正常文档流排版
  ​
• Float:left ：元素向左浮动，靠左排列
  ​
• Float:right ：元素向右浮动，靠右排列

3. 重要提醒：CSS 的 float 属性没有居中浮动（center）这个取值，无法直接用 float 实现元素水平居中。

W3C 标准盒子模型中，盒子的实际宽度/高度 = 内容区尺寸 + 内边距尺寸 + 边框尺寸 + 外边距尺寸，公式如下：

• 实际宽度 =  width  +  padding-left  +  padding-right  +  border-left  +  border-right  +  margin-left  +  margin-right 
  ​
• 实际高度 =  height  +  padding-top  +  padding-bottom  +  border-top  +  border-bottom  +  margin-top  +  margin-bottom

核心特性与使用要点

层级关系：外边距始终在最外层，包裹边框；边框包裹内边距；内边距包裹内容区，层级不可颠倒。

​背景覆盖：背景色/背景图会覆盖内容区 + 内边距区域，边框的背景由自身样式决定，外边距无背景。
​
特殊场景：
​

• 行内元素的 margin / padding 仅左右生效，上下无效（需转为块级元素 display: block/inline-block 才可完整控制）。
  ​
• 外边距合并：垂直方向的相邻块级元素 margin 会合并为最大值，水平方向不会合并。