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;属性。

先写到这

上一篇下一篇

猜你喜欢

热点阅读