样式(CSS规范,CSS2.0,盒子模型,书写规范 ...)

CSS 规范

• 用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。
• 为选择器分组时，将单独的选择器单独放在一行。
• 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
• 声明块的右花括号应当单独成行。
• 每条声明语句的 : 后应该插入一个空格。
• 为了获得更准确的错误报告，每条声明都应该独占一行。
• 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
• 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。
• 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。
• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
• 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
• 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
• 为选择器中的属性添加双引号，例如，input[type="text"] 只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
• 避免为 0 值指定单位，例如，用 margin: 0 代替 margin: 0px

该规范摘录于 https://www.runoob.com/w3cnote/html-css-guide.html#css

层叠和继承

CSS 样式来源：

• 创作人员:link(外部引用) < style(style 元素) < style:(style 属性)
• 读者:页面中会提供一些让用户自定义字体大小颜色等的快捷键
• 代理:浏览器

CSS的层叠&&继承

• 层叠

  1. 重要性(Importance)
     • !important 语法可以优先于其他规则,该语法会改变样式层叠的正常工作
     • 重载 !important 的唯一方法是在当前后面规则 或者是有更高专用性的规则中添加 !important
     • 语法冲突时适用顺序(从低至高)
       1. 代理样式声明
       2. 读者普通声明
       3. 创作普通声明(link, style, style:)
       4. 创作重要声明
       5. 用户样式重要声明
  2. 专用性(Specificity)
     • 专用性基本上是衡量选择器的具体程度的一种方法,也就是选择器优先级
     • 专用性衡量
       1. style: -> 1000
       2. ID->100
       3. class || attr(属性选择器) || psdudo class(伪类)->10
       4. element->1
       5. * + > ! '' :not->0
     • 计算规则
       • !important>style:>id>class>element>通配符>inherit>default
       • 选择器中出现一个加 1 分
       • 多个选择器具有相同的重要性和专用性,则按照书写顺序
  3. 书写顺序(Source order)
     • 如果出现重要性与专用性一致,则就看最后一个因素,书写在后面的更优先
  • 这些层叠只在作用于元素的属性之上,该条规则并没有参与

• 继承

  • inherit:显示指定属性继承至父元素
  • initial:显示指定属性与 defalut 一致,如果 default 认样式表中没有设置值,并且该属性是自然继承的,那么该属性值就被设置为 inherit IE 不支持
  • unset: 重置为其自然值,即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial
  • revert: 设置成自定义样式所定义的属性(如果被设置),否则属性值被设置成 defalut,IE 不支持
  • all 属性可以控制每一个元素的继承性,属性值为以上 4 个
    • unicode-bidi 与 direction 除外

盒模型

• 盒属性

  • margin: 外边距塌陷(margin collapsing),也叫外边距折叠,当两个盒子相接触,边距取最大值
  • border
  • padding
  • width && height: 内容框宽度与高度,以及子元素的框大小(全部大小)
  • width+padding-right+paddig-left+border-right+border-left之和是盒模型实际宽度

• 盒要点

  • background-color && background-image 默认到 border 外边缘,该行为可以用 background-clip 改变
  • overflow 如果实际内容比盒内容宽度(content box)大,将会溢出出现滚动条
    • auto
    • hidden
    • visible 默认
  • height 是不遵守百分比的高度,高度始终取决于内容高度,除非父元素是绝对高度
  • border 也不遵守百分比
  • box-sizing 可以用来调整盒模型
  • outline 不包括在内

• 三种盒类型

  • block box
  • inline box
  • inline-block box

• 三种盒子模型

  • content-box (默认值,标准), width 不包括 padding 和 border
  • border-box width 包括 padding 和 border
  • padding-box(css3) width 只包括 padding

兼容性

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。

W3C 的规范盒子模型是为 content-box 但 IE5.X 和 6 在怪异模式中使用自己的非标准模型可以理解为 border-box

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。

不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

解决IE8及更早版本不兼容问题可以在HTML页面声明 即可

CSSOM(CSS 对象模型)

CSS 解析

• 优先级

  1. id选择器#myid
  2. 类选择器.myclassname
  3. 标签选择器div,h1,p
  4. 相邻选择器h1+p
  5. 子选择器ul > li
  6. 后代选择器li a
  7. 通配符选择器*
  8. 属性选择器a[rel="external"]
  9. 伪类选择器a:hover, li:nth-child
  • 最常用的选择器是类选择器。
  • li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。
  • 极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。

• 解析(CSSOM)

  • 获取: CSS 解析器获取页面中 CSS, 可以是 link, style, style:
  • 解析规则(解析CSS选择器用于生成浏览器可绘制的 CSS 数据结构)
    • 从右向左解析,如sizzle选择器引擎
    • CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行浏览器 paint
  • 生成 CSS 数据结构
    • margin: 10px; 生成 margin-top: 10px; margin-right: 10px; margin-bottom:10px; margin-left: 10px;,也就是将属性都转换成普通属性写法
    • 计算属性单位值变成页面上的绝对单位值, getComputedStyle() 可获取计算属性
    • 级联(层叠样式) CSS 样式来源可以是多个,所以解析器用样式计算规则,取优先级最高的那个属性值,并层叠其它样式
    • 然后用样式表来源规则排序 style: > style > link, 得到最后的样式
  • 构建 CSSOM 与 DOM Tree 一起 paint

• 性能提升(减少浏览器 style 查找)

  1. 避免使用通用选择器
  2. 避免使用标签或 class 选择器限制 id 选择器
  3. 避免使用标签限制 class 选择器
  4. 避免使用多层标签选择器。使用 class 选择器替换，减少css查找
  5. 避免使用子选择器
  6. 使用继承
  7. 不必要的样式,避免给某些有默认样式的元素再赋同样的样式,img,input,button{vertical-align:baseline;}

小结

1. 在现代浏览器中大多数的选择器速度都非常快,因此使用不同的选择器来优化性能是没有必要的
2. 过度使用的样式与从未使用的样式所占比例比选择任何选择器消耗的性能更多.所以将CSS库进行拆分,那可能是更好的选择;
3. 如果你的CSS库由多人编写,那么可以使用UnCSS这样的工具来自动删除未被使用的样式;
4. 明智的使用花括号内的属性才能赢的性能上的收益.在优化时,首先寻找”昂贵”的样式,会为你和用户带来最大的收益

参考链接

• 菜鸟教程-CSS 规范
• W3C-CSS选择器汇总
• Web性能优化之CSS性能优化篇
• 浏览器解析 CSS 样式的过程
• W3C 层叠样式表规范