目录
- 1. 居中布局
- 1.1 水平居中布局
- 1.2 垂直居中布局
- 1.3 居中布局（水平+垂直）
- 2. 多列布局
- 2.1 两列布局
- 2.2 三列布局
- 2.3 等分布局
- 2.4 等高布局
- 2.5 多列布局
- 3. 全屏布局
前言： 以前也了解过很多布局的方式，但是没有一个系统性的总结，所以用这篇博客来总结一下CSS布局。
1. 居中布局
1.1 水平居中布局
概念： 水平居中对齐就是当前元素在父级元素容器中，水平方向是居中显示的。
实现方式： 对于水平居中布局，有三种常见的实现方式，下面来一一列举：
1. inline-block + text-algin
-
text-algin是为文本内容设置对齐方式 -
display属性的属性值有：block 块级元素，inline 内联元素，inline-block 行内块级元素，因为内联元素对于text-align是有效的，所以inline-block对其也是有效的
<style>
.father {
width: 100%;
height: 800px;
background-color: pink;
text-align: center;
}
.child {
width: 800px;
height: 800px;
background-color: skyblue;
display: inline-block;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
特点： 这种方式的浏览器兼容性比较好，但是text-align属性具有继承性，所以内部文本也会居中对齐。
2. table + margin
<style>
.father {
width: 100%;
height: 800px;
background-color: pink;
}
.child {
width: 800px;
height: 800px;
background-color: skyblue;
display: table; //属性值为block时也可以实现居中布局
margin: 0 auto;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
特点： 只要对子级设置就可以实现居中布局的效果，但是如果子级元素脱离文档流，会导致margin属性失效。
注：当元素设置为浮动float时，会脱离文档流，当设置为绝对定位、相对定位时也会脱离文档流。
3. absolute + transform
<style>
.father {
width: 100%;
height: 800px;
background-color: pink;
position: relative;
}
.child {
width: 800px;
height: 800px;
background-color: skyblue;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
特点： 父级元素无论是否脱离文档流，都不会影响子级元素的水平居中布局效果，但是由于transform属性是CSS3中新增的属性，所以兼容性可能不是太好。
1.2 垂直居中布局
垂直居中对齐的实现方式，这里主要列举其中两种：
1. table-cell + vertical-algin
-
display属性值设置为table-cell时，就是把当前的元素设置为一个表格的单元格 -
vertical-algin 属性用于设置文本内容的垂直方向对齐方式
<style>
.father {
width: 1000px;
height: 600px;
background-color: pink;
vertical-align: middle;
display: table-cell;
}
.child {
width: 1000px;
height: 400px;
background-color: skyblue;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
特点： 这种方案的兼容性比较好，但是vertical-algin属性有继承性，会导致父级元素的文本内容也是居中显示。
2. absolute + transform
<style>
.father {
width: 1000px;
height: 600px;
background-color: pink;
position: relative;
}
.child {
width: 1000px;
height: 400px;
background-color: skyblue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
特点： 父级元素无论是否脱离文档流，都不会影响子级元素，但是由于transform属性是CSS3中新增的属性，所以兼容性可能不是太好。
1.3 居中布局（水平+垂直）
居中布局的实现方式主要是以上两种布局方式的组合，下面来列举其中两种组合：
1. table + margin实现水平方向居中，table-cell + vertical-algin实现垂直方向居中
<style>
.father {
width: 1000px;
height: 600px;
background-color: pink;
display: table-cell;
vertical-align: middle;
}
.child {
width: 800px;
height: 400px;
background-color: skyblue;
display: table; // 最好设置为block
margin: 0 auto;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
2. absolute + transform实现水平方向和垂直方向居中
<style>
.father {
width: 1000px;
height: 600px;
background-color: pink;
position: relative;
}
.child {
width: 800px;
height: 400px;
background-color: skyblue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
2. 多列布局
2.1 两列布局
我们来实现两列布局，它的左侧是固定宽度，右侧自适应：
1. float + margin
<style>
.left,
.right {
height: 800px;
}
.left {
width: 500px;
background-color: pink;
float: left;
}
.right {
background-color: skyblue;
margin-left: 500px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
特点： margin必须与定宽的width相等，耦合。
2. float + overflow
overflow 开启了BFC模式，开启之后，当前元素的内部环境与外界完全隔离，BFC不会重叠浮动元素。
BFC指式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
形成BFC的条件：
- 浮动元素，
float 除none 以外的值； - 定位元素，
position（absolute，fixed）； -
display 为以下其中之一的值inline-block，table-cell，table-caption； -
overflow 除了visible 以外的值（hidden，auto，scroll）；
<style>
.left,
.right {
height: 800px;
}
.left {
width: 500px;
background-color: pink;
float: left;
}
.right {
background-color: skyblue;
overflow: hidden;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
特点： overflow虽然解决了两列布局的问题，但是同时设置了溢出的情况
3. Flex布局
<style>
.left,
.right {
height: 800px;
}
.parent {
display: flex;
}
.left {
width: 500px;
background-color: pink;
}
.right {
background-color: skyblue;
flex: 1;
}
</style>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
4. 表格布局
现在表格布局使用较少了，所以不做过多的阐述
<style>
.parent {
display: table;
width: 100%;
table-layout: fixed; // 表格列宽由表格宽度和列宽度设定
}
.left,
.right {
height: 800px;
display: table-cell;
}
.left {
width: 500px;
background-color: pink;
}
.right {
background-color: skyblue;
}
</style>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
2.2 三列布局
三列布局主要是两侧固定宽度，中间部分自适应
1. 圣杯布局
圣杯布局和普通三栏布局有一定的区别，普通三列布局是按顺序写三列，而圣杯布局是先写中间部分，进行优先加载，在写两侧的部分。
<style>
.left,
.right,
.center {
height: 800px;
float: left;
}
.parent {
height: 800px;
margin: 0 300px;
}
.left,
.right {
width: 300px;
}
.left {
background-color: pink;
margin-left: -100%;
position: relative;
left: -300px;
}
.center {
background-color: green;
width: 100%;
}
.right {
background-color: skyblue;
margin-right: -100%;
}
</style>
<body>
<div class="parent">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
2. 双飞翼布局
双飞翼布局是基于圣杯布局进行的优化，实现步骤如下：
- left、center、right三种都设置左浮动
- 设置center宽度为100%
- 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
- 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
<style>
#container {
overflow: hidden;
}
.column {
text-align: center;
height: 300px;
line-height: 300px;
}
#left, #right, #center {
float: left;
}
#center {
width: 100%;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
margin-left: -100%;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 150px;
margin-left: -150px;
background: rgb(231, 105, 2);
}
.content {
margin: 0 150px 0 200px;
}
</style>
<body>
<div id="header">#header</div>
<div id="container">
<div id="center" class="column">
<div class="content">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
2.3 等分布局
等分布局是指把页面分为若干列，每一列的宽度相等，我们用以下方式来实现等分布局：
1. float 浮动
<style>
.item1,
.item2,
.item3,
.item4 {
float: left;
width: 25%;
height: 800px;
}
.item1 {
background-color: green;
}
.item2 {
background-color: red;
}
.item3 {
background-color: skyblue;
}
.item4 {
background-color: pink;
}
</style>
<body>
<div class="parent">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
</body>
2. 表格布局
<style>
.parent {
display: table;
table-layout: fixed;
width: 100%;
height: 800px;
}
.item1,
.item2,
.item3,
.item4 {
height: 800px;
display: table-cell;
}
.item1 {
background-color: green;
}
.item2 {
background-color: red;
}
.item3 {
background-color: skyblue;
}
.item4 {
background-color: pink;
}
</style>
<body>
<div class="parent">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
</body>
3. flex布局
<style>
.parent {
display: flex;
}
.item1,
.item2,
.item3,
.item4 {
height: 800px;
flex: 1;
}
.item1 {
background-color: green;
}
.item2 {
background-color: red;
}
.item3 {
background-color: skyblue;
}
.item4 {
background-color: pink;
}
</style>
<body>
<div class="parent">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
</body>
2.4 等高布局
等高布局是指子元素在父元素中高度相等的布局方式。（高度是由内容撑起来的）
1. 表格布局
<style>
.parent {
/* 单元格的高度默认是的等高的 */
display: table;
}
.right,
.left {
width: 300px;
display: table-cell;
}
.left {
background-color: pink;
}
.right {
background-color: skyblue;
}
</style>
<body>
<div class="parent">
<div class="left">等高布局</div>
<div class="right">等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局</div>
</div>
</body>
2. 伪等高布局
这种方式实现的布局是伪等高布局，它的工作原理是：使用 padding-bottom: 9999px 会让三个盒子拉伸的非常高，然后利用 margin-bottom: -9999px 将各个元素切割掉 9999px，最后父元素将超出的部分隐藏
<style>
.parent {
overflow: hidden;
}
.right,
.left {
width: 300px;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.left {
background-color: pink;
}
.right {
background-color: skyblue;
}
</style>
<body>
<div class="parent">
<div class="left">等高布局</div>
<div class="right">等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局等高布局</div>
</div>
</body>
2.5 多列布局
CSS3中多列布局使用column属性来实现，它有以下属性：
-
column-count属性:定义列的数量或者允许的最大列数，它的属性值：
（1）auto : 默认值，用于表示列的数量由其他CSS属性决定
（2）number ：必须是正整数，用于表示定义列的数量
-
column-width属性:定义列的宽度，它的属性值：
（1）auto ：默认值，用于表示列的宽度由其他CSS属性决定
（2）length ：必须是正整数，用于表示定义列的宽度
-
column-gap属性：用于设置列与列之间的间距，该属性需要为多列显示时的元素设置
（1）normal ：用于表示使用浏览器定义列的默认间距，默认值为1em
（2）length ：必须是正整数，用于表示定义列之间的间距
-
column-rule属性：用于定义列与列之间的边框，其中包括边框宽度、边框颜色以及边框样式
（1）column-rule-width属性：用于表示列与列之间的边框宽度
（2）column-rule-color属性：用于表示列与列之间的边框颜色
（3）column-rule-style属性：用于表示列与列之间的边框样式
-
column-span属性：用于定义一个列元素是否跨列
（1）none :用于表示元素不跨列
（2）all:用于表示元素跨所有列
-
column-fill属性：用于定义列的高度是由内容决定,还是统一高度
（1）auto : 默认值，用于表示列的高度由内容决定
（2）balance : 用于表示列的高度根据内容最多的一列高度为准
<style>
.parent {
column-count: 4;
column-gap: 30px;
}
.item1,
.item2,
.item3,
.item4 {
height: 300px;
}
.item1 {
background-color: pink;
}
.item2 {
background-color: skyblue;
}
.item3 {
background-color: green;
}
.item4 {
background-color: red;
}
</style>
<body>
<div class="parent">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
</body>
3. 全屏布局
全屏布局就是指HTML页面铺满整个浏览器窗口, 并且没有滚动条而且还可以跟随浏览器的大小变化而变化。
使用定位来实现：
<style>
html,
body {
margin: 0;
overflow: hidden;
}
header {
height: 100px;
position: fixed;
top: 0;
background-color: pink;
}
.content {
position: fixed;
top: 100px;
bottom: 100px;
overflow: auto;
background-color: skyblue;
}
.content .left {
width: 300px;
height: 100%;
position: fixed;
left: 0;
top: 100px;
bottom: 100px;
background-color: green;
}
.content .right {
height: 1000px;
margin-left: 300px;
background-color: yellow;
}
footer {
height: 100px;
position: fixed;
bottom: 0;
background-color: red;
}
</style>
<body>
<header></header>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
后面有时间还会在总结一下网格布局的相关的知识~
