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

关于vertical-align的一些理解

写完 关于行高,基线的理解 这篇文章之后,终于到这篇文章了,只有深入了解了基线问题之后,才能搞懂vertical-align

在写这篇文章之前,vertical-align对我来说就是一个能调整图片和文字之间垂直问题的一个css,但是这个属性很奇怪,有时候有效,有时候无效,而且它奇奇怪怪的属性很难懂,于是我就试着使用绝对值,调得差不多就行了。为了未来攻破这个难关,于是这篇文章诞生了。

这是截取自w3cshool的图片

8F694468-5186-4DDF-A571-DA80F15467E1.png

注意:

  1. vertical-align只对inline/inline-block元素有效。

  2. vertical-align的定位只跟父元素有关,跟兄弟元素没直接关系。

baseline:如何确定父元素的基线呢?看这里关于行高,基线的理解 

sub/super:关于上下标,这更各个浏览器实现有关系,我的理解是文字的上线和文字的底线位置。

bottom:下标其实就是line-height = 0,不包括padding的地方,与元素顶端对齐

top:line-height 的位置,不包括padding的地方,与元素底端对齐

text-top/text-bottom:与字的顶线/底线对齐。

middle:基线+ex/2的位置 1ex = 0.5em

length:与基线做为起点加减具体位置,如:10px/-10px/1em

%:同样是以基线为起点,以line-height做为基数计算出来的偏移量,可以是正数负数。

参考文章:http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

《CSS权威指南》

关于行高,基线的理解

1.  基线、底线、顶线

行高

  • 行高指的是文本行的基线间的距离。

  • 基线并不是汉字的下端沿,而是英文字母"x"的下端沿

2.  行距、行高

行距和行高

3.  内容区

内容区

  • 底线和顶线包裹的区域,实际中不一定看得到,但却是存在。

4.  行内框

行内框

  • 行内框只是一个概念,它无法显示出来,但是它又确实存在

  • 它的高度就是行高

  • 在没有其他因素(padding)影响的时候,行内框等于内容区域

5.  行框

行框

  • 行框(line box)。同行内框类似,行框是指本行的一个虚拟的矩形框

  • 行框高度等于本行内所有元素中行高最大的值

完全参考: http://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html#m1

关于Flex布局的研究

关于Flex,其实最关心的是它的兼容性。

DBC82C4F-1250-497C-89D2-56003A5FFDA1.png

在android4.3以前要加-webkit,兼容性其实还不错。我故意找了个android4.1的机子测了一下,能正常表现。天猫都已经全面使用这种布局方式,应该没啥兼容问题了吧。

demo

主要关心的是一下两个主要个属性:

  1. display:box

  2. box-flex:[int]

其次是对齐的属性:

box-orient:horizontal | vertical | inline-axis | block-axis | inherit  横排还是竖排

box-direction:normal | reverse | inherit   排序顺序

box-align:start | end | center | baseline | stretch 对齐方式,其中baseline是一个知识点

叠层上下文学习笔记

还是看了这篇文章 http://www.cnblogs.com/qieguo/p/5421252.html 

中间提到了 叠层上下文。。但究竟是什么东西?于是细细研究一番

我的之前的初略了解就是:z-index 和父子元素引起的谁拍在最前面的问题。

其实完全不是这样~我们布局的时候会发生除了z-index,还有display:flex,position:absolute,relative,option,transform等等属性的印象导致元素被遮挡。很多时候,我们不知道为什么,只是调一下参数,换一种解决方式,显示正确就完事了。但要了解其中的原理,这就跟叠层上下文有莫大关系了。

层叠上下文的特性

层叠上下文元素有如下特性:

层叠上下文的层叠水平要比普通元素高;

层叠上下文可以阻断元素的混合模式;

层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。

每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。

每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。

普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义

叠层上下文是需要触发条件的,创建叠层上下文元素有以下3种途径:

  1. html跟元素。(这东西默认就创建了,也就是所有页面至少都有一个叠层上下文元素)

  2. z-index值为数值的定位元素(position:relative/position:absolute,不包括fixed)

  3. 一些css3属性,主要有:

1.z-index值不为auto的flex项(父元素display:flex|inline-flex).

2.元素的opacity值不是1.

3.元素的transform值不是none.

4.还有一些我不常用的就不列出来了

叠层上下文元素创建之后,需要参考张鑫旭这张大图 

3402474-4764960848e512b4.png

下面对以上3种方法进行一些demo。

1.第一个就没啥好说的啦

2.定位:demo

要非常注意1.我们经常用left,top相对于有relvative,absolute,fixed的祖先元素是用于定位。但是,用于叠层,主要是看叠层上下文元素;

                  2.只要遇到带position:absolute/relvative; z-index:int  就要注意了。无论父级是谁,有没有position:absolute/relvative.层级都只看z-index的值。

3.css3的display:flex  (这个暂时不谈,对flex布局暂时没研究)

  flex: demo

   opacity:demo

  transform: demo

