本文将简单学习几种基本的CSS布局方式：左右布局，左中右布局，水平居中，垂直居中。
左右布局
本文只介绍两种最基础的左右布局方式：浮动布局和绝对定位布局。
1. float + clearfix
在这里，我们使用的是给需要左右布局的元素添加浮动属性，同时为了消除浮动元素的bug，给浮动元素的爸爸添加 clearfix 类，class="clearfix"。
HTML
<div class="parent clearfix">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
CSS
.clearfix::after {
content: '';
display: block;
clear: both;
}
.parent .left,
.parent .right {
float: left;
}
2. absolute postion
同时我们还可以使用绝对定位来实现左右布局，给需要左右布局的元素添加 position：absolute，父元素添加 position： relative ， position：absolute 可以使子元素相对于祖先中的第一个 postion: relative 定位，然后我们可以通过 left 来调整布局元素的位置
HTML
<div class="parent">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
CSS
.parent {
position: relative;
}
.parent .left {
position: absolute;
}
.parent .right {
position: absolute;
left:50%;
}
左中右布局
针对左中右布局，我们可以直接把左右布局的方式应用到这来，只需要布局的元素从两个拓展到多个。我们可以根据不同的需求使用浮动(float)或者绝对定位(absolute position)来实现左中右布局，实际情况中，我们需要结合需要选择适合的布局方式，在将来我们也会接触更多的布局方式 （flex布局，grid布局等）来应对不同的需求。
下面我们将使用浮动和绝对定位来实现一个简单的左中右布局。
左右栏元素各占100像素，中间自适应
1. 浮动布局
HTML
<div class="parent clearfix">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center
</div>
</div>
在这里 中间元素必须放在最后。
CSS
.clearfix::after {
content: '';
display: block;
clear: both;
}
.parent .left {
background: red;
float: left;
width: 100px;
}
.parent .right {
background: blue;
float: right;
width:100px;
}
.parent .center {
margin: 0 100px;
background: gray;
}
2. 绝对定位布局
HTML
<div class="parent">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
CSS
* {
margin:0;
padding: 0;
}
.parent {
position： relative;
}
.parent .left {
background: red;
width:100px;
position: absolute;
top: 0;
left: 0;
}
.parent .right {
background: blue;
width:100px;
position: absolute;
top: 0;
right: 0;
}
.parent .center {
background: gray;
margin-left: 100px;
margin-right: 100px;
}
区别
- 我们发现，当界面宽度小于200像素时，浮动布局右边的元素会被挤到下一行，然而绝对定位布局，左右元素仍然在在一行里面但是会重合在一起。
- 同时，我们注意到，浮动布局里中间的内容是需要在最后才能加载的，与此相对，绝对定位布局由于左右元素都脱离了文档流，所以左中右三个布局元素可以任意更改顺序。但是也正是由于左右元素脱离了文档流，这会导致一个问题，如果出现了左右元素的高度大于中间元素的时候，那么他们的父亲的高度就小于了左右元素的高度，这是需要注意的。
水平居中
1. text-align: center 和 display: inline-block
在这我们介绍一种最基础的水平居中的布局方式，使目标元素变为display: inline-block，然后再通过给它的父亲设置 text-align: center来设置水平居中。
HTML
<div class="parent">
<div class="child">
content
</div>
</div>
CSS
.parent {
text-align: center;
}
.child {
display: inline-block;
vertical-align: top;
}
注意这种方式会导致目标元素内的文字也被设置为居中，有时我们不需要元素内文字也居中时，需要在目标元素添加需要的text-align属性。
注意添加 display: inline-block 后，有一个bug，元素下面会多出一丝空隙，所以我们必须添加 vertical-align: top; 来取消这个空隙。
2. margin
同时我们还可以通过对块级元素设置 margin-left: auto 和 margin-right: auto 。但是相比较于第一种方式，这种方式我们建议要对块级元素要设置 max-width。
3. padding
我们还可以通过由内而外给目标元素添加相同的左右 padding 来实现水平居中。
垂直居中
1. 父亲元素 padding
这里我们介绍一种十分简单的垂直居中方式，即通过给目标元素的父亲设置相等的上下padding，注意这个时候，我们推荐不要给父亲元素设置高度，要让他自动适应子元素的高度，除非我们能够计算出准确的父元素高度让其垂直居中。
HTML
<div class="parent">
<div class="child">
content
</div>
</div>
CSS
.child {
background: red;
}
.parent {
padding: 100px 0;
background: gray;
}
2. line-height，单行文本垂直居中
我们设置 line-height 与 height一致时，则文本会自动垂直居中，然而我们一般避免设置height，容易导致潜在bug，也有可能出现实际不是设置的数值的情况。
HTML
<div class="parent">
<div class="child">
content
</div>
</div>
CSS
.child {
line-height: 40px;
height: 40px;
border: 1px solid red;
}
所以针对这种情况，我们往往推荐选择由内而外添加 padding, 来使其居中来避免添加height。
CSS
.child {
line-height: 22px;
display: inline-block;
padding: 10px 0;
border: 1px solid red;
}
完
网友评论