css布局和一些小技巧

1左右布局

以下是html部分，一个父元素，两个子元素，要将子元素左右两栏布局。

      

111

     

22

最常见的方法是在css里设置浮动，在html里父元素加上clearfix 类清除浮动，css代码如下

.clearfix::after{

    content: '';

    display: block;

    clear: both;

}

.left,right{

 float: left;

设置position绝对定位，为父元素设置position: relative; 为子元素设置position: absolute; css代码如下

.parent{

position: relative;

}

.left{

position: absolute;

left: 0;

top: 0;

}

.right{

position: absolute;

left: 0;

top: 0;

}

2.左中右布局

左中右布局主要方法也是浮动或者绝对定位，不过可以分情况选择其一使用甚至结合使用。

特定情况下使用浮动还是绝对定位

使用浮动时：不需要计算特别精确的位置，不过不易操控，浮动元素的宽度需要注意，是根据其内容决定的，否则会换行展示，适用于导航栏等地方。

使用绝对定位：需要计算元素的具体位置，不过更加准确，易于操控。

当某些元素的位置要根据父元素的大小自适应，内容宽度无法确定时，建议使用浮动。

3.水平居中

(1)通过margin: 0 auto; text-align: center实现CSS水平居中。父元素必须指定宽高。

   此居中的方法前提为居中块级元素宽度必须固定才可设置auto自动计算左右补白

(2)通过display:flex实现CSS水平居中。

(3)通过position:absolute实现CSS水平居中。

通过设置子元素为绝对定位元素还有left和margin-left的值可以达到居中效果使设置

CSS

(4)通过display:inline-block和text-align:center实现CSS水平居中。

text-align  属性规定元素中的文本的水平对齐方式。display:inline-block设置块级元素为行内块级元素时便可实现水平居中

4.其他小技巧

 利用：before伪类垂直居中的问题

代码链接

:nth-child() 伪类选择器 

让你匹配到父元素的任一子元素

nth-child(odd)父元素下的奇数子元素，等同于nth-child(2n-1)

nth-child(even)父元素下的偶数子元素 同样区分子元素类型   等同于nth-child(2n)