Please enable JavaScript.
Coggle requires JavaScript to display documents.
box model (display 浏览器通过生成盒子树解析CSS,指呈现文档的显示结构 (none (将元素与其子元素从文档流种移除),…
box model
display
浏览器通过生成盒子树解析CSS,指呈现文档的显示结构
none
将元素与其子元素从文档流种移除
table
基于表格的布局
inline
不可设置边框高度,同行显示;元素生成一个或多个行内框,行内元素占据的空间就是标签所定义的大小
inline-block
可设置边框高度,同行显示;生成一个块级边框
block
可设置边框高度,换行显示;生成块级框,开始与新的一行,延展到其容器宽度
flex
grid
list-item
只有<li>具有的默认值
Position
fixed
相对于浏览器窗口定位
static(default)
忽略所有的top/right/bottom/left/z-index属性声明值
relative
离开的正常文档流,但仍在文档流中
inherit
absolute
脱离文档流,通过top/bottom/left/right设置绝对定位元素位置
起点设置:第一个position不为static的父元素/相对与文档窗口
不发生margin-collapse
z-index
默认为0,可以为负;
content(内容)
文本
背景
实际内容
图片
box-sizing
border-box
inherit
content-box(default)
margin(外边距)
分隔元素及其邻近元素的空区域
margin collapsing(外边距叠加)
只在垂直方向上发生:margin-top/margin-bottom
相邻的块元素
父子块元素
float:脱离文档流
浮动属性
inherit
left
none
right
浮动元素的父元素不可见
border(边框)
默认情况下背景扩大到边框下方
padding(内边距)