22. CSS计算
DOM Tree
document
html
head
meta title
body
h1 p
Render Tree
html
viewport
scroll
block
body
block
h1
block
text
p
block
text
https://developer.mozilla.org/en/Mozilla_Style_System_Documentation
23. CSS计算
元素没有渲染对象
head / meta / script
元素有多个渲染对象
html / li
select / input[type=file]
通过CSS改变渲染对象
display: none
::before / ::after
24. CSS计算
输入– DOM Tree
输出– Render Tree
目标– 内存优化、匹配效率优化
方法– 样式共享、选择器索引
DOM Tree !== Render Tree
25. 布局
流布局
display: inline / inline-block / block
float: left / right
clear: left / right / both
position: static / relative / absolute / fixed
HTML三条流
文档流、浮动流、定位流
其它因素
display: list-item
display: run-in
http://www.w3.org/TR/css3-box/#the-lsquo
26. 布局
table布局
display: table / inline-table / table-row-group / table-header-
group / table-footer-group / table-row / table-column-
group / table-column / table-cell / table-caption
div VS table – 流布局VS table布局
Q:ul#nav ol li.red的CSS仅重是多少
inline – 0
id – 1
attribute – 1
tag – 3
output – 0,1,1,3
DOM Tree和Render Tree的关系
Q:什么情况下出现该现象
总结
list-item: generate a block box and a inline box for the list marker
A run-in box behaves as follows:
If the run-in box contains a block box, the run-in box becomes a block box.
If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
Otherwise, the run-in box becomes a block box.