文档章节

深入CSS,让网页开发少点“坑”

葡萄城技术团队
 葡萄城技术团队
发布于 2015/12/03 16:14
字数 3459
阅读 57
收藏 11
点赞 0
评论 0

 image

 通常我们在学习CSS的时候,感觉很容易掌握,却常常在实际应用中碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Stacking Context等诸多高级特性。让你更加深入的了解CSS。

CSS 优先级

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。如果给一个P标签增加一个类(Class),运行后Class 中的部分属性并未发生改变,及CSS选择器存在优先级问题。

选择符优先级

常见的选择器种类:

  • 内联样式(Inline Style),如<span style="color:black">...</span>;
  • ID选择符(ID selectors),如#id;
  • Class选择符(Class),如 .class {...}、[href=‘’]、:hover;
  • 标签选择符(Tag),如 div,:before

每一类选择器的权值不相同,各选择器的优先级是由权值决定的,

  • 内联样式:1,0,0,0
  • ID 选择符:1,0,0
  • Class 选择符:1,0
  • Tag选择符:1

 image

 来源优先级顺序,如图所示

imageimage

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。

CSS 优先级法则:

  1. 选择器都有一个权值,权值越大越优先;
  2. 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
  3. 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
  4. 继承的CSS 样式不如后来指定的CSS 样式;
  5. 在同一组属性设置中标有“!important”规则的优先级最大;

