目录
CSS布局与定位
本次主要介绍如何使用CSS作出
左右布局
左中右布局
水平居中
垂直居中
等其他小技巧
左右布局
方法:
1.给子元素设置浮动float:left&right,父元素清除浮动clearfix。
作用:清除浮动效果后父元素的塌陷。
.clearfix::after{
content: '';
display: block;
clear: both;
}
代码:
html:
<div class="baba clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
css:
.clearfix::after{
content: '';
display: block;
clear: both;
}
.baba{
border: 1px solid red;
width: 300px;;
}
.left{
width: 50%;
height: 100px;
background: #000;
float: left;
}
.right{
width: 50%;
height: 100px;
background: green;
float: left;
}
2.绝对定位
3.inline-block
左中右布局
方法:和左右布局一样,float+clearfix
水平居中
内联元素方法:
父元素身上写text-align:center;
除了文本类型,div类型block属性变成inline-block可以实现同行效果。
内联元素方法:
div类型实现分行效果。
垂直居中7种方法
1.水平垂直居中
2.利用margin:auto来实现居中
3.使用父元素table & 子元素table-cell布局,实现水平和垂直居中
同时可以设置table-cell高度。
4.使用绝对定位,position: absolute;top: 50%;left: 50%; margin-top: -50px; margin-left: -50% (这是在知道该元素的具体高度和宽度)
5.使用绝对定位,不知道具体的高度和宽度。position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%)
6.使用flex。 在父元素上面设置: display: flex; justify-content: center; align-items: center
7.使用绝对定位,margin。 在子元素上面设置:position: absolute;top:0;bottom: 0;right: 0;left: 0; margin: auto
可以固定div垂直居中。