1.流布局
默认的布局方式。
属性:display,position,float
1.display属性
规定元素生成的框的类型。
默认值为:inline
继承方式:no
none | 此元素不被显示 |
block | 作为块元素显示,前后带有换行符 |
inline | 作为内联元素显示,前后不带换行符 |
inline-block | 行内块元素 |
list-item | 作为列表显示 |
run-in | 根据上下文决定显示类型 |
table | 作为块级表格显示,前后带有换行符(类似于<table>) |
inline-table | 作为内联表格显示,前后不带换行符 |
table-row-groud | 作为一个或多个行的分组显示(类似于<tbody>) |
table-header-groud | 作为一个或多个行的分组显示(类似于<thead>) |
table-footer-groud | 作为一个或多个行的分组显示(类似于<tfoot>) |
table-row | 作为表格行显示(类似于<tr>) |
table-column-group | 作为一个或多个列的分组显示 |
table-column | 作为一个表格单元格列显示 |
table-cell | 作为表格单元格显示 |
table-caption | 作为表格标题显示 |
inherit | 规定从父系继承该属性 |
2.position属性
规定元素的定位
默认属性:static
继承方式:no
absolute | 绝对定位,是相对于离他最近的父元素指定的 |
fixed | 绝对定位,相对于浏览器窗口进行定位 |
relative | 相对定位,相对于正常位置进行定位(元素仍在正常流中) |
static | 没有定位,元素正常的出现在流中 |
inherit | 规定从父系继承该属性 |
3.float属性
定义元素的浮动方向。
浮动元素会生成块级框。
默认值:none
继承性:no
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动,显示在其文本出现的位置 |
inherit | 规定从父系继承该属性 |