【CSS 定位之 display 属性】

CSS 定位之 display 属性

1. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局)
- ⑴ 设置元素的显示类型 ( 框的类型 )
- ⑵ 元素的显示类型
- ⑶ 显示类型的语法
- ⑷ 显示类型的属性值和属性值 6个分类 (下方示例图，代码如上)
- - Ⅰ. 外部显示类型: < display-outside >
  - Ⅱ. 内部显示类型: < display-inside >
  - Ⅲ. 列表项: < display-listitem >
  - Ⅳ. 类似 table 和 ruby 的子元素的显示类型: < display-internal >
  - Ⅴ. 元素的可见性/显示框: < display-box >
  - Ⅵ. 等同于双值的单值语法: < display-legacy >
- ⑸ 浏览器支持
2. 显示类型和流式布局
- 2.1 CSS 流式布局: normal flow = flow layout = 文档流
- 2.2 CSS 流式布局: 块和内联布局
♣ 结束语和友情链接

1. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局)

⑴ 设置元素的显示类型 ( 框的类型 )
- ① 元素的显示类型和子元素的布局
  - display 设置是否将元素视为 ❶ 块或 ❷ 内联元素以及 ❸ 用于子元素的布局 (如 flow layout, grid, flex)。
    - ❶ 元素的外部显示类型: 元素的盒子本身有一个外部显示类型，所以它知道如何与其他盒子一起工作⇒ 元素自身的行为方式。
    - ❷ 元素的内部显示类型: 元素还有一个内部显示类型，该类型更改其 子元素的行为方式。
  - ❸ 这些子元素也有外部和内部显示类型。
  - ❹ 显示类型的设置: 保证语义化的同时+ 更改显示方式。
    - 意味着，可以始终使用最语义化的 HTML 元素来标记内容，然后使用 CSS 更改它的显示方式。
- ② display的计算值
  - 一般情况下，计算值 = 指定的值，但定位和浮动元素以及根元素除外。计算的值可以是指定值以外的关键字。

⑵ 元素的显示类型
- display 属性指定了元素的显示类型，它包含两类基础特征
- ① 外部显示类型:⇒ 元素的流式布局。
  - 用于指定元素怎样生成盒模型，定义了元素怎样参与 流式布局的处理。
- ② 内部显示类型: ⇒ 子元素的布局。
  - 定义了元素内 子元素的布局 方式。

⑶ 显示类型的语法
- display: none | block | inline | inline-block | list-item| run-in |table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption|inherit | compact | marker;
- 显示类型的默认值: inline

