CSS的一些浅见
2018-08-05 本文已影响0人
龍光射牛斗
左右布局
块级元素的文档流是从上往下的,一个元素会直接占据一行。
我们一般会使用float属性来实现左右布局。
左中右布局
使用position属性,代码如下,对子元素使用绝对定位,父元素相对定位,来达到我们的目的。
<body>
<div class="big">
<div class="small"></div>
<div class="small" style="left: 150px;"></div>
<div class="small" style="left: 300px;"></div>
</div>
</body>
<style>
.big{
position: relative;
}
.small{
height: 100px;
width: 100px;
border: 1px solid red;
position: absolute;
}
</style>
效果图
水平居中
1、块级元素在页面中水平居中一般使用margin属性,左右外边距设置为auto;
2、或者也可以使用text-align: center;
属性
3、内联元素水平居中可以帮其父元素设置相同的左右内边距;
垂直居中
常用的话还是帮父元素设置相同的上下内边距,或者使用vertical-align: center;
属性。
先写到这