Css规范整理:3.1、常规流布局:核心思想

简介: (Css2.1标准中没有 明确提出,在最新的 CSS Display Module Level 3 中提出了,虽然是草案,但其中的思想与前者一脉相承) display属性定义了一个元素的显示类型,它包含元素如何生成盒的两个基本特征:

常规流布局

核心思想

(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

    • 根据其他属性的值(例如positionfloatoverflow)以及它本身是否参与块或行内格式化上下文,它要么为其内容建立新的块格式化上下文,要么将其内容整合到其父格式化上下文

  • 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中很多盒的位置和大小都是根据其包含块的矩形框进行计算。一般把生成的盒作为后代盒的包含块。


原文发布时间为:2018年02月10日
原文作者: 雕刻零碎 

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
16小时前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
16天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
19 0
|
19天前
|
前端开发 JavaScript API
|
25天前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
11 0
|
30天前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
30天前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
30天前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
设计模式 前端开发 开发者
css 三栏布局的实现
css 三栏布局的实现
21 0
|
1月前
|
编解码 前端开发 JavaScript
前端css常用的几种布局方式(推)
前端css常用的几种布局方式(推)
40 0
|
1月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
前端必看的8个HTML+CSS技巧 (八)瀑布流布局