display:none
隐藏布局
- 用于隐藏元素,不会占用页面空间;
- 给 html 标签设置 hidden 属性,其效果即将其 display 设置为 none
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 | 此元素会作为块级表格来显示(类似 |
inline-table | 此元素会作为内联表格来显示(类似 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 |
table-row | 此元素会作为一个表格行显示(类似 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 |
table-column | 此元素会作为一个单元格列显示(类似 |
table-cell | 此元素会作为一个表格单元格显示(类似 |
table-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 内元素水平垂直居中
有点过时的布局
display 还有很多其他样式值,如列表元素 li 的 list-item
等,但不常用,也没有用于整个页面的布局,可以忽略
但除 display 外,还有很多其他布局方式:
float 浮动布局
-
float:left
左浮动 -
float:right
右浮动 -
float:none
取消浮动
- float 的元素会脱离文档流(文字内容向上移动占据了第一行),但不脱离文本流(文字内容在浮动元素边缘提前换行了,以便避开浮动元素)。
float 产生的影响
- 对自身的影响
- 形成“块”(BFC),float值不为none的元素的display的计算值为block或table
- 位置尽量靠上、靠左/右
- 只有一个图片时,最终为图片宽度,若还有文本,则为设置的宽度
- 对兄弟元素的影响
- 不影响其他块级元素的位置
- 影响其他块级元素的内部文本
- 没有margin合并
- 对父级元素的影响
- 从父级的布局中“消失”,破坏文档流
- 造成父级元素的高度塌陷——父级元素仅由div1 撑开后,若设置 div1 为 float ,则父级元素的高度会变为0。
清除浮动 clear
- 只对块级元素有效
- 让自身不能和前面的浮动元素相邻,对“后面的”浮动元素是不闻不问的
- 只能在一定程度上消除浮动的影响
【实战】圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
格式化上下文布局 BFC 和 IFC
Shapes 布局
用于实现不规则的图文环绕效果,需配合float一起使用。
新兴布局 – 响应式布局
为了满足不同设备不同尺寸屏幕和分辨率的自适配显示,而新兴的 CSS 布局技术,详见链接
- 【实战】巨幅背景大标题