css总结

1. .text-align可以对所有行内元素起作用，包括图片。对没有设置宽高的块元素起作用
2. input 去掉上焦点时边框 input{ outline:none}  设置上焦点边框样式 input:focus{xxxxx} 
3. input输入框会经常用到文字缩进 text-indent
4. 块级元素并排不换行：display:inline或者float:left.子元素的父亲宽度一定要足够大，子元素的爷爷即窗口，固定宽度，并且overflow:hidden
5. 文字和图片并排转化为行内块级元素，每个元素都设置vertical-align:middle
6. li高度由内部内容撑起，要设置，li{overflow:auto}.默认值是visiable,将内部元素显示在li之外。auto可实现自适应高度
7. user-select:auto=>如果浏览器允许，则可以选择文本。text==>可以选取文本。none==>防止文本被选取。all==>单击选取文本，而不是双击
8. white-space:nowrap 文字不换行 word-wrap:break-word 长单词换行 word-break:break-all 换行不截断单词
9. overflow: hidden;text-overflow: ellipsis;white-space: nowrap;单行文本超出省略号显示
10. overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;多行文本超出省略号显示
11. css选择器 兄弟元素之间 用~。#read-more:checked ~ #content 与#read-more标签选中的同级的#content元素
12. perspective 设定透视深度 backface-visibility 隐藏背面 （翻牌效果）
13. :hover设置的样式只能对目标元素有效，不能改变目标元素的子元素的样式，如果要改变子元素的样式还需要组合选择器
14. 不要随便用js修改document的宽度，这样会出现滚动条
15. translateX移动的距离始终是以元素起始位置为原点，无论以后改变tanslateX的值多少次，始终都是以初始位置为原点在X轴方向的偏移量。
16. border-style：dotted默认四条边都是圆点，加上double，double在后面border-style:dotted double只有上下2边是圆点；double在前面border-style:double dotted左右2条边是圆点。
17. 文字也可以当做背景图片，将文字颜色设为透明，文字容器的背景设置成渐变。

    
    .proverb{
      background-clip:text;
      color:transparent;
      background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

18. 全网置灰：filter:grayscale(1)