/* 外部显示类型 <display-outside> values  */
display: block;
display: inline;
display: run-in;/* 内部显示类型 <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;/* 双值语法 <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;/* 类似表格和 ruby 子元素的行为  <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;/* 是否 显示 <display-box> values */
display: contents;
display: none;/* 单值 表示 双值的意思 <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;/* 全局值 Global values */
display: inherit;
display: initial;
display: unset;[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where
<display-outside> = block | inline | run-in<display-inside> = flow | flow-root | table | flex | grid | ruby<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

★显示类型的取值
- 关键字值: display属性值 = 关键字。
- 所有关键字值，可以分为六个类别。
  - ① 外部显示类型: <display-outside>
  - ② 内部显示类型: <display-inside>
  - ③ 元素的可见性/显示框: <display-box>
  - ④ 类似 table和ruby 的子元素的显示类型: <display-internal>
  - ⑤ 等同于双值的单值语法: <display-legacy>
  - ⑥ 列表项: <display-listitem>

下面的属性值示例图的代码
html

<!--元素的显示类型-->
<div class="posiancestor"><p class="position red position1">古人<span class="inlinespan inlinespan1">学问</span><span class="inlinespan inlinespan2">无遗力</span>，</p><p class="position green">少壮工夫老始成。</p><p class="position red">纸上得来终觉浅，</p><p class="position green">绝知此事要躬行。</p>
</div>

/*去除各浏览器的 默认内外边距*/
* {margin: 0;padding: 0;
}
/*元素的包含块*/
.posiancestor {position: relative;top: 40px;left: 40px;margin: 10px;border: solid 10px;padding: 10px;width: 50%;/*在父元素中 设置显示类型*//*display: flow;*//*display: flow-root;*//*display: table;*//*display: flex;*//*display: ruby;*//*display: grid;*//*display: list-item;*/
}.position {/* 设置宽高 */width: 150px;height: 50px;text-align: center;/*文字垂直居中: line-height = height*/line-height: 50px;/*让块元素 排成一行,默认是从上到下 一列*//*display: inline-block;*/border: solid 10px;margin: 5px;padding: 5px;/*设置 p 元素的 显示类型*//*display: inline;*//*display: list-item;*//*list-style-type: circle;*//*display: table-row-group;!*tbody*!*//*display: table-header-group; !*thead*!*//*display: table-footer-group; !*tfoot*!*//*display: table-row; !*tr*!*//*display: table-cell; !*td*!*//*display: table-column-group; !*colgroup*!*//*display: table-column; !*col*!*//*display: ruby-base; !*rb*!*//*display: contents;*//*display: inline-block;*//*display: inline-table;*//*display: inline-flex;*//*display: inline-grid;*/
}
.position1 {/*第一个块级元素 p ,后面 还有块级元素*//*display: run-in;*//*设置为 表格标题*//*display: table-caption; !*caption*!*//*display: none; !*不可见*!*/}.red {background-color: indianred;/*margin: 10px;*/margin: 10px;}.green {background-color: lightseagreen;margin: 10px;}
.inlinespan{/*行内元素 span*/border: dashed 2px lightseagreen;background-color: lightgreen;/*设置元素的 显示类型*//*display: block;*/}
.inlinespan1{/*第一个行内级元素 span，设置显示类型 ，后面跟着行内级元素*//*display: run-in;*/}

默认流式布局的显示(= 正常文档流的显示)

⑷ 显示类型的属性值和属性值 6个分类 (下方示例图，代码如上)
- 别名: 下面的框 box，也称作盒子。框 = 盒子。
- 属性值分为以下的 6 类。
Ⅰ. 外部显示类型: < display-outside >
- ⑴ 外部显示类型 ⇒ 流式布局: < display-outside >
  - 这些关键字指定元素的外部显示类型，这实际上是它在流式样布局中的角色。
- ① 内联元素 (默认值): inline
  - 元素生成一个或多个内联元素框，这些框不会在它们本身之前或之后生成换行符。
  - 此元素会被显示为内联元素，元素前后没有换行符。
    - 4个p元素设置后，显示行为 = 行内级元素的显示行为⇒ 可以在一行上显示了。
    - 变成行内级元素后,上下外边距margin 也无效了，只有左右外边距有效。
- ② 块级元素: block
  - 元素生成一个块元素框，在正常流中元素前后会生成的换行符。
  - ⇒ 将元素显示为块级元素，元素前后会带有换行符。
    - 两个行内级元素 span，设置成块级，行为 = 块级元素的行为⇒ 独占一行/换行。
- ③ 内联元素或块元素 (周围元素): run-in
  - 元素生成一个 (run-in box)。
  - 兄弟元素是块框⇒ run-in框 = 块框的第一个内联框
    - 如果被定义为 display: run-in框的相邻的兄弟元素是个块框 (block box)
    - run-in box 成为紧随其后的块框的第一个内联框。
  - 取决于周围元素:
    - run-in元素的作用: 类似于内联或块，这取决于周围的元素。
      - 此元素会根据上下文作为块级元素或内联元素显示。
        
        ❶ 如果run-in框包含一个块框，与块相同。
        
        ❷ 如果 run-in框后面跟着一个块框， run-in框将成为块框的第一个内联框。
        第1个p 元素,设置 run-in (在 IE11 中测试的,谷歌,火狐中暂不支持此属性值)
        
        ❸ 如果 run-in框后面跟着一个内联框，则 run-in框将成为一个块框。
        第一个行内级元素，设置成 run-in 显示类型⇒ 变成了块框 (因为后面跟着的行内级元素 = 内联框)
- ⑵ 外部显示类型和双值语法
  - 内部值和外部值
    - 支持双值语法的浏览器，只找到外部值时 ( 如指定display: block或display: inline时) 将内部值设置为 flow。
    - 这将导致预期的行为; 例如，如果您将一个元素指定为块，期望该元素的子元素参与块和内联常规流布局。

Ⅱ. 内部显示类型: < display-inside >
- ⑴ 内部显示类型 ⇒ 元素的内部内容的布局方式 : <display-inside>
  - 这些关键字指定元素的内部显示类型，该类型定义了其内容所在的格式化上下文的类型 (假设它是一个不可替换的元素)。
  - ① 内容流式布局: flow
    - 元素使用流式布局来布局其内容 ( (block-and-inline layout))。
      - 内联框:
        
        如果外部显示类型为内联级元素 inline 或 run-in, 它参与一个块或内联格式上下文⇒ 然后生成一个内联框。
      - 块框
        外部显示类型为块级元素block⇒ 它会生成一个块容器盒。
      - 取决于其他属性的值: position, foat, overflow
        无论它本身是参与了一个块还是内联格式上下文，它要么为其内容建立一个新的 ❶ 块格式化上下文(BFC)，要么将其内容集成到其 ❷父格式化上下文。
  - ② 块框+格式化根的位置(新 BFC): flow-root
    - 元素生成一个 ❶ 块元素框，用于建立 ❷ 新的块格式化上下文，定义 ❸ 格式化根的位置。
  - ③ 块级表: 表格+块框: table
    - 这些元素的行为类似于HTML 的 ❶ <table>元素。它定义了一个 ❷ 块级别的框。
      - 此元素会作为块级表格来显示，类似 <table>。
      - 表格前后带有换行符。
  - ④ 块级弹性盒子布局: flex
    - 元素的行为类似于 ❶ 块元素，并根据 ❷ flexbox 模型布局 (= 弹性盒子布局 ) 来布局其内容。
  - ⑤ 块级网格布局: grid
    - 元素的行为类似于❶ 块元素，并根据网格模型布局来布局其内容。
  - ⑥ 内联 ruby格式: ruby
    - 元素的行为类似于 ❶ 内联元素，并根据 ruby格式模型来布局其内容。
    - 它的行为类似于对应的HTML <ruby>元素。
- ⑵ 内部显示类型和双值语法
  - 支持双值语法的浏览器，在只找到内部值时，比如在指定 isplay: flex 或display: grid时，会将它们的外部值设置为 block。
    - 这将导致预期的行为; 例如，如果您指定一个元素为 display: grid，那么在网格容器上创建的框 ⇒ 应该是一个块级别的框。

Ⅲ. 列表项: < display-listitem >
- ⑴ 列表项⇒ 外部块框 + 内部列表项内联框: <display-listitem>
  - 元素为内容生成 ❶ 一个块框和一个单独的 ❷ 列表项内联框。
  - 将这个元素的外部显示类型: 变为块框，并将内部显示类型: 列表项内联框。
  - ① 列表项: list-item
    - 使元素的行为类似于 ❶ 列表项。
      - 在
      - p 元素上使用 list-item属性值⇒ 段落出现了列表项的符号
      - 还能通过list-style-type 更改列表项的符号
    - 搭配属性:
      - 可以与列表样式类型list-style-type 和列表样式位置list-style-position 一起使用。
    - 组合使用
      - 可以与外部显示类型 <display-outside>的任何关键字组合。
      - 也可以与内部显示类型 <display-inside> 的flow , flow-root关键字组合。
- ⑵ 列表项和双值语法
  - 在支持双值语法的浏览器中，如果没有指定内部值，则默认为流式布局flow。
  - 如果没有指定外部值，则主框的外部显示类型为块元素block。

Ⅳ. 类似 table 和 ruby 的子元素的显示类型: < display-internal >
- 有些布局模型(如table和ruby)具有 ❶ 复杂的内部结构，因此它们的子元素可能扮演着 ❷ 不同的角色。: <display-internal>
  - 这一类关键字就是用来定义这些 ❶ “内部”显示类型，并且只有在这些 ❷ 特定的布局模型中才有意义。
  - ⑴ 类似 <table> 子元素行为。
    - ① 表格行组(tbody): table-row-group
      - 这些元素的行为如 <tbody> HTML元素。
    - ② 表格标题组 (thead): table-header-group
      - 这些元素的行为如 <thead> HTML元素。
        
        thead的效果看上去和 tbody类型
    - ③ 表格注脚组 (tfoot): table-footer-group
      - 这些元素的行为如 <tfoot> HTML元素。
        
        元素的顺序发生了变化
    - ④ 表行 (tr): table-row
      - 行为如同<tr> HTML 元素。
    - ⑤ 单元格 (td): table-cell
      - 行为如同<td> HTML 元素。
        
        变成一行了
    - ⑥ 表格列组(colgroup): table-column-group , 美 /ˈkɑːləm/
      - 行为如同<colgroup> HTML 元素。
        
        元素消失了…
    - ⑦ 表列(col): table-column
      - 行为如同<col> HTML 元素。
    - ⑧ 表格标题 (caption): table-caption
      - 行为如同<caption> HTML 元素。
      - 在第一个p元素中设置的，导致其他元素不显示了
  - ⑵ 类似 <ruby> 子元素行为。
    - ① rb元素: ruby-base
      - 行为如同<rb> HTML 元素。
    - ② rt元素: ruby-text
      - 行为如同<rt> HTML 元素。
    - ③ rbc 元素: ruby-base-container
      - 行为如同<rbc> HTML 元素。生成匿名框。
    - ④ rtc元素: ruby-text-container
      - 行为如同<rtc> HTML 元素。

Ⅴ. 元素的可见性/显示框: < display-box >
- 这些值定义元素是否生成显示框: <display-box>
- 这些值决定元素是否使用盒模型。
- ① 内容-无特定框: contents
  - 无框: 这些元素本身不会产生特定的框。
    - 它们被它们的伪盒和子盒替换。
    - 不完全由 CSS 框概念呈现的元素 (如替换元素)。
    - 4个p元素，变成了纯文本内容的样子，看不见之前设置的边框和背景了。
  - 浏览器错误: 由于浏览器中的一个错误，这目前将从可访问性树中删除元素，屏幕阅读器不会看到里面是什么。
  - 可访问性树:
    - 大多数浏览器中的当前实现将从可访问性树中删除显示值为contents 的任何元素(但将保留后代元素)。
- ② 不显示元素 = 元素不可见: none
  - 元素不可见:
    - 不占据空间: 关闭元素的显示，使其对布局没有影响(文档呈现时，就好像元素不存在一样)。
    - 第1个p元素设置none后，整个元素都不见了。并且原本的位置，也被第2个元素占据了。
    - 可访问性树和屏幕读取技术:
      - 在元素上使用none 将把它从可访问性树中删除。这将导致该元素及其所有后代元素不再由屏幕读取技术宣布。
  - 子元素也不可见: 所有子代元素的显示也被关闭。
  - 占据空间但不可见:
    - 要让一个元素占用它原本占用的空间，但是不实际呈现任何内容，而是使用可见性 visibility属性。

Ⅵ. 等同于双值的单值语法: < display-legacy >
- ⑴ 单值语法- 单独关键字 = 双值语法的意思:<display-legacy> , 美 /ˈleɡəsi/
  - css2 对display属性使用了 ❶ 单关键字语法，对于相同布局模式的 ❶ 块级和 ❷ 内联级变体，需要使用单独的关键字。
  - ① 内联块元素: inline-block
    - 元素生成一个 ❶ 块元素框，它将与周围的内容一起流动，像是一个 ❶ 单独的内联框 (表现得很像一个被替换的元素)。
      - 元素本身还是个块级元素，但是没有了前后换行，会和其他元素排在一行上。
      - 同时具备块级元素和特性和行内级元素的部分特性。
      - 虽然排在了一行上，单原本的外边距还在垂直外边距也还可以设置。
    - 等同于: inline flow-root 元素。
  - ② 内联表格: inline-table
    - 内联表的值在HTML中没有直接映射。
      - 它的行为类似于 HTML ❶ <table> 元素，但它是 ❷ 一个内联框，而不是块级框。
        
        此元素会作为内联表格来显示，类似
        
        表格前后没有换行符。
    - 表格框内是块级上下文。
    - 等同于 inline table
  - ③ 内联弹性布局: inline-flex
    - 元素的行为类似于 ❶ 内联元素，并根据 ❷ flexbox模型布局其内容。
      - 各元素的内容的位置、宽高发生了变化。
    - 等同于: inline flex
  - ④ 内联网格布局: inline-grid
    - 元素的行为类似于 ❶ 内联元素，并根据 ❷ 网格模型布局其内容。
      - 行内级元素的显示发生了变化。
    - 等同于: inline grid
- ⑵ display的双值和单值语法
  - ① 双值语法浏览器支持度差:
    - 第3级规范详细说明了 display属性的两个值——明确地启用了外部显示类型和内部显示类型的规范——但是浏览器还没有很好地支持这一点。
  - ② 单值等同双值:
    - display-legacy方法允许使用单个关键字值得到相同的结果，在更好地支持两个关键字值之前，开发人员应该支持这种方法。
⑸ 浏览器支持
- 显示类型display 属性和属性值的浏览器支持

2. 显示类型和流式布局

2.1 CSS 流式布局: normal flow = flow layout = 文档流
- ⑴ 流式布局: 文档流⇒ 显示元素的方式
  - ① 显示方式:
    - “文档流” 或 "流式布局 "是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。
  - ② "流"的本质是: 一系列的事物，它们都在布局中一起工作，并且互相了解。
    - 一旦某部分脱离了"流"，它就会独立地工作。

⑵ 流式布局: 内联级元素和块级元素的显示
- ① 内联级元素⇒ 不独占一行⇒ 内联方向显示⇒ 不换行 (到边界时, 需要换行时才换行)
  - 在文档流中，内联级元素按内联方向显示，即根据文档的书写模式，在一个句子中显示单词的方向。
  - 内联级元素从左向右一个接一个地显示。
- ② 块级元素⇒ 独占一行⇒ 换行显示
  - 块级元素一个接一个地显示，就像文档的书写模式中的段落一样。
  - 块级元素从上向下，一个接着一个的显示。
【html 元素的分类 (详细介绍)】

示例1: 普通的文档流中的流式布局。
css

.blocktest {border: solid 2px;background-color: lightseagreen;/*块元素设置宽高，有效*//*width: 30%;*//*height: 50px;*//*块元素 设置内外边距，有效*/margin: 10px;padding: 10px;
}.inlinetest {border: dashed 2px indianred;background-color: lightblue;/*内联 非替换元素 设置宽高 无效*/width: 30%;/*height: 50px;*//*内联 非替换元素 设置 内外边距,垂直方向 上下 外边距无效,内边距 四个方向 都有效*//*margin: 10px;*//*padding: 10px;*/}

html

<!--流式布局-->
<p class="blocktest">古之 <span class="inlinetest">学者</span>必有师。<span class="inlinetest">师者</span>，所以传道受业解惑也。</p>
<p class="blocktest">人非生而知之者，孰能无惑 ？</p><a href="https://www.baidu.com/"><p>学而知之</p></a>真知，才能笃行。

2.2 CSS 流式布局: 块和内联布局
⑴ 文档流(normal flow) 在CSS 2.1 规范中定义。
- ① 框的分类:
  - 可以是 ❶ 块的，也可以是 ❷ 内联的，但不能同时是块和内联的。
- ② 框和格式化上下文
  - ❶ 框 ∈ 格式化上下文
    - 文档流中的任何框都是格式化上下文(formatting context) 的一部分。
  - ❷ 块级别的框: 参与块格式化上下文(block formatting context)。
  - ❸ 内联级别的框: 参与内联格式化上下文(inline formatting context)。

⑵ 块元素⇒ 具有块格式化上下文的元素
- ① 垂直排列:
  - 在块格式化上下文中，盒子一个接一个地垂直排列，从包含它的块的顶部开始。
  - 每个框的左外边缘
    - 在块格式化上下文中，❶ 每个框的左外边缘与 ❷ 包含块的左边缘相接触 (对于从右到左的格式设置，右边缘相接触)。
- ② 垂直距离 ⇒ 外边距 margin 决定
  - 两个兄弟框之间的垂直距离由外边距 margin属性决定。
- ③ 块级元素⇒ 垂直外边距合并
  - 块格式上下文中相邻块级框之间的垂直外边距合并。

⑶ 行内级元素 ⇒ 具有内联格式上下文的元素
- ① 水平排列
  - 在内联格式上下文中，框是水平排列的，一个接一个，从包含块的顶部开始。
- ② 这些框之间的水平外边距、边框和内边距都是有效的。
  - 行内非替换元素⇒ 垂直外边距/ 上下外边距无效。
- ③ 行内级元素⇒ 垂直对齐 ∵ vertical-align垂直对齐属性对行内级元素有效。
  - 框可以以不同的方式垂直对齐:
  - 它们的底部或顶部可能是对齐的，或者其中的文本基线可能是对齐的。

⑷ 不同的书写模式和元素排列
- 流式布局和书写模式
- CSS2.1 规范详细描述了文档流的行为方式，它采用的是水平书写模式。
  - 布局属性在垂直书写模式下应该以相同的方式工作⇒ 按照相对于书写方向的位置。
  - 垂直方向的布局 = 水平方向布局顺时针转90°。
- ① 水平书写模式 (汉字、英文等)
- ② 垂直的书写模式 (上图顺时针转90°)

⑸ 流式布局和溢出
- ① 溢出: 宽高固定，不换行时⇒ 当容器中的内容过多时，就会出现溢出的情况。
- ② overflow溢出属性值和块格式化上下文
  - 新的块格式化上下文:
    - 除了默认的visible值和 clip值之外，使用overflow值中的任何一个都将创建一个新的块格式化上下文。
    - overflow: clip
      - 行为像 overflow: hidden ，但它不允许程序滚动，框变成不可滚动的。
      - 此外，它不创建块格式化上下文。
深入理解 display 属性相关的流式布局,弹性盒布局, 网格布局的关系

♣ 结束语和友情链接

参考文档
- MDN CSS 教程

友情链接
- 【html 元素的分类 (详细介绍)】
- 【display 属性相关的流式布局,弹性盒布局, 网格布局的示例】

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注支持的理由或想对作者说的话哦~
赞助二维码:

转载请评论告知作者并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103481308
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

【CSS 定位之 display 属性】相关推荐

CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS 元素的display属性
使用 display属性,可以改变一个框的显示类型,显示类型就决定了一个元素生成框的类型,同时也会影响一个框的行为. 可以把行内元素的 display属性设置为 block,它将生成一个块级框,并表现 ...
【CSS知识点】——display属性详解
文章目录 display属性 dispaly属性的作用 display的分类 display-outside(外部值) display-inside(内部值) 使用flex实现上下左右居中: 使用fl ...
《三》CSS 中的 display 属性
display 属性可以设置元素的外部和内部显示类型.元素的外部显示类型将决定该元素在流式布局中的表现(块级或行内元素):元素的内部显示类型可以控制其子元素的布局(flex.grid 等). 块级元素 ...
css中的display属性值：table，table-row，table-cell
table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row:此元素会作为一个表格行显示(类似 <tr>). table-cell: ...
详解CSS中的display属性
上周使用layer.tips('提示信息'.'#id'):含有id的元素设置display:none后,提示信息弹出框位置错位了,百度后找的以下原因: 应该是含有id的元素脱离文档流造成的. 参考:h ...
CSS学习之display属性与浮动
1>display display属性主要是用来控制HTML元素的显示和隐藏与块级元素与行内元素的转换的. display的值,如下 --> block(块级元素 ) block元素 ...
css中的display属性之li元素
li元素 li元素是一个块级元素,display值默认为 block 当我们把display值改为inline后,li元素以水平菜单的样式显示补充:display与 visibility属性不同, ...

【CSS 定位之 display 属性】

CSS 定位之 display 属性

1. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局)

