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
- 版权声明:本文为博主原创文章,转载 请评论告知作者 并附上博文链接!