CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）...

display:none 隐藏布局

• 用于隐藏元素，不会占用页面空间；
• 给 html 标签设置 hidden 属性，其效果即将其 display 设置为 none

登录后复制

<div hidden>我被隐藏了</div>

• 1.

• visibility: hidden 也能隐藏元素，但该元素仍会占用页面空间

display:inline 行内布局

元素从左到右排列成一行，元素的宽度由内容决定，不能设置宽高（替换元素除外）。

display:inline-block 行内块布局

元素从左到右排列成一行，可以设置宽高

display:block 块布局

每个元素撑满整行，多个块元素在一起时，效果如同从上向下排队。

display:flex 弹性布局（伸缩布局）

 https://www.runoob.com/w3cnote/flex-grammar.html

更多详解和实战范例可参考：

• flex: initial、flex:0、flex:1、flex:none、flex:auto的区别和使用场景
• 深入理解flex布局中的剩余空间分配规则——flex-grow，flex-shrink和flex-basis
• flex-grow 自适配宽度避免内容超出挤压两侧的最佳实践
• flex布局中使用margin:auto智能分配剩余空间
• 【实战】用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）
• 
  

display:grid 网格布局（栅格布局）

display:table 表格布局

通过添加样式display:table,display:table-row,display:table-cell 等，使 HTML 元素像 <table> 标签组一样进行布局。

值	描述
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和<th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）

最常用的是单元格布局 display:table-cell，配合 text-align 和 vertical-align 调整元素的位置。

• 左对齐【默认值】 text-align: left
• 水平居中 text-align: center
• 右对齐 text-align: right
• 顶部对齐【默认值】 vertical-align: top
• 垂直居中 vertical-align: middle;
• 底部对齐 vertical-align: bottom;

【实战】div 内元素水平垂直居中

登录后复制

<template>
  <div class="tableDemo">表格布局</div>
</template>

<style scoped>
.child {
  /* 表格单元格布局 */
  display: table-cell;
  /* 水平居中 */
  text-align: center;
  /* 垂直居中 */
  vertical-align: middle;
  height: 100px;
  width: 100px;
  border: 1px solid black;
}
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.

有点过时的布局

display 还有很多其他样式值，如列表元素 li 的 list-item 等，但不常用，也没有用于整个页面的布局，可以忽略

但除 display 外，还有很多其他布局方式：

float 浮动布局

• float:left 左浮动
• float:right 右浮动
• float:none 取消浮动

登录后复制

<template>
  <h1>浮动布局前</h1>
  <div>
    <div class="Demo"></div>
    <span>
      央视网消息：杭州市气象台2024年7月4日14时15分发布的短期天气预报。受副热带高压控制，预计未来5-7天杭州市以晴热高温天气为主，最高气温可达36到38度，请注意做好防暑降温工作。
    </span>
  </div>

  <h1>浮动布局后</h1>
  <div>
    <div class="Demo floatRight"></div>
    <span>
      央视网消息：杭州市气象台2024年7月4日14时15分发布的短期天气预报。受副热带高压控制，预计未来5-7天杭州市以晴热高温天气为主，最高气温可达36到38度，请注意做好防暑降温工作。
    </span>
  </div>
</template>

<style scoped>
.floatRight {
  float: right;
}
.Demo {
  height: 30px;
  width: 30px;
  background-color: green;
}
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.

• float 的元素会脱离文档流（文字内容向上移动占据了第一行），但不脱离文本流（文字内容在浮动元素边缘提前换行了，以便避开浮动元素）。

float 产生的影响

• 对自身的影响

• 形成“块”（BFC），float值不为none的元素的display的计算值为block或table
• 位置尽量靠上、靠左/右
• 只有一个图片时，最终为图片宽度，若还有文本，则为设置的宽度

• 对兄弟元素的影响

• 不影响其他块级元素的位置
• 影响其他块级元素的内部文本
• 没有margin合并

• 对父级元素的影响

• 从父级的布局中“消失”，破坏文档流
• 造成父级元素的高度塌陷——父级元素仅由div1 撑开后，若设置 div1 为 float ，则父级元素的高度会变为0。

清除浮动 clear

登录后复制

clear: both;

• 1.

• 只对块级元素有效
• 让自身不能和前面的浮动元素相邻，对“后面的”浮动元素是不闻不问的
• 只能在一定程度上消除浮动的影响

【实战】圣杯布局 vs 双飞翼布局 （含手写清除浮动 clearfix）

格式化上下文布局 BFC 和 IFC

Shapes 布局

用于实现不规则的图文环绕效果，需配合float一起使用。

新兴布局 – 响应式布局

为了满足不同设备不同尺寸屏幕和分辨率的自适配显示，而新兴的 CSS 布局技术，详见链接

• 【实战】巨幅背景大标题

原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11457412