《CSS权威指南》重点笔记

CSS这东西很多人都懂,都是一知半解,能做出效果就行。but~相信这都是入门级的伪前端。因为我曾经也是,大学开始到腾讯离职后都认为CSS很简单,认真学下来,Css还是很有禅意的。

一下是我阅读《CSS权威指南》时的一些重点,或者是一些平时忽略的细节,按章节区分

第1章:

    1.建议每一个css结尾时都加上;号

       不建议 div{color:red;background:red}

       建议div{color:red;background:red;}

第2章:

  1. 所有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章

  1. 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

        B21F0491-05B4-4A4A-867E-DB067891A13E.png

   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;} 作用于第一行

发表评论