⑴ 设置元素的显示类型 ( 框的类型 )

⑵ 元素的显示类型

⑶ 显示类型的语法

⑷ 显示类型的属性值和属性值 6个分类 (下方示例图，代码如上)

Ⅰ. 外部显示类型: < display-outside >

Ⅱ. 内部显示类型: < display-inside >

Ⅲ. 列表项: < display-listitem >

Ⅳ. 类似 table 和 ruby 的子元素的显示类型: < display-internal >

Ⅴ. 元素的可见性/显示框: < display-box >

Ⅵ. 等同于双值的单值语法: < display-legacy >

⑸ 浏览器支持

2. 显示类型和流式布局

2.1 CSS 流式布局: normal flow = flow layout = 文档流

2.2 CSS 流式布局: 块和内联布局

♣ 结束语和友情链接

【CSS 定位之 display 属性】相关推荐

最新文章

热门文章

【CSS 定位之 display 属性】

CSS 定位之 display 属性

1. display 属性: 设置 元素的 显示类型 / 框的类型 (元素和子元素的布局)

⑴ 设置 元素的显示类型 ( 框的类型 )

⑵ 元素的显示类型

⑶ 显示类型的 语法

⑷ 显示类型的 属性值 和 属性值 6个分类 (下方示例图，代码如上)

Ⅰ. 外部显示类型: < display-outside >

Ⅱ. 内部显示类型: < display-inside >

Ⅲ. 列表项: < display-listitem >

Ⅳ. 类似 table 和 ruby 的子元素的 显示类型: < display-internal >

Ⅴ. 元素的 可见性/显示框: < display-box >

Ⅵ. 等同于 双值的 单值语法: < display-legacy >

⑸ 浏览器支持

2. 显示类型 和 流式布局

2.1 CSS 流式布局: normal flow = flow layout = 文档流

2.2 CSS 流式布局: 块和内联布局

♣ 结束语 和 友情链接

【CSS 定位之 display 属性】相关推荐

最新文章

热门文章

1. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局)

⑴ 设置元素的显示类型 ( 框的类型 )

⑶ 显示类型的语法

⑷ 显示类型的属性值和属性值 6个分类 (下方示例图，代码如上)

Ⅳ. 类似 table 和 ruby 的子元素的显示类型: < display-internal >

Ⅴ. 元素的可见性/显示框: < display-box >

Ⅵ. 等同于双值的单值语法: < display-legacy >

2. 显示类型和流式布局

♣ 结束语和友情链接