CSS的布局

一、左右（左右中）布局

1、float（浮动）

父项元素加“clearfix”，两个子项元素加“float：left”

2、行内块级元素

使用“display：inline-block”，在行内显示两个块级元素

3、position属性

在子元素上设置“position：absolute”，绝对定位

二、水平居中

1、使用padding填充

2、行级元素居中

对块级的父级使用，能让内部的匿名行盒(文字)、行内元素(span)、inline-block元素在父亲里水平居中

3、块级元素水平居中

块级元素， 设置固定宽度，左右margin等于auto

4、flex布局居中

对父级元素设置“display：flex”、“align-items：center”和“justify-content:center”

5、grid布局居中

和flex布局用法相似

三、垂直居中

1、单行文本固定高度垂直居中

2、flex布局居中

对父级元素设置“display：flex”、“align-items：center”和“justify-content:center”

3、grid布局居中

和flex布局用法相似

四、小技巧

1、使用伪类"::before"和"::after"，减少div的使用

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

2、:nth-child(n)选择器

选中某个元素，该元素必须是某个父元素下的第n个子元素。

:nth-child(odd)选择奇数子元素

:nth-child(even)选择偶数子元素

第一个子元素 :nth-child(1)=:first-child

最后一个子元素 :nth-child(n)=:last-child