CSS常用模型

 盒子模型(Box Model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

image

盒子模型相关CSS属性元素内容(element content)、宽度及高度(Width/Height)、内边距(padding)、边框(border) 和 外边距(margin) 。

在 CSS 中,width 和 height 指的是内容区域(element)的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素。需要的属性如下:

 

基本属性

  • Width/Height
  • Padding
  • Margin
  • Boder
  • Outline
  • 偏移量属性
    • Top/Left/Bottom/Right
  • 和.NET WinForm的区别:
    • 默认情况下Width/Height不包含Padding
    • Margin/Padding属性的四个值的顺序是top right bottom left (顺时针)

 

 所有东西可视为盒子模型

image

 

纵向Margin合并

如果<p>的纵向margin是12px,那么两个<p>之间纵向的距离是多少?按常理来说应该是 12 + 12= 24px,但是答案仍然是 12px。因为纵向的margin是会重叠的,大的会覆盖下的。

image

 

Position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。以下是Posistion属性取值范围如下:

    • Static 普通流布局(Normal flow) ,默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    • Relative 支持偏移量属性的普通流布局 ,生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
    • Absolute 在容器元素内绝对定位的布局 ,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    • Fixed 在显示范围内的绝对定位布局,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

 

image

Float属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

image

 

Stacking context

提供z-index栈空间特性并影响子元素渲染顺序的结构,称之为stacking context。

image

 

浏览器会给符合下面规则的dom元素分配一个Stacking context。

  • root元素(html)
  • 「已定位」元素(position: absolute or relative)且 指定z-index值非auto的元素
  • flex item且指定z-index值非auto的元素
  • opacity小于1的元素
  • 指定transform值非none的元素
  • 指定mix-blend-mode值非normal的元素
  • 指定filter值非none的元素
  • 指定isolation值为isolate的元素
  • 在will-change属性上指定值为上述列表任意属性的元素
  • 指定-webkit-overflow-scrolling值为touch的元素

z-index

image

 

Stacking order

  • 根据DOM树结构,具有stacking context的元素会形成一个树形结构。
  • 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
  • z-index 0级元素中,有stacking context的元素的叠加顺序靠前 
  • 以上条件不能区分时,使用DOM树中的顺序决定叠加顺序。

 

image

 

性能

image

 

像素渲染流水线

提升性能需要在构造流水线中每个元素都需要注意:

  • Style
    • 降低样式选择器的复杂度
    • 减少需要执行样式计算的元素的个数
  • Layout
    • 尽可能避免触发布局
      • 几乎所有的布局都是在整个文档范围内发生的。
      • 使用flexbox替代老的布局模型
      • 避免强制同步布局事件的发生
      • 避免快速连续的布局
  • Paint
    • 除了transform和opacity之外,修改任何属性都会触发绘制
    • 提升移动或渐变元素的绘制层
    • 减少绘制区域
    • 简化绘制的复杂度

CSS 选择器性能

  • 一个选择器的最右端是这个选择器的关键条件(Key Selector)
  • 浏览器按照从右向左的方式匹配选择器,因此应该将更具体的条件尽可能放在右端。
  • 避免使用*规则
  • 选择器尽可能短
  • ID选择符前面不要再加限定符
  • 没必要用Tag选择符限定Class选择符

 

 

 原文链接:http://slides.com/colinhan/deck-2-3#/5

 image

 通常我们在学习CSS的时候,感觉很容易掌握,却常常在实际应用中碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Stacking Context等诸多高级特性。让你更加深入的了解CSS。

CSS 优先级

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。如果给一个P标签增加一个类(Class),运行后Class 中的部分属性并未发生改变,及CSS选择器存在优先级问题。

选择符优先级

常见的选择器种类:

  • 内联样式(Inline Style),如<span style="color:black">...</span>;
  • ID选择符(ID selectors),如#id;
  • Class选择符(Class),如 .class {...}、[href=‘’]、:hover;
  • 标签选择符(Tag),如 div,:before

每一类选择器的权值不相同,各选择器的优先级是由权值决定的,

  • 内联样式:1,0,0,0
  • ID 选择符:1,0,0
  • Class 选择符:1,0
  • Tag选择符:1

 image

 来源优先级顺序,如图所示

imageimage

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。

CSS 优先级法则:

  1. 选择器都有一个权值,权值越大越优先;
  2. 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
  3. 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
  4. 继承的CSS 样式不如后来指定的CSS 样式;
  5. 在同一组属性设置中标有“!important”规则的优先级最大;

CSS常用模型

 盒子模型(Box Model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

image

盒子模型相关CSS属性元素内容(element content)、宽度及高度(Width/Height)、内边距(padding)、边框(border) 和 外边距(margin) 。

在 CSS 中,width 和 height 指的是内容区域(element)的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素。需要的属性如下:

 

基本属性

  • Width/Height
  • Padding
  • Margin
  • Boder
  • Outline
  • 偏移量属性
    • Top/Left/Bottom/Right
  • 和.NET WinForm的区别:
    • 默认情况下Width/Height不包含Padding
    • Margin/Padding属性的四个值的顺序是top right bottom left (顺时针)

 

 所有东西可视为盒子模型

image

 

纵向Margin合并

如果<p>的纵向margin是12px,那么两个<p>之间纵向的距离是多少?按常理来说应该是 12 + 12= 24px,但是答案仍然是 12px。因为纵向的margin是会重叠的,大的会覆盖下的。

image

 

Position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。以下是Posistion属性取值范围如下:

    • Static 普通流布局(Normal flow) ,默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    • Relative 支持偏移量属性的普通流布局 ,生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
    • Absolute 在容器元素内绝对定位的布局 ,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    • Fixed 在显示范围内的绝对定位布局,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

 

image

Float属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

image

 

Stacking context

提供z-index栈空间特性并影响子元素渲染顺序的结构,称之为stacking context。

image

 

浏览器会给符合下面规则的dom元素分配一个Stacking context。

  • root元素(html)
  • 「已定位」元素(position: absolute or relative)且 指定z-index值非auto的元素
  • flex item且指定z-index值非auto的元素
  • opacity小于1的元素
  • 指定transform值非none的元素
  • 指定mix-blend-mode值非normal的元素
  • 指定filter值非none的元素
  • 指定isolation值为isolate的元素
  • 在will-change属性上指定值为上述列表任意属性的元素
  • 指定-webkit-overflow-scrolling值为touch的元素

z-index

image

 

Stacking order

  • 根据DOM树结构,具有stacking context的元素会形成一个树形结构。
  • 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
  • z-index 0级元素中,有stacking context的元素的叠加顺序靠前 
  • 以上条件不能区分时,使用DOM树中的顺序决定叠加顺序。

 

image

 

性能

image

 

像素渲染流水线

提升性能需要在构造流水线中每个元素都需要注意:

  • Style
    • 降低样式选择器的复杂度
    • 减少需要执行样式计算的元素的个数
  • Layout
    • 尽可能避免触发布局
      • 几乎所有的布局都是在整个文档范围内发生的。
      • 使用flexbox替代老的布局模型
      • 避免强制同步布局事件的发生
      • 避免快速连续的布局
  • Paint
    • 除了transform和opacity之外,修改任何属性都会触发绘制
    • 提升移动或渐变元素的绘制层
    • 减少绘制区域
    • 简化绘制的复杂度

CSS 选择器性能

  • 一个选择器的最右端是这个选择器的关键条件(Key Selector)
  • 浏览器按照从右向左的方式匹配选择器,因此应该将更具体的条件尽可能放在右端。
  • 避免使用*规则
  • 选择器尽可能短
  • ID选择符前面不要再加限定符
  • 没必要用Tag选择符限定Class选择符

 

 

 原文链接:http://slides.com/colinhan/deck-2-3#/5

© 著作权归作者所有

共有 人打赏支持
葡萄城技术团队

葡萄城技术团队

粉丝 320
博文 494
码字总数 706491
作品 13
西安
高级程序员
工欲善其事必先利其器:用什么写Python?

通常来说,每个程序员都有自己趁手的兵器:代码编辑器。你要是让他换个开发环境,恐怕开发效率至少下降三成。然而,每个人对编辑器的喜好各不相同,甚至引发出诸如“神的编辑器”与“编辑器之...

crossin
07/03
0
0
移动前端开发和 Web 前端开发的区别是什么?

1,普通pc端开发与移动端开发区别。 普通pc端开发,我理解就是你拿电脑打开的网页都算【这不是废话么】。 那么移动端前端开发工程师,说白了就很好理解了,做手机网页的前端开发工程师。 这么...

名字已被取
2016/02/27
285
0
34岁!100天!学会Java编程(Day29-Day38)—Web后端编程

色彩 “我不想改变世界,我只是不喜欢平庸。” 小小地装了个13,不过照片里不是我,是我前两天看到的一张网图,不过我很喜欢。我们每天熙熙攘攘,庸庸碌碌,留给世界的只是背影,但是有谁知道...

魏小筠
2017/12/04
0
0
web前端入坑第五篇

web前端入坑第四篇:你还在用 jQuery? 大妈都这么努力,我们有几个人回家还看书的? 先来补齐【web前端入坑系列】前三篇的连接 web前端入坑系列:点击标题进入 第一篇: web 前端入坑第一篇...

xllily_11
2017/03/20
0
0
移动 Web 开发问题和优化小结

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们...

守候i
2017/09/25
0
0
微信公众号的代码块插入,及一键排版

微信公众号:颜家大少 本文所用排版工具:md.aclickall.com . 微信公众号的排版问题 前段时间,准备在微信公众号上写文章时,却发现公众号居然连个最基本的插入代码块的功能都没有。 很纳闷,...

颜家大少
2017/11/30
0
0
前端学习书籍

前端学习书籍 Css 1、CSS时尚编程百例 【内容介绍】 CSS时尚编程百例》超级不错的一本学习CSS的书籍,全部以实例为主讲解如何使用CSS语法、滤镜、高级功能等,百例主要包括最常用的CSS菜单特...

MyDear宸
2017/05/11
0
0
小白看学习前端内容

小白看学习前端内容 web前端工程师其实在不同的公司,有不同的职能,但是称呼都是类似的   1.做网站设计、网页界面开发   2.做网页界面开发   3.做网页界面开发、前台数据绑定和前台逻辑...

MyDear宸
2017/05/11
0
0
关于微信生态的一切

推荐一些打死也舍不得取关的公众号和博客 推荐一些个人认为对程序员而言非常值得推荐的公众号和博客。 微信小程序 - 仿淘宝 这是仿手机淘宝做的微信小程序,项目还在不断完善中。。。 一个小...

掘金官方
01/08
0
0
web前端开发小白需要怎样学习才能迅速掌握前端技术?

  今天来和大家讲讲零基础小白学习web前端开发,需要怎样学习才能迅速掌握前端技术?学习前端开发又需要用到哪些开发工具呢?这里首先分享一下我自己的经验,我自己目前是搞后端开发【也就是...

Java编程语言基础入门博客
2017/04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git 2.18版本发布:支持Git协议v2,提升性能

Git 2.18版本发布:支持Git协议v2,提升性能Git 2.18版本发布:支持Git协议v2,提升性能 新版本协议的主要驱动力是使 Git 服务端能够对各种 ref(分支与 tag)进行过滤操作。 这就意味着,G...

linux-tao
13分钟前
0
0
python浏览器自动化测试库【2018/7/22-更新】

64位py2.7版本 更新 document_GetResources 枚举页面资源 document_GetresourceText 获取指定url的内容 包括页面图片 下载地址下载地址 密码:upr47x...

开飞色
29分钟前
21
0
关于DCL双重锁失效及解决方案

关于DCL双重锁失效及解决方案 Double Check Lock (DCL)实现单例 DCL 方式实现单例的优点是既能够在需要时才初始化单例,又能够保证线程安全,且单例对象初始化后调用getInstance方法不进行...

DannyCoder
35分钟前
0
0
PowerDesigner 16.5 安装配置

PowerDesigner16.5破解版是一款业内领先且开发人员常用的数据库建模工具,PowerDesigner可以从物理和概念两个层面设计数据库,方便用户制作处清晰直观的数据流程图和结构模型,欢迎有需要的朋...

Gibbons
今天
0
0
mac Homebrew 指令积累

1通用命令 brew install [包名] //安装包 brew list //列举安装的包 brew info [包名] // 显示安装包的详细信息 mysql 相关 #启动mysql 服务 brew service start mysql my...

Kenny100120
今天
0
0
前端Tips: 创建, 发布自己的 Vue UI 组件库

创建, 发布自己的 Vue UI 组件库 前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI, Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: n...

ssthouse_hust
今天
1
0
大数据教程(2.13):keepalived+nginx(多主多活)高可用集群搭建教程【自动化脚本】

上一章节博主为大家介绍了目前大型互联网项目的keepalived+nginx(主备)高可用系统架构体系,相信大家应该看了博主的文章对keepalived/nginx技术已经有一定的了解,在本节博主将为大家分享k...

em_aaron
今天
5
0
Git 2.18版本发布:支持Git协议v2,提升性能

在最新的官方 Git 客户端正式版2.18中添加了对 Git wire 协议 v2 的支持,并引入了一些性能与 UI 改进的新特性。在 Git 的核心团队成员 Brandon Williams 公开宣布这一消息前几周,Git 协议 ...

六库科技
今天
0
0
Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
今天
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部