外部尺寸与流体特性

1.正常流宽度：margin/border/padding/content内容区域自动分配水平空间
2.格式化宽度：仅出现在“绝对定位模型”中

内部尺寸与流体特性

1.包裹性：包裹+自适应
2.首选最小宽度：每个汉字宽度，每个英文字符单元
3.最大宽度：最大的连续内联盒子的宽度

内联元素

可以和文字在同一行显示

内联盒模型
1.内容区域
2.内联盒子
3.行框盒子
4.包含盒子

幽灵空白节点

在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”。这个空白节点永远透明，不占宽度，无法获取，但确实存在，表现如文本节点一样。

替换元素

根据是否具有可替换内容，可以把元素分为替换元素和非替换元素。
典型的替换元素：<img>、<object>、<video>、<iframe>、<textarea>、<input>······
替换元素特性：

1.内容可替换
2.内容的外观不受页面上的css影响
3.有自己的尺寸
4.在很多css属性上有自己的一套规则
替换元素和非替换元素的区别：

1.替换元素和非替换元素之间只隔了一个src属性
2.替换元素和非替换元素之间只隔了一个CSS content属性

content内容生成技术

1.content辅助元素生成
2.content字符内容生成
3.content图片生成
4.content开启闭合符号生成
5.content计数器

margin

margin合并的3种场景

1.相邻兄弟元素margin合并
2.父级和第一个/最后一个子元素
3.空块级元素的margin合并
margin合并的计算规则：

1.正正取大
2.正负相加
3.负负最负
margin：auto的填充规则

1.如果一侧定值，一侧auto，则auto为剩余空间大小
可用于实现左对齐或右对齐
2.如果两侧均是auto，则平分剩余空间
注：触发margin：auto计算有一个前提，width和height不能是auto

margin无效情形：

1.display计算值inline的非替换元素的垂直margin无效
表格中<tr>和<td>元素设置display计算值是table-cell和table-row的元素的margin都是无效的
2.margin合并的时候
3.绝对定位元素非定位方向的margin值“无效”
4.定高容器的子元素的margin-bottom或者定宽容器的子元素的margin-right的定位“失效”
5.鞭长莫及导致的margin失效
6.内联特性导致的margin失效

vertical-align

vertical-align属性值分为4类：

1.线类： baseline,top,middle,bottom
2.文本类：text-top,text-bottom
3.上下标类： sub,super
4.数值百分比类： 如20px,2em,20%
5.vertical-align作用的前提： 只能应用于内联元素以及display值为table-cell的元素

width：auto

auto默认值包含四种表现形式：

1.充分利用可用空间：fill-available
2.收缩与包裹: fit-content
3.收缩到最小：min-content
4.超出容器限制

height：100%

如果父元素高度为auto，只要子元素在文档流中，百分比值会被忽略。
使height：100%生效：

1.设置显示的高度值

html,body {
  height: 100%;
}

2.使用绝对定位

div {
  position: absolute;
  height: 100%;
}

层叠上下文和层叠水平

层叠顺序：

1.正z-index
2.z-index：0或者z-index:auto或者不依赖z-index的层叠上下文
3.inline水平盒子
4.float浮动盒子
5.block块状盒子
6.负z-index
7.层叠上下文background/boder
层叠领域的黄金准则

1.谁大谁上
2.后来居上
z-index不犯二准则： 对于非浮层元素，避免设定z-index值，z-index值没有任何道理需要超过2。

流向的改变

1.direction
2.unicode-bidi
3.writing-mode

关于display:block

block属性具有最具代表性的流动性,天生默认宽度为父盒子的100%.流动性,当设置了宽度的时候,会打断流动性,所以张鑫旭建议布局无宽度.(当子盒子浮动或者定位,就会失去这个流动性)

关于display:inline-block

与block的流动性不同,inline-block具有包裹性,也就是宽度由内部元素决定

文字和图片最优原则

就是你哪怕设置了父盒子的宽度为零,文字和图片依旧会显示的.如果设置了overflow:hidden,就可以隐藏起来,这是改变了渲染的规则.