CSS这东西很多人都懂,都是一知半解,能做出效果就行。but~相信这都是入门级的伪前端。因为我曾经也是,大学开始到腾讯离职后都认为CSS很简单,认真学下来,Css还是很有禅意的。
一下是我阅读《CSS权威指南》时的一些重点,或者是一些平时忽略的细节,按章节区分
第1章:
1.建议每一个css结尾时都加上;号
不建议 div{color:red;background:red}
建议div{color:red;background:red;}
第2章:
-
所有class 和 id 都区分大小写。[demo]
第3章:
1. css选择器的优先级用0,0,0,0标示;
第一个0,代表标签上的style
第二个0,代表id
第三个0,代表class
第四个0,tagName和伪元素
如h1{color:red} 0,0,0,1 ,pem{color:red} 0,0,0,2
2.带style中!important标志权重比内嵌style还高,内嵌style+!important权重最高 [demo]
第4章:
关于em单位的理解:在设置字体大小时,em的值会相对于父元素的字体大小,除了设置字体以外,比如width,padding,margin,border时用em,是相对于当前字体,并不是父元素[demo]
第5章:[demo]
1.serif字体 字体成比例(即不同文字如M和i所占据的宽度不一样),而且有上下短线
Sans-serif字体 字体成比例,而去没有上下短线
Monospace 字体不成比例,有固定宽度,不一定有短线
2.一般font-weight:normal == 400/bold == 700
font-weight:bolder //比所继承值更粗的一个字体加粗
3.font-size可以继承,不过继承的是计算值而不是百分数;
p{font-size:12px;}
em{font-size:120%;}
strong{font-size:135%}
12px * 120% = 14.4px;浏览器可能认为是15 或者 14
14.4px*135% = 19.44px;浏览器可能认为是20 或者 19
4. 在font简写中要注意:font-size,font-family必须存在,而且位置必须font-size在前 ,其它值可选
font:[[font-style||font-weight||font-variant]?font-size,font-family] [demo]
5.字体匹配规则:
1.用户本地有一个字体数据库。
2.根据font-family查询数据库,如果查得到
a.匹配font-style
b.匹配font-variant
c.匹配font-weight(这个匹配不可能失败)
d.匹配font-size(这个匹配可能有误差,或20%,或10%根据浏览器而异)
3.如果第二步匹配失败,接着下一个代替字体循环上一个步骤。
4.如果匹配到一个字体,但是没有版权,接着下一个代替字体循环步骤2。
5.如果都没匹配成功,则按照通用字体系列选择默认字体,尽可能的显示这个元素。
例如:
font-family:"Microsoft YaHei","宋体",Arial,Helvetica,sans-serif;
某ios不含Microsoft YaHel,或没有版权,则接着到宋体,如果没匹配成功,则一直到sanf-serif的通用字符系列选择默认字体
第6章
-
line-height 可以使用缩放因子,取代em,避免继承问题[demo]
第7章
1.如果设置width,margin-left,margin-right中的某个值为auto,余下的两个属性为特定值,则设置auto的属性会自动扩张,直到width+margin-left+margin-right=父元素width;以前认为设置auto,表示默认,或者0,或者反正效果出来了就行。。。真TMD伪前端啊 [demo]
2.如果border-style被设置了,则border-width:为medium. 到底是多宽由浏览器定义。[demo]
3.vertical-align会改变行内框高度,前提是这个行内框顶端已经是行中最高点[demo]
4.vertical-align:middle 是将元素行内框的垂直重点与父元素基线上0.5ex处的一点对齐。可理解为x的中间位置。[demo]
5.内边距和边框不改变行高 [demo]
6.行内元素包含块元素,不合法,如:
<a style="display:block">
<p style="display:inline">I'm a block</p>
</a>
即使改变显示角色 也不会使以上标记变得合法。display之所以得名是因为它影响的是元素如何显示,而不影响它是何种元素。
7.width 和 text-align不能应用于行内元素
第8章:
1.百分数值定义为相对父元素的width,这不仅应用于左右外边距,也应用于上下外边距。[demo]
2.如果边框没有声明颜色,它将于文本颜色color颜色相同。[demo]
3.元素的背景会伸延至边框,background-position默认值在内边距的左上角 [demo]
4.border-style:transparent; 透明边框 [demo]
5.百分数值定义为相对父元素的width,这不仅应用于左右内边距,也应用于上下内边距。原理同(1)一样[demo]
6.可以向图像应用内边距[demo]
第9章:
1.background-position如果用百分比表示,那么百分比同时应用于元素和图像[demo]
2.296页的一幅图,总觉得有问题,为什么div4会掉下去而不是叠在div3下面呢?[demo]
3.如果一个浮动元素在内容流过的边上有负外边距,文字会叠在浮动元素上边[demo]
4.带clear:both的元素上外边距之上增加的margin-top在float的上内边距以内是没有效果的。[demo]
5.对于一个非根元素,如果其position值是relative,则包含块就是它的父元素
6.关于left,top,right,bottom的定位,是在包含块的左上角边框内边界,到定位元素的外边距边界[demo]
7.定位元素的高度和宽度可以由这些定位属性偏移隐藏确定,仅适用于absolute定位的元素 [demo]
8.如果一个设置了visibility为hidden的元素的子元素设置了visibility为visible,那么这个子元素也是可见的。 [demo]
9.绝对定位元素的left,top,right:auto时,与其“静态”位置一致。注意(auto不是一般认为的0) [demo]
10.如果left,width和right都设置auto,那么左边界位于其静态位置,width则设置为“收放得正好合适”[demo]
11.绝对定位元素中,若margin:0 auto,左右外边距auto,同时left,right都有固定值,那么auto会使元素相对于left,right居中,同理可以垂直居中。[demo]
第12章:
1.CSS2.1明确定义:before,:after,如果主体是块级元素,那么只能display:nine,inline,block。
如果主体是行内元素,那么display只接受none和inline;
附录:
:first-letter h1:first-letter{color:red;} 作用于第一个字母
:first-line p:first-line{color:red;} 作用于第一行