CSS3知识

选择器

:first-line :first-letter 选择第一行，第一个字

not选择器 body.not(h1)

first-child, last-child 选择一个父元素中第一，最后一个子元素

nth-child(n)表示选择第n个元素

nth-of-type，只计算同类元素

only-child 只有一个元素时选择

:hover 鼠标经过 :focus 鼠标点击

在标题前添加嵌套连续编号

盒相关样式

block类型：例如div、p标签，占满一整行，可以设置长宽

inline类型：例如span标签，只占内容的宽度，一行可存在多个，不能设置长宽

inline-block类型：添加 display: inline-block，可设置长宽，也可允许一行存在多个。默认是底部对齐，vertical-align: top可设置为顶部对齐。可用于显示水平菜单。

overflow属性： overflow:hidden隐藏超出部分， overflow-scroll超出部分滚动显示，overflow:auto根据需要出现水平滚动或垂直滚动

box-sizing:border-box:添加属性后盒子不会被padding和盒子厚度撑开。

布局

多栏布局

div{
    width: 500px;
    
    column-count: 2;  #将内容分两栏
    -moz-column-count:2;   #firefox浏览器
    -webkit-column-count:2;   #谷歌浏览器

    column-rule: 1px solid red;   #中间线
    -moz-column-rule: 1px solid red
    -webkit-column-rule: 1px solid red;

    -webkit-column-gap: 3em;   #两栏间隔距离
}

盒布局

分三栏居中显示

弹性布局

中间部分自动补满