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-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>
有点过时的布局
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