基本概念
- 文档流 mdn
- 块、内联、内联块？
- margin合并
- 两种盒模型
文档流 Normal Flow
文档流动方向
- 从左到右：内联元素像默认的
<span></span>直到排满一行，才会另起一行 - 从上到下：块级元素像默认的
<div></div>每一个元素占据一行，不并排（注意不加任何样式为前提下）
eg.
css-demo-1 with CSS animation & SCSS
文档流小结
- 流动方向
-
inline元素从左到右，到达最右边才会换行 -
block元素从上到下，每一个都会另起一行 -
inline-block也是从左到右
-
- 宽度
-
inline宽度为所有内部内联元素的宽度，一般即文字宽度的和所决定，指定width无效 -
block默认自动计算宽度width:auto;，指能有多宽就占多宽，尽量得宽，并不一定是100%，可用width指定，指定了也不会换行，除非有其他非默认属性 -
inline-block结合前两者部分特点，默认宽度和inline相同，尽量得窄，紧密包裹里面的内容，但可设置width
-
- 高度
-
inline高度由inline-height间接确定，跟它的height或者padding无关 -
block高度由所有内部正常文档流中的元素高度之和决定，全部包裹住，可以设height -
inline-block和block类似，可以设置height
-
永远不要写
width:100%;，除非特殊说明
css-demo_flow with CSS animation & SCSS
- demo里默认
<span></span>既不接受宽度，也不接受高度； - 包裹它的
<div></div>并没有被<span></span>设置的padding撑开，而<div></div>的高度由其里面的元素决定，包裹住其中的元素； - 加了内边距的
<span></span>被撑高的只是可视高度 -
inline元素的实际高度是由行高line-height间接确定的 - 包裹它的
<div></div>被内部元素的实际高度撑开，行高会继承，写在div后也一样 - 间接？还受到不同字体的影响，请看行盒模型深入理解CSS:字体度量...by方应杭
- 脱离文档流元素不计算入父元素的高度， 具体看层叠上下文 mdn
属性overflow溢出
- 等内容的宽度或高度大于容器的，会溢出
- 可用
overflow来设置是否显示滚动条 -
auto：灵活设置 -
scroll：永远显示，太丑，多出的像素会影响布局，不用，在cssReset里干掉 -
hidden：直接隐藏溢出部分 -
visible：直接显示溢出部分 -
overflow可以分为overflow-x和overflow-y
脱离文档流 mdn
- visible 可见
- hidden 不给看
- scroll 可滚（太丑 高度不超过也显示滚动条）
- auto 超出部分，自动显示滚动条
让一个元素脱离文档流
-
block高度由内部文档流元素决定，可以设height - 有些元素可以不在文档流中，放飞自我
内联元素的高度是由行高决定的-->确定了行高的文字内容形成文档流元素-->决定了其外部块级元素的高度-->高度撑开其外部的块级元素
现在让文字即其内联元素脱离文档流
- 加属性
float - 加属性
position:absolute | fixed;
- 不要用以上提到的属性
- 一个元素脱离文档流，就不影响块级父元素的高度，换句话说父容器计算高度时就不把它计算在内了
- 以后会学清除浮动，但一旦脱离文档流，就回不去了
块、内联、内联块？过时的概念
元素的默认level
默认是block-level box的元素
默认是in-line-level box的元素
通过
display:[inline | block | inline-block|];来随时切换inline-block在文档流上很像inline，但是不会跨两行显示
Flow Layout and Overflow 流布局和溢出
margin合并（死记硬背）
两种盒模型（border-box更符合人类思维、直觉）
更符合人类思维、直觉
eg.
第三视角
·未完待续·
参考文章
相关文章
- 无
