display 布局

文章目录 [+]

display布局是CSS3新增的一种布局方式，它可以让元素以不同的方式排列在页面上，包括行内布局、块级布局、列表布局等，display布局的主要特点是可以控制元素的浮动和清除，从而实现更灵活的页面布局。

1. display: block;

将元素设置为块级元素，使其独占一行，前后会有换行符。

2. display: inline-block;

将元素设置为内联块级元素，使其既具有块级元素的特点，又具有内联元素的特点，如设置宽度、高度等属性。

3. display: flex;

将元素设置为弹性盒子模型，可以使用flex-direction、flex-wrap、justify-content、align-items等属性来控制子元素的排列方式。

4. display: grid;

将元素设置为网格布局容器，可以使用grid-template-rows、grid-template-columns、grid-auto-rows、grid-auto-columns等属性来定义网格的大小和位置。

5. display: none;

将元素隐藏，不占用页面空间。

1. 行内布局

使用display:inline-block或display:inline可以将元素设置为行内元素，使其在同一行显示。

<div style="display:inline-block;">行内元素1</div>
<div style="display:inline;">行内元素2</div>

2. 块级布局

使用display:block可以将元素设置为块级元素，使其独占一行。

<div style="display:block;">块级元素1</div>
<div style="display:block;">块级元素2</div>

3. 列表布局

使用display:list-item可以将元素设置为列表项，使其成为无序列表或有序列表的一部分。

<ul style="list-style-type:none;">
  <li style="display:list-item;">列表项1</li>
  <li style="display:list-item;">列表项2</li>
</ul>

1. 如何让一个元素既具有行内元素的特点，又具有块级元素的特点？

答：可以将该元素设置为内联块级元素，使用display:inline-block或display:inline即可，`行内块级元素`。

2. 如何让一个元素成为表格的行或列？

答：可以将该元素设置为表格行或表格列，使用display:table-row或display:table-column即可，`表格行`和`表格单元格`。

3. 如何让一个元素占据其父元素的全部宽度？

答：可以将该元素设置为相对定位或绝对定位，然后将其宽度设置为100%，`父元素`和`.child { position:absolute; width:100%; }`,其中`.child`为需要占据父元素全部宽度的子元素。

赞（）

标签：display

html列表分类