之前都知道css的link在页面会柱塞页面渲染,但是css还有一种引入方式 @import
<style>
@import url("CSS文件");
</style>
可以用style标签内嵌的方式引入,如果这个css文件有延迟,会阻塞渲染吗?
做一个实验看看 [demo]
现象:1. 页面2秒后显示红色
2. 尽管import的是蓝色在后面,div显示红色
结论:1.import引入的css也会阻塞页面渲染
2.improt的css的权重总是比link引入的低
之前都知道css的link在页面会柱塞页面渲染,但是css还有一种引入方式 @import
<style>
@import url("CSS文件");
</style>
可以用style标签内嵌的方式引入,如果这个css文件有延迟,会阻塞渲染吗?
做一个实验看看 [demo]
现象:1. 页面2秒后显示红色
2. 尽管import的是蓝色在后面,div显示红色
结论:1.import引入的css也会阻塞页面渲染
2.improt的css的权重总是比link引入的低
容器和容器内(position:relative)的定位元素(position:absolute)
我们都认为定位元素left,top相对于容器的左上角,但是左上角这个概念很模糊,因为容器和定位元素他们都有盒子模型。下面做个测试
结论:定位元素到容器的距离是定位元素的外边距(margin的左上角)到容器的内边距的左上角(内边框)的距离。
相信很多人都知道DOMContentLoaded,也就是$.ready(),是在页面DOM构建完之后触发的。
今天突然想到一个问题,这个DOM构建完是指HMTL解析器解析成DOM之后算是构建完,还是渲染的最后一步绘图结束后算是构建完。
直接看图吧:
也就是DOMContentLoaded是在 (1) 还是(2)阶段触发呢?
看[demo],在demo中可以看到黄色的DIV出现在弹框之后;
证明我们常说的DOMContentLoaded,正确的理解是页面首次渲染前触发(发现这个弹框也不准,这个结论还不算正确)
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;} 作用于第一行
写完 关于行高,基线的理解 这篇文章之后,终于到这篇文章了,只有深入了解了基线问题之后,才能搞懂vertical-align
在写这篇文章之前,vertical-align对我来说就是一个能调整图片和文字之间垂直问题的一个css,但是这个属性很奇怪,有时候有效,有时候无效,而且它奇奇怪怪的属性很难懂,于是我就试着使用绝对值,调得差不多就行了。为了未来攻破这个难关,于是这篇文章诞生了。
这是截取自w3cshool的图片
注意:
vertical-align只对inline/inline-block元素有效。
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.w3school.com.cn/cssref/pr_pos_vertical-align.asp
《CSS权威指南》
行高指的是文本行的基线间的距离。
基线并不是汉字的下端沿,而是英文字母"x"的下端沿
底线和顶线包裹的区域,实际中不一定看得到,但却是存在。
行内框只是一个概念,它无法显示出来,但是它又确实存在
它的高度就是行高
在没有其他因素(padding)影响的时候,行内框等于内容区域
行框(line box)。同行内框类似,行框是指本行的一个虚拟的矩形框
行框高度等于本行内所有元素中行高最大的值
完全参考: http://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html#m1
关于Flex,其实最关心的是它的兼容性。
在android4.3以前要加-webkit,兼容性其实还不错。我故意找了个android4.1的机子测了一下,能正常表现。天猫都已经全面使用这种布局方式,应该没啥兼容问题了吧。
主要关心的是一下两个主要个属性:
display:box
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种途径:
html跟元素。(这东西默认就创建了,也就是所有页面至少都有一个叠层上下文元素)
z-index值为数值的定位元素(position:relative/position:absolute,不包括fixed)
一些css3属性,主要有:
1.z-index值不为auto的flex项(父元素display:flex|inline-flex).
2.元素的opacity值不是1.
3.元素的transform值不是none.
4.还有一些我不常用的就不列出来了
叠层上下文元素创建之后,需要参考张鑫旭这张大图
下面对以上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)
看z-index
后来者居看
结论:我们日常切图的时候,很多时候用z-index分层,其实是不必要的,用叠层上下文的知识就可以达到目的。
参考文章 http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/