CSS常见布局以及一些小技巧

左右布局

float浮动

1. 可以将左边和右边的块级元素都设置为float:left；
2. 可以将左边的块级元素设置为float:left，右边的块级元素设置为float:right；
3. 当左边的块级元素有固定的宽度时，可以设置右边的块级元素margin-left：左边width

使用inline-block

将左右的块级元素都设置display:inline-block，然后两个块级元素就能在一行显示为内联元素。之后要加一行vertical-align:top来去除下方空隙bug。

使用flex

将父元素display:flex，justify-content属性可以调节多种排布方式，居于两侧、居中、开头对齐、末尾对齐等。
左中右布局也可以使用上述方法。

居中

内联元素水平居中

• 给父元素设置text-align:center;
• 给父元素设置display:flex;justify-content:center;

内联元素垂直居中

• 设置父元素的高度height与行高line-height一致，则父元素内的行内子元素会垂直居中显示
• 给父元素设置display:flex;flex-direction:column;justify-content:center;
• 给父元素设置display:flex;align-items:center;
• 给父元素设置display:flex;子元素设置margin:auto 0;
• 给父元素设置display:grid;align-content:center;
• 给父元素设置display:grid;子元素设置margin:auto 0;

块级元素水平居中

元素宽度确定时：给元素设置margin:0 auto;
元素宽度不确定时：

• 给父元素设置display:flex;justify-content:center;
• 给父元素设置display:flex;子元素设置margin:0 auto;
• 给父元素设置display:grid;justify-content:center;
• 给父元素设置display:grid;子元素设置margin:0 auto;

块级元素垂直居中

• 给父元素设置display:flex;flex-direction:column;justify-content:center;
• 给父元素设置display:flex;align-items:center;
• 给父元素设置display:flex;子元素设置margin:auto 0;
• 给父元素设置display:grid;align-content:center;
• 给父元素设置display:grid;子元素设置margin:auto 0;
• 元素高度确定时，
  • 父元素设置相对定位，子元素设置绝对定位，子元素top:50%;margin-top:-元素高度/2;
  • 子元素设置相对定位，子元素top:50%;margin-top:-元素高度/2;
• 元素高度不确定时，
  • 父元素设置相对定位，子元素设置绝对定位，子元素top:50%;translateY(-50%)/translate(0,-50%)
  • 子元素设置相对定位，子元素top:50%;translateY(-50%)/translate(0,-50%)

小技巧

水平垂直居中万能办法：

• 给父元素设置display:flex;justify-content:center;align-items:center;
• 给父元素设置display:flex;给子元素设置margin:auto;
• 给父元素设置display:grid;justify-content:center;align-content:center;
• 给父元素设置display:grid;给子元素设置margin:auto;

:nth-child(n)选择器：选中某个元素，该元素必须是某个父元素下的第n个子元素。
:nth-child(odd)选择奇数子元素
:nth-child(even)选择偶数子元素
第一个子元素 :nth-child(1)=:first-child
最后一个子元素 :nth-child(n)=:last-child

word-break：
break-all 所有字都可以分开 （推荐中文网站）
break-word 单词可以分开 （推荐英文网站）

给标签加display：inline-block属性会出bug，它的下面会有一个空隙，所以必须在后面再跟一个vertical-align:top。

::before和::after伪元素
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。