Css规范整理:1、布局大纲
2018-02-10 00:00
260 查看
摘要: ——以布局为核心视角
常规流 CSS 2.1中,常规流包括块级盒的块格式化(block formatting),行内级盒的行内格式化和块级与行内级盒的相对定位
浮动在浮动模型中,盒先根据常规流来放置,然后从常规流中取出来并尽可能远地向左或向右移动。其它内容可能沿着浮动(盒)的一侧排列(Content may flow along the side of a float)
绝对定位 在绝对定位模型中,一个盒会从常规流中全部移除(它不会影响后面的兄弟元素)并根据包含块确定位置
如果一个元素是浮动的,绝对定位的或者是根元素,它就叫流外(out of flow)(元素)。如果一个元素不是流外的,就叫流内(in-flow)(元素)。在常规流布局中有清楚的解释。
选择定位方案:
Value: static | relative | absolute | fixed | inherit
Initial: static
Applies to: 所有元素
Inherited: no
Percentages: N/A
Media: visual
Computed value: 与指定值相同
属性值的含义如下:
static(常规流)
盒是个常规盒,根据常规流布局。
relative(相对定位)
盒的位置是根据常规流计算的(被称为常规流中的位置),然后盒相对于其常规位置偏移。当盒B为相对定位时,后面的盒的位置仍按照B没有偏移量来计算。table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell和table-caption元素上'position:relative'的效果是未定义的
absolute(绝对定位)
盒的位置(及可能的大小)由
fixed(绝对定位)
除了盒相对于某些参照(reference)是
用户代理可以把根元素的position视为
9.3.2 盒偏移:
如果元素的
top
Value:<length> | <百分比> | auto | inherit
初始值:auto
适用元素:定位元素
继承性:无
百分比:参照包含块的高度
Media:visual
计算值:如果指定了一个长度,就是对应的绝对长度;如果指定了一个百分比,就是指定的值;否则就是'auto'
该属性指定了一个绝对定位的盒的上外边距边界离盒的包含块的上边界有多远。对于相对定位的盒,偏移量参照该盒自身的上边界(例如,该盒在常规流中给定了一个位置,然后根据这些属性从原位置偏移)
right
Value:<length> | <百分比> | auto | inherit
初始值:auto
适用元素:定位元素
继承性:无
百分比:参照包含块的宽度
Media:visual
计算值:如果指定了一个长度,就是对应的绝对长度;如果指定了一个百分比,就是指定的值;否则就是'auto'
与
bottom
Value:<length> | <百分比> | auto | inherit
初始值:auto
适用元素:定位元素
继承性:无
百分比:参照包含块的高度
Media:visual
计算值:如果指定了一个长度,就是对应的绝对长度;如果指定了一个百分比,就是指定的值;否则就是'auto'
与
left
Value:<length> | <百分比> | auto | inherit
初始值:auto
适用元素:定位元素
继承性:无
百分比:参照包含块的高度
Media:visual
计算值:如果指定了一个长度,就是对应的绝对长度;如果指定了一个百分比,就是指定的值;否则就是'auto'
与
这4个属性的值含义如下:
<length> 偏移量是到参照边的固定距离。允许负值
<percentage> 偏移量是包含块宽度(对于left 或者 right)或高度(对于top 或者 bottom)的百分比。允许负值
auto 对于非替换元素,该值的效果取决于那些相关的值也是'auto'的属性。非替换元素的详细情况,见绝对定位的width和height章节。对于替换元素,该值的影响只取决于替换内容的固有尺寸。替换元素的详细情况,见绝对定位的width和height章节。
如果'display'值为'none',那么'position'和'float'不会生效。此时,元素不生成盒
否则,如果'position'值为'absolute'或者'fixed',盒就是绝对定位的。'float'的计算值置为'none'。并且display根据下表来设置。盒的位置将由'top','right','bottom'和'left'属性以及盒的包含块决定
否则,如果'float'值不为'none',那么盒是浮动的,'display'根据下表来设置
否则,如果该元素是根元素,'display'根据下表来设置,但指定值'list-item'应该变成计算值'block'还是'list-item',在CSS 2.1中是未定义的
否则,其它'display'属性值(计算值)就用指定值
下一章:Css盒模型
布局大纲
CSS 2.1中,一个盒可能会根据三种定位方案来布局:常规流 CSS 2.1中,常规流包括块级盒的块格式化(block formatting),行内级盒的行内格式化和块级与行内级盒的相对定位
浮动在浮动模型中,盒先根据常规流来放置,然后从常规流中取出来并尽可能远地向左或向右移动。其它内容可能沿着浮动(盒)的一侧排列(Content may flow along the side of a float)
绝对定位 在绝对定位模型中,一个盒会从常规流中全部移除(它不会影响后面的兄弟元素)并根据包含块确定位置
如果一个元素是浮动的,绝对定位的或者是根元素,它就叫流外(out of flow)(元素)。如果一个元素不是流外的,就叫流内(in-flow)(元素)。在常规流布局中有清楚的解释。
选择定位方案: position
属性
position属性决定了用哪种CSS 2.1定位算法来计算盒的位置
position
Value: static | relative | absolute | fixed | inherit
Initial: static
Applies to: 所有元素
Inherited: no
Percentages: N/A
Media: visual
Computed value: 与指定值相同
属性值的含义如下:
static(常规流)
盒是个常规盒,根据常规流布局。
top、left、right、bottom属性失效
relative(相对定位)
盒的位置是根据常规流计算的(被称为常规流中的位置),然后盒相对于其常规位置偏移。当盒B为相对定位时,后面的盒的位置仍按照B没有偏移量来计算。table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell和table-caption元素上'position:relative'的效果是未定义的
absolute(绝对定位)
盒的位置(及可能的大小)由
top、left、right、bottom属性指定,这些属性指定了相对于盒的包含块的偏移量。绝对定位的盒脱离了常规流,意味着它们不会影响后面兄弟元素的布局,而且,虽然绝对定位盒有外边距,但它们不会与任何其它外边距合并。
fixed(绝对定位)
除了盒相对于某些参照(reference)是
fixed之外,盒的位置根据
absolute模型来计算。如同
absolute模型一样,盒的外边距不会与任何其它外边距合并。媒体类型为handheld,projection,screen,tty和tv的情况下,该盒相对于**(视口viewport)固定,并且滚动时不会移动。媒体类型为print时,该盒在每一页都会呈现,并且相对于页盒(page box)固定,即使页面是通过一个(视口viewport)**看到的(例如,打印预览时)。
用户代理可以把根元素的position视为
static
9.3.2 盒偏移:top、left、right、bottom
如果元素的position属性有一个除
static外的值,就说它是定位元素(positioned)。定位的元素生成定位的盒(positioned boxes),根据以下4个属性布局:
top
Value:<length> | <百分比> | auto | inherit
初始值:auto
适用元素:定位元素
继承性:无
百分比:参照包含块的高度
Media:visual
计算值:如果指定了一个长度,就是对应的绝对长度;如果指定了一个百分比,就是指定的值;否则就是'auto'
该属性指定了一个绝对定位的盒的上外边距边界离盒的包含块的上边界有多远。对于相对定位的盒,偏移量参照该盒自身的上边界(例如,该盒在常规流中给定了一个位置,然后根据这些属性从原位置偏移)
right
Value:<length> | <百分比> | auto | inherit
初始值:auto
适用元素:定位元素
继承性:无
百分比:参照包含块的宽度
Media:visual
计算值:如果指定了一个长度,就是对应的绝对长度;如果指定了一个百分比,就是指定的值;否则就是'auto'
与
top类似,只是指定了一个盒的右外边距边界离该盒包含块的右边界有多远。对于相对定位的盒,偏移量参照该盒自身的右边界
bottom
Value:<length> | <百分比> | auto | inherit
初始值:auto
适用元素:定位元素
继承性:无
百分比:参照包含块的高度
Media:visual
计算值:如果指定了一个长度,就是对应的绝对长度;如果指定了一个百分比,就是指定的值;否则就是'auto'
与
top类似,只是指定了一个盒的右外边距边界离该盒包含块的下边界有多远。对于相对定位的盒,偏移量参照该盒自身的下边界
left
Value:<length> | <百分比> | auto | inherit
初始值:auto
适用元素:定位元素
继承性:无
百分比:参照包含块的高度
Media:visual
计算值:如果指定了一个长度,就是对应的绝对长度;如果指定了一个百分比,就是指定的值;否则就是'auto'
与
top类似,只是指定了一个盒的左外边距边界离该盒包含块的左边界有多远。对于相对定位的盒,偏移量参照该盒自身的左边界
这4个属性的值含义如下:
<length> 偏移量是到参照边的固定距离。允许负值
<percentage> 偏移量是包含块宽度(对于left 或者 right)或高度(对于top 或者 bottom)的百分比。允许负值
auto 对于非替换元素,该值的效果取决于那些相关的值也是'auto'的属性。非替换元素的详细情况,见绝对定位的width和height章节。对于替换元素,该值的影响只取决于替换内容的固有尺寸。替换元素的详细情况,见绝对定位的width和height章节。
'display','position'与'float'之间的关系
这3个属性影响盒的生成及布局—'display','position'和'float' —间的相互影响如下:如果'display'值为'none',那么'position'和'float'不会生效。此时,元素不生成盒
否则,如果'position'值为'absolute'或者'fixed',盒就是绝对定位的。'float'的计算值置为'none'。并且display根据下表来设置。盒的位置将由'top','right','bottom'和'left'属性以及盒的包含块决定
否则,如果'float'值不为'none',那么盒是浮动的,'display'根据下表来设置
否则,如果该元素是根元素,'display'根据下表来设置,但指定值'list-item'应该变成计算值'block'还是'list-item',在CSS 2.1中是未定义的
否则,其它'display'属性值(计算值)就用指定值
Specified value | Computed value |
---|---|
inline-table | table |
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
其它 | 与指定值相同 |
相关文章推荐
- Css规范整理:3.3、常规流布局:行内格式化上下文
- Css规范整理:3.1、常规流布局:核心思想
- Css规范整理:3.4、常规流布局:相对定位
- Css规范整理:3.2、常规流布局:块格式化上下文
- 总结CSS面试题目的考察点及常见布局问题整理
- css布局常用规范
- DIV+CSS网页布局常用的一些基础知识整理
- CSS常用布局整理
- CSS 布局经典问题初步整理
- CSS左中右布局,规范案例
- css布局常用规范
- CSS 布局经典问题初步整理
- 常见css布局问题整理
- DIV+CSS网页布局常用的一些基础知识整理
- DIV+CSS布局和命名规范
- CSS规范整理
- CSS网页布局编码小技巧整理(转帖资料)
- 适合新手的CSS网页布局小技巧整理
- 前端CSS规范整理_转载、、、
- [转]一位CSS新手整理的CSS网页布局技巧