CSS 定位之 display 属性
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>
- css
/*去除各浏览器的 默认内外边距*/
* {
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也无效了 ，只有左右外边距有效。
- 4个
-
② 块级元素:
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 中测试的,谷歌,火狐中暂不支持此属性值)
- 第1个
- ❸ 如果
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>。 - 表格前后 带有 换行符。
- 此元素 会作为 块级表格 来显示，类似
- 这些元素的行为 类似于HTML 的 ❶
- ④ 块级 弹性盒子布局:
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>元素，但它是 ❷ 一个内联框，而不是块级框。- 此元素会作为 内联表格 来显示，类似
- 表格前后 没有换行符。
- 此元素会作为 内联表格 来显示，类似
- 它的行为 类似于 HTML ❶
- 表格框内 是块级上下文。
- 等同于
inline table
- 内联表的值 在HTML中 没有直接映射。
- ③ 内联 弹性布局:
inline-flex- 元素的 行为类似于 ❶ 内联元素，并根据 ❷
flexbox模型布局 其内容。- 各元素的 内容的位置、宽高 发生了变化。
- 等同于:
inline flex
- 元素的 行为类似于 ❶ 内联元素，并根据 ❷
- ④ 内联 网格布局:
inline-grid- 元素的 行为类似于 ❶ 内联元素，并根据 ❷ 网格模型布局 其内容。
- 行内级元素的显示 发生了变化。
- 等同于:
inline grid
- 元素的 行为类似于 ❶ 内联元素，并根据 ❷ 网格模型布局 其内容。
- css2 对
- ⑵
display的 双值和单值语法- ① 双值语法 浏览器支持度差:
- 第3级规范 详细说明了
display属性的两个值——明确地启用了 外部显示类型和内部显示类型的规范——但是浏览器 还没有很好地支持这一点。
- 第3级规范 详细说明了
- ② 单值 等同 双值:
display-legacy方法 允许使用单个关键字值 得到相同的结果，在更好地支持 两个关键字值之前，开发人员 应该支持这种方法。
- ① 双值语法 浏览器支持度差:
- ⑴ 单值语法- 单独关键字 = 双值 语法的意思:
-
⑸ 浏览器支持
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属性相关的 流式布局,弹性盒布局, 网格布局的关系
♣ 结束语 和 友情链接
- 参考文档
- 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭
- 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注 支持的理由 或 想对作者说的话哦~
- 可以备注 支持的理由 或 想对作者说的话哦~
- 赞助二维码:
- 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103481308
- 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
