CSS布局篇
在前端CSS的学习过程中，布局是很重要的一部分，因此，我也通过搜集和整理资料来写了这篇博文，来简述一下有关于布局的各种方式，对自己有关于CSS布局的知识做一下梳理，也希望能给其他需要学习到布局知识的朋友一些帮助。
实现左右布局
假设布局左侧部分宽度固定，右侧部分宽度随浏览器宽度的变化而自适应变化
利用flex方法实现左右布局
<div class="container">
<div class="initial">左侧部分宽度固定</div>
<div class="flex1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div>
</div>
.container {
/* background-color: red; */
display: flex;
height: 100px;
}
.initial {
300px;
background-color: red;
}
.flex1 {
background-color: palevioletred;
flex:1;
}
利用float方法实现左右布局
<div class="container2 clearfix">
<div class="initial2">左侧部分宽度固定</div>
<div class="float1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div>
</div>
.container2 {
height: 100px;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.initial2 {
height: inherit;
300px;
float: left;
background-color: rosybrown;
}
.float1 {
height: inherit;
margin-left: 300px;
background-color: gray;
}
实现左中右布局
假设布局两部分宽度固定，其中一部分宽度随浏览器宽度的变化而自适应变化
利用flex方法实现左中右布局
<div class="container3">
<div class="three_1">第一列</div>
<div class="three_2">第二列</div>
<div class="three_3">第三列</div>
</div>
.container3 {
display: flex;
height: 100px;
}
.three_1 {
200px;
height: inherit;
background-color: indigo;
}
.three_2 {
flex: 1;
height: inherit;
background-color:darkcyan;
}
.three_3 {
200px;
height: inherit;
background-color: darkorchid;
}
利用float方法实现左中右布局
<div class="container4"
<div class="three_1_1">第一列</div>
<div class="three_3_3">第三列</div>
<div class="three_2_2">第二列</div>
</div>
.container4 {
height: 100px;
}
.three_1_1 {
200px;
float: left;
height: inherit;
background-color: forestgreen;
}
.three_2_2 {
margin-left: 200px;
margin-right: 200px;
height: inherit;
background-color: tomato;
}
.three_3_3 {
200px;
float: right;
height: inherit;
background-color: salmon;
}
实现水平居中
内联元素水平居中
<div class="center-children">
This is center
</div>
.center-children {
text-align: center;
}
块级元素水平居中
块级元素水平居中又分为两种情况
- 块级元素宽高已确定
以下是利用margin来设置水平居中
<div class="center">
I'm a block level element and am centered.
</div>
.center {
margin: 0 auto;
200px;
background: black;
padding: 20px;
}
以下是利用position来设置水平居中
<div class="father">
<div class="center">
I'm a block level element and am centered.
</div>
</div>
.father {
position: relative;
}
.center {
position: absolute;
background-color: red;
960px;
left: 50%;
transform: translate(-50%,0);
text-align: center;
}
- 块级元素宽高未确定
<div class="father">
<div class="center">
I'm a block level element and am centered.<br>
I'm a block level element and am centered.
</div>
</div>
.father {
text-align: center;
}
.center {
display: inline-block
}
实现垂直居中
内联元素垂直居中
- 单行内联元素居中
使用flex布局实现内联元素垂直居中（不考虑兼容老式浏览器的话）
<div class="center">
I'm a block level element and am centered.<br>
I'm a block level element and am centered.
</div>
.center {
display: flex;
align-items: center;
}
使用line-height实现内联元素垂直居中
<div class="center">
I'm a block level element and am centered.
</div>
.center {
height: 32px;
line-height: 32px;
}
- 多行内联元素垂直居中
使用flex布局实现多行内联元素垂直居中（不考虑兼容老式浏览器的话）
<div class="center">
<p>
I'm a block level element and am centered.
I'm a block level element and am centered.
</p>
</div>
.center {
display: flex;
justify-content: center;
flex-direction: column;
}
块级元素垂直居中
- 块级元素高度已确定
<main>
<div>
I'm a block-level element with a fixed height, centered vertically within my parent.
</div>
</main>
main {
background: white;
height: 300px;
300px;
position: relative;
resize: vertical;
overflow: auto;
}
main div {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
background: black;
color: white;
}
- 块级元素高度未确定
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
main {
position: relative;
}
main div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
- 使用flexbox
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
main {
display: flex;
flex-direction: column;
justify-content: center;
}
关于Grid
此外，现在CSS的布局已经发展到了Grid,他更简便快捷高效.
在考虑兼容性的情况下，我们应该熟悉以前的布局方法，但是以发展的眼光看，我们可着眼于更强大的布局方式Grid，了解现在的CSS发展趋势。
在网络上现在也存在了不少关于Grid的文章，我们也可以学习一下，比如掘金的这篇文章。
关于CSS布局篇的分析和整理就到此为止啦，希望能帮助到更多的朋友。