CSS布局
2018-04-07 本文已影响20人
酷热summer
今天我们介绍一下CSS的一些布局处理：
一、左右布局
1）浮动完成左右布局：
结构：
<div class="box clearfix">
<div class="div1 div">div1</div>
<div class="div2 div">div2</div>
</div>
样式：
<style>
*{
box-sizing: border-box;
}
.box{
width: 202px;
height: 200px;
border:1px solid #e6e6e6;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
float: left;
}
.clearfix:before{
content:'';
display: block;
clear: both;
}
</style>
具体还可使用float:right进行右对齐。
2）设置div为行内块
布局：
<div class="box">
<div class="div1 div">div1</div>
<div class="div2 div">div2</div>
</div>
样式：
<style>
*{
box-sizing: border-box;
}
.box{
width: 202px;
height: 200px;
border:1px solid #e6e6e6;
font-size: 0px;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
display: inline-block;
vertical-align: top;
font-size: 12px;
}
</style>
子元素宽度可根据需要使用百分比或者固定宽度。
此处需要注意两个问题：
- 使用display:inline-block时一定要搭配使用vertical-align:top。不然每个块高度不一致，默认会以基线对齐导致div文档流错乱
- div.box使用font-size：0px是为了保证子元素能够紧密贴合，需对父元素设置字号为0
3）flex布局
flex常用布局为左侧固定宽度右侧自适应。
页面结构为：
<div class="box">
<div class="div1 div">div1</div>
<div class="div2 div">div2</div>
<div class="div2 div">div3</div>
</div>
样式为：
<style>
*{
box-sizing: border-box;
}
.box{
width: 202px;
height: 200px;
border:1px solid #e6e6e6;
display: flex;
flex-direction: row;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
}
.div1{
width: 50px;
}
.div2{
flex: 1;
}
</style>
二、左中右布局
1）浮动完成左中右布局：
布局：
<div class="box clearfix">
<div class="div1 div">div1</div>
<div class="div2 div">div2</div>
<div class="div3 div">div3</div>
</div>
样式：
<style>
*{
box-sizing: border-box;
}
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
}
.div{
height: 100px;
border:1px solid #f00;
font-size: 12px;
}
.div1{
width: 50px;
float: left;
}
.div2{
width: 200px;
display: inline-block;
vertical-align: top;
}
.div3{
width: 50px;
float: right;
}
.clearfix:before{
content:'';
display: block;
clear: both;
}
</style>
2）行内块
布局：
<div class="box">
<div class="div1 div">div1</div>
<div class="div2 div">div2</div>
<div class="div3 div">div3</div>
</div>
样式：
<style>
*{
box-sizing: border-box;
}
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
font-size: 0px;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
font-size: 12px;
display: inline-block;
vertical-align: top;
}
.div1{
width: 50px;
}
.div2{
width: 200px;
}
.div3{
width: 50px;
}
</style>
3）flex
布局：
<div class="box">
<div class="div1 div">div1</div>
<div class="div2 div">div2</div>
<div class="div3 div">div3</div>
</div>
样式：
<style>
*{
box-sizing: border-box;
}
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
display: flex;
flex-direction: row;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
}
.div1{
flex: 1;
}
.div2{
width: 200px;
}
.div3{
flex: 1;
}
</style>
三、水平居中
1)设置为行内块
布局：
<div class="box">
<div class="div">div</div>
</div>
样式：
<style>
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
text-align: center;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
display: inline-block;
}
</style>
或者不使用text-align:center，只对子元素div.div设置宽度，然后样式添加margin:0 auto;同样可完成水平居中。
2）flex布局实现水平居中
布局与上述相同，样式为：
<style>
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
display: flex;
flex-direction: row;
justify-content: center;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
display: inline-block;
}
</style>
3）绝对定位
布局仍旧与上述相同，样式为：
<style>
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
position: relative;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
四、垂直居中
1)设置为行内块
布局为：
<div class="box">
<div class="div">div</div>
</div>
样式为：
<style>
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
line-height: 200px;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
display: inline-block;
vertical-align: middle;
line-height: 100px;
}
</style>
2) flex垂直居中
布局同上，样式为：
<style>
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
display: flex;
flex-flow: row;
align-items: center;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
}
</style>
3）绝对定位
布局同上，样式为：
<style>
.box{
width: 303px;
height: 200px;
border:1px solid #e6e6e6;
position: relative;
}
.div{
width: 100px;
height: 100px;
border:1px solid #f00;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