叠层上下文之间的比较(demo

  1. 看z-index

  2. 后来者居看 

结论:我们日常切图的时候,很多时候用z-index分层,其实是不必要的,用叠层上下文的知识就可以达到目的。

参考文章 http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

                http://www.cnblogs.com/bfgis/p/5440956.html

                https://www.jianshu.com/p/8645b29f96b6

BFC布局

以前不十分清楚BFC布局,大概就是盒子模型的浮动布局吧,其实完全不是

BFC有以下特性:

  1. 内部的Box会在垂直方向,从顶部开始一个接一个地放置。

  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

  4. BFC的区域不会与float box叠加。

  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。

  6. 计算BFC的高度时,浮动元素也参与计算。

触发BFC布局的要求

  • float的值不为none。

  • overflow的值为auto,scroll或hidden。

  • display的值为table-cell, table-caption, inline-block[ie6/7]中的任何一个。

  • position的值不为relative和static。

BFC的应用场景,也就是说能解决什么问题:

1.解决margin叠加问题,用到特性5  (叠加问题详细可以看这http://www.w3school.com.cn/css/css_margin_collapsing.asp)

2.用于布局,用到特性4,能实现二栏布局,而且其中一栏可以不定宽,另一栏定宽

3.用于清除浮动,计算BFC高度.  用到特性6,是除了:after{content:"",clear:both}以外的一种解决方案

参考 文章:

http://www.html-js.com/article/1866

 http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

css渲染阻塞测试

由于m.360zfw.com在google pagespeed的测试中 

提示对于js阻塞,网上已经有很多文章,但是css阻塞的描述较少,于是对css阻塞进行深入研究。
写了一个测试demo,代码如下 

late-css.php
<?php
header("Content-type: text/css; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = 'div{background:blue}';
echo $str;
?>
late-js.php
<?php
header("Content-type: text/js; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = 'document.write("I'm the lazy note")';
echo $str;
?>
index3.html
<html>
<head>
    <style>
         div{background:red;width:200px;height:200px;}
    </style>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</head>
<body>
    <div></div>
</body>
</html>

运行代码

 运行demo呈现的是页面需要等待10秒才能打开,而且直接打开的是蓝色方块。(证明css在页面中存在阻塞,但不确定是在解析DOM时阻塞还是渲染时阻塞)

index4.html
<html>
<head>
    <style>
         div{background:red;width:200px;height:200px;}
    </style>
</head>
<body>
    <div></div>
</body>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</html>

运行代码

 运行demo呈现的是页面需要等待10秒才能打开,而且直接打开的是蓝色方块。(证明css在页面中存在的是阻塞渲染)

 那么在我们设计页面的时候css,尽量将首屏显示的css直接放在html上面是最合适的,但是实际情况很难做到,比如一些导航的样式,未来在css文件中实现CDN,不得不将css放在外链中。

index.html
<html>
    <head>
        <style>
            div{background:red;width:200px;height:200px;}
        </style>
        <link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
    </head>
    <body>
        <div><script src="/lab/late/late-js.php?time=10"></script></div>
    </body>
    <style>
        div{background:yellow;}
    </style>
</html>

运行代码   (证明js,阻塞DOM解析,CSS作用于DOM解析到哪里,就渲染到哪里)

猜猜这是会显示什么? 


先白色5秒,再蓝色5秒,再黄色 

index2.html
<html>
    <head>
        <style>
            div{background:red;width:200px;height:200px;}
        </style>
    </head>
    <body>
    <div><script src="/lab/late/late-js.php?time=10"></script></div>
    </body>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
    <style>
        div{background:yellow;}
    </style>
</html>

运行代码 (证明css在下载时,不阻塞DOM解析,但是下载时阻塞渲染)

先红色,再黄色 

总结:CSS和JS的下载都不会被解析阻塞,CSS下载时会阻塞渲染, 外部样式会阻塞后续脚本执行,直到外部样式加载并解析完毕

           1.没遇到JS阻塞的情况,CSS只会在DOM解析完后渲染。

           2.遇到JS阻塞的情况,当DOM一旦遇到JS阻塞时,就会触发CSS渲染

那么现在有一个问题,css写在body前和body后有什么区别,

          由上述可见,CSS无论是用STYLE标签还是link外链,

          如果没有遇到jS阻塞,放哪里都一样,

          如果遇到js阻塞,把CSS写在BODY上面,不会出现二次渲染,把CSS写在BODY下面,JS阻塞时,会出现一次渲染,等阻塞完毕会出现二次渲染(除非外链的CSS下载时间比阻塞时间长)。

页面渲染中的CSS阻塞问题探索

由于m.360zfw.com在google pagespeed的测试中 提示
E4559CD1-F22D-4222-92ED-E1784EE8A537
对于js阻塞,网上已经有很多文章,但是css缺比较少,于是对css阻塞进行深入研究。
写了一个测试demo,代码如下
<html>
<head>
 <style>
 div{background:red;width:200px;height:200px;}
 </style>
 <link rel="stylesheet" href="http://www.luoyongjie.cn/sleep.php">
</head>
<body>
 <div></div>
</body>
</html>
<?php
header("Content-type: text/css; charset=utf-8");
sleep(10);
$str = 'div{background:yellow}';
echo $str;
?>
运行demo呈现的想象是页面需要等待10秒才能打开,而且直接打开的是黄色方块。(证明css在页面中存在阻塞)
那么在我们设计页面的时候css,尽量将首屏显示的css直接放在html上面是最合适的,但是实际情况很难做到,比如一些导航的样式,未来在css文件中实现CDN,不得不将css放在外链中。