时间:2021-07-01 10:21:17 帮助过:38人阅读
本段分类方式部分参考了https://en.wikipedia.org/wiki/Comparisonoflayoutengines(CascadingStyleSheets)
*, E, .class, #id, ns|E
E F, E>F, E+F, E~F, E /for/ F
[attr], [=], [~=], [|=], [~=], [$=], [*=]
:link, :visited, :active, :hover, :focus
:root, :first-*, :last-*, :only-*, nth-*
:empty, :target, :disabled, :checked, :invalid, :required
::first-letter, ::first-line, ::before, ::after, ::selection
语法层面仅对属性作粗略分类,重点放在概念阶段(display, position, float均决定了布局基础模式)。
display
position, top, left, right, bottom, z-index
border-\, padding-\, margin-\ ,box-sizing, \-width, \*-height
float, clear
list-style-\*
border-collapse, border-spacing, caption-side, empty-cells, table-layout
overflow, clip-\*, visibility
字体排印是非常大一块,只是没有提出多少新概念,因此在这里仅整理属性。
对排印的模式及其解析请期待《字体排印在前端》(跳票太长时间,被PIA飞……
font-\*
white-space, line-break, hypens, word-wrap
direction, unicode-bidi, writing-mode
text-\*
这一段没有什么好说,由于效果直观,大家可在互联网上见到极多的示例。
color, opacity, background-\, \-shadow
transform-\, perspective-\, backface-visibility
transition-\, animation-\
cursor, outline
本段整理自标准http://www.w3.org/TR/css3-values
http://css-tricks.com/the-lengths-of-css/
cm, mm, in, pt, pc, px
相对字体em, rem, ex, ch
相对视口vw, vh, vmin, vmax
张鑫旭《CSS1-CSS3
还有鑫大大没有涉猎到的地方吗……
颜色如 red
系统颜色如 ButtonText
currentColor
RGB, #RRGGBB, rgb(), hsl()
rgba(), hsla(), transparent
ms, s
Hz, kHz
deg, grad, rad, turn
以上介绍均可见:张鑫旭《CSS/CSS3长度、时间、频率、角度单位大全》
dpi, dpcm, dppx
张鑫旭《博闻强识:了解CSS中的@ AT规则》
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
根据来源和重要程度,这样排序:
同级别,计算特化程度(specificity)
user agent为浏览器默认UA;
author即CSS中的声明;
user即style=。
!important可提升author / user层面的权重。
对应CSS2.1第8章 Box model,十分基础,介绍的文章很少出问题,就不多说了。
这几个概念很重要,会出现在标准中多次:
布局体系,决定元素出现在哪里及相互影响的方式。
CSS2.1的重心与难点。
本部分网络非常多谬误,很容易被各路水货带进坑。
最好参照W3Help《CSS 定位体系概述》和后面几章,对应标准CSS2.1《第9章 Visual formatting model》,《第10章 Visual formatting model details》来理解。
常规布局又分为三大块:
出现inline-box、line-box、block-box的概念,同时又提出了BFC和IFC。
普通流的高度计算流程,可一窥各个box影响布局的方式:
如果inline-box字号设置大于行内框的 'line-height' 设置,文字将溢出当前line-box,他可能造成多行时文字相互覆盖;
每个计算出的行框在垂直高度上排列没有间隙
表格布局很复杂,对外部的影响可属于Normal Flow,内部又区别于Normal Flow元素相互影响的方式。对应标准CSS2.1《第17章 Tables》
在常规流中的框,都属于一个格式化的上下文中:
这个概念的细则可见Smallni的《hasLayout && Block Formatting Contexts》
规则脱胎自文字排印,核心概念是vertical-align、line-height。
决定元素在定位上有重合时的相互覆盖情况。
CSS2.1时期的规则可参考W3Help《分层的显示( Layered presentation )》
进入CSS3以后,Stacking Context不仅仅由z-index创建,而这导致了它的复杂性。可参考@KevinYue 的一个回答。(这么棒的回答没人赞吗
参见quirksmode的《两个视口的故事【1】、【2】》。
视口相关,还有一个平常比较难发现的扩散行为,参见我在这里的探究。
不理解“包含块”的概念,永远无法完全理解width:100%、width:auto、top: 0;等究竟是相对何而言的。参考W3Help《包含块( Containing block )》:
Containing block
替换元素,即内容区块超出CSS格式化模型的元素,定义见W3C《第三章:定义》。在W3C的第十章有专门针对替换元素的定位进行阐述。
它们大多有一些固有宽/高/比例;
浏览器或多或少支持了一些影响内部内容渲染的CSS属性(如padding、line-height等),让它们少桀骜难训了那么一点点。但这种支持并没有定义在CSS标准中,因此有各个UA之间的差异。