Css规范整理:3.1、常规流布局:核心思想
2018-02-10 00:00
197 查看
摘要: ——使用新的Css display草稿作为常规流布局的核心
display属性定义了一个元素的显示类型,它包含元素如何生成盒的两个基本特征:
外部显示类型 outer display type
它决定了盒子本身如何参与流(flow)式布局
block : 在流布局中时,该元素将生成一个块级盒(block-level box)
inline : 在流布局中时,该元素将生成一个行内级盒(inline-level box)
内部显示类型 inner display type
它定义(如果它是一个<u>非替换元素</u>)生成的格式化上下文的类型,指示如何布局它的后代。 (<u>替换元素</u>的内部显示不在CSS范围内)即指定元素的内部显示类型,定义其内容的格式上下文的类型。
flow
元素内部使用流式布局
如果 外部显示类型是
否则,它会生成一个块容器盒( block container box )
根据其他属性的值(例如
flow-root
该元生成一个块容器盒( block container box ),并使用流布局来布局其内容。它总是为其内容建立一个新的块格式上下文。
table
该元素生成一个主表格包装盒(table container box),它建立一个块格式化上下文,并包含一个额外生成的表格框,用于建立一个表格格式化上下文。
flex(Css3)
该元素生成一个主flex包装盒(flex container box),它建立一个flex格式化上下文。
grid(Css3)
该元素生成一个主grid包装盒(flex container box),它建立一个grid格式化上下文。
下一章:常规流布局:块格式化上下文
常规流布局
核心思想
(Css2.1标准中没有 明确提出,在最新的 CSS Display Module Level 3 中提出了,虽然是草案,但其中的思想与前者一脉相承)display属性定义了一个元素的显示类型,它包含元素如何生成盒的两个基本特征:
外部显示类型 outer display type
它决定了盒子本身如何参与流(flow)式布局
block : 在流布局中时,该元素将生成一个块级盒(block-level box)
inline : 在流布局中时,该元素将生成一个行内级盒(inline-level box)
内部显示类型 inner display type
它定义(如果它是一个<u>非替换元素</u>)生成的格式化上下文的类型,指示如何布局它的后代。 (<u>替换元素</u>的内部显示不在CSS范围内)即指定元素的内部显示类型,定义其内容的格式上下文的类型。
flow
元素内部使用流式布局
如果 外部显示类型是
inline且该元素参与到块格式化上下文或者行内格式化上下文,则该元素生成行内盒( inline box )
display:inline = display:inline flow
否则,它会生成一个块容器盒( block container box )
display:block = display:block flow
根据其他属性的值(例如
position,
float或
overflow)以及它本身是否参与块或行内格式化上下文,它要么为其内容建立新的块格式化上下文,要么将其内容整合到其父格式化上下文。
flow-root
该元生成一个块容器盒( block container box ),并使用流布局来布局其内容。它总是为其内容建立一个新的块格式上下文。
display:inline-block = display:inline flow-root
table
该元素生成一个主表格包装盒(table container box),它建立一个块格式化上下文,并包含一个额外生成的表格框,用于建立一个表格格式化上下文。
display:table = display:block table; display:inline-table = display:inline table;
flex(Css3)
该元素生成一个主flex包装盒(flex container box),它建立一个flex格式化上下文。
display:flex = display:block flex; display:inline-flex = display:inline flex;
grid(Css3)
该元素生成一个主grid包装盒(flex container box),它建立一个grid格式化上下文。
display:grid = display:block grid; display:inline-grid = display:inline grid;
关键概念:
包含块
Css中很多盒的位置和大小都是根据其包含块的矩形框进行计算。一般把生成的盒作为后代盒的包含块。下一章:常规流布局:块格式化上下文
相关文章推荐
- Css规范整理:3.3、常规流布局:行内格式化上下文
- Css规范整理:3.4、常规流布局:相对定位
- Css规范整理:3.2、常规流布局:块格式化上下文
- CSS进阶系列一(flex布局基础知识——介绍、规范、主要思想、专业术语)
- Css规范整理:1、布局大纲
- CSS 布局经典问题初步整理
- CSS常见布局问题整理
- CSS 网页布局时常犯的10个小错误整理
- CSS两列及三列自适应布局方法整理
- 前端开发CSS规范整理
- CSS布局整理
- CSS网页布局编码小技巧整理(转帖资料)
- [转]前端CSS规范整理
- css布局常用规范
- 前端CSS规范整理_转载、、、
- 【分享】说说标准--CSS核心可视化格式模型(visual formatting model)之六:常规流中的相对定位
- 优秀Html和CSS布局技巧文章整理
- CSS网页布局编码小技巧整理
- DIV+CSS布局命名规范
- 说说标准--CSS核心可视化格式模型(visual formatting model)之六--常规流中的相对定位