CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)

简介: CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)

display:none 隐藏布局

  • 用于隐藏元素,不会占用页面空间;
  • 给 html 标签设置 hidden 属性,其效果即将其 display 设置为 none
<div hidden>我被隐藏了</div>
  • 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的区别和使用场景

https://blog.csdn.net/weixin_41192489/article/details/120846362

深入理解flex布局中的剩余空间分配规则——flex-grow,flex-shrink和flex-basis

https://blog.csdn.net/weixin_41192489/article/details/120842902

flex-grow 自适配宽度避免内容超出挤压两侧的最佳实践

https://blog.csdn.net/weixin_41192489/article/details/139058300

flex布局中使用margin:auto智能分配剩余空间

https://blog.csdn.net/weixin_41192489/article/details/120834852

【实战】用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)

https://blog.csdn.net/weixin_41192489/article/details/136398234

display:grid 网格布局(栅格布局)

https://blog.csdn.net/weixin_41192489/article/details/115588135

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-alignvertical-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>

有点过时的布局

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>
  • float 的元素会脱离文档流(文字内容向上移动占据了第一行),但不脱离文本流(文字内容在浮动元素边缘提前换行了,以便避开浮动元素)。

float 产生的影响

  • 对自身的影响
  • 形成“块”(BFC),float值不为none的元素的display的计算值为block或table
  • 位置尽量靠上、靠左/右
  • 只有一个图片时,最终为图片宽度,若还有文本,则为设置的宽度
  • 对兄弟元素的影响
  • 不影响其他块级元素的位置
  • 影响其他块级元素的内部文本
  • 没有margin合并
  • 对父级元素的影响
  • 从父级的布局中“消失”,破坏文档流
  • 造成父级元素的高度塌陷——父级元素仅由div1 撑开后,若设置 div1 为 float ,则父级元素的高度会变为0。

清除浮动 clear

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

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

https://blog.csdn.net/weixin_41192489/article/details/136376716

格式化上下文布局 BFC 和 IFC

https://blog.csdn.net/weixin_41192489/article/details/120197275

Shapes 布局

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

https://blog.csdn.net/weixin_41192489/article/details/120978607

新兴布局 – 响应式布局

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

https://blog.csdn.net/weixin_41192489/article/details/136423056

  • 【实战】巨幅背景大标题
    https://blog.csdn.net/weixin_41192489/article/details/119009647
目录
相关文章
|
21天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
7天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
1月前
|
前端开发 UED
CSS3:linear-gradient&input&inset&table
本文介绍了 CSS 中的 `linear-gradient` 渐变、`input` 样式、`inset` 简写属性、`border-collapse: collapse` 表格边框合并以及 `&lt;label&gt;` 元素的 `for` 属性。通过示例代码和解释,帮助读者理解这些 CSS 特性及其应用。
42 13
|
14天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
1月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
49 4
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
3月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
125 3

热门文章

最新文章