这几天学习H5微场景时，发现css知识有些模糊，记得学习CSS时是2007年，到今天已经13年。
之前有很多CSS3知识都是在项目中学习的，有些不常用的概念，也不用，所以也不知道。
如今CSS3使用日益广泛，这些概念如果不懂，会影响今后的工作。
今早翻出之前买的《css权威指南》第四版查阅了一下，将自己模糊的知识点总结如下，方便日后做项目时查阅。
1.在旧浏览器中使用新元素
有些浏览器在这些新元素出现之前就已经存在，因此无法识别。
document.createElement("main")
2.属性选择符
h1[class]{color:black} //选择class属性的所有h1元素
img[alt]{border:3px solid} //选择所有alt属性的图像元素
*[title]{}
a[href][title]{}
a[href="http://www.baidu.com"]{}
[foo|="bar"] 选择的元素有foo属性，且其值以bar和一个英文破折号开头，或者值就是bar本身
*[lang|="en"]{color:white} 选择lang属性的值为en或以en-开头的元素
如：
<h1 lang="en">Hello</h1>
<p lang="en-us">Hello</p>
<h4 lang="a-en">Hello</h4> //这个不会选择
[foo~="bar"] 选择的元素有foo属性，且其值是包含bar这个词的一组词
[foo*="bar"] 选择的元素有foo属性，且其值包含子串bar
[foo^="bar"] 选择的元素有foo属性，且其值以bar开头
[foo$="bar"] 选择的元素有foo属性，且其值以bar结尾
3.父元素、子元素、祖辈元素、后代元素
如果两个元素所在的层级是连续的，它们是父子关系
如果两个元素之间跨两个层级以上，它们是祖辈和后代的关系
4.选择子元素
选择一个元素的直接连接的子元素
h1 > strong{color:white}
<h1>abc<strong>etc</strong></h1>
<h1>abc<em>ray<strong>etc</strong></em></h1> //不会选择
5.选择紧邻同胞元素
h1 + p{color:black} //同属一个父元素
<div>
<h1></h1>
<p></p>
</div>
6.选择后续同胞
h2 ~ol{font-size:14px} //同属一个父元素
<div>
<h2>...</h2>
<p>...</p>
<ol>..</ol>
<ol>...</ol>
</div>
7.装饰首字母
p::first-letter{color:red} 只应用在块级元素上
8.装饰首行
p::first-line{font-size:16px;} 只应用在块级元素上
9.::before伪元素、::after伪元素
主元素与子元素（伪元素）之间的重叠关系
一个主元素可以有两个伪元素，在DOM中的顺序为主元素、::before伪元素、::after伪元素
叠加关系：主元素在最下面、中间是::before，最上面是::after
10.重叠
z-index是元素在z轴上所处的次序，z轴是一条垂直穿过屏幕的轴，以屏幕所在的平面为0，越靠近屏幕则值越大，越远离屏幕则值越小
序号大的叠加在序号小的图层之上
11.全局关键字
inherit 把元素某个属性的值设为与父元素同一属性的值一样，即强制继承
initial 把属性的值设为预定义的初始值，即重设
12.em与rem
em是相对font-size
rem是相对于根元素html
13.百分数与em
百分数始终根据继承自父元素的字号计算
1em=100%
14.视区的相关单位
视区宽度单位vw：根据视区的宽度计算，然后除以100。如果视区宽度是940px，那么1vw=9.4px
视区高度单位vh：根据视区的高度计算，然后除以100
视区尺寸最小值单位vmin：等于视区宽度或高度的1/100，始终取宽度和高度中较小的那个。如果宽为940px，高为650px，那么1vmin=6.5px
视区尺寸最大值单位vmax：等于视区宽度或高度的1/100，始终取宽度和高度中较大的那个。
15.计算值
如：让段落的宽度比父元素宽度的90%少2em
p{width:calc(90% - 2em);}
16.自定义字体@font-face
@font-face{
font-family:"Swit"; //描述符
font-weight:bold;
src:url("Swit.otf"),
url("Swit.eot") format("opentype"); //format告诉用户代理的字体是什么格式
}
EOT(openType)
OTF(openType)
SVG(Scalable Vector Graphics)
TTF(TrueType)
WOFF(Web Open Font Format)
17.字号继承
p{font-size:12px}
em{font-size:120%}
strong{font-size:135%}
12px * 120% = 14.4px
14.4px * 135% = 19.44px
18.缩进文本
text-indent 可以是负值
text-justify两端对齐
p{text-align:start;text-align-last}对齐最后一行
word-spacing单词间距
letter-spacing字符间距
tab-size设定制表符的宽度
word-break换行
overflow-wrap文本换行
网友评论