资讯专栏INFORMATION COLUMN

360前端星学习笔记-深入css(2)

William_Sang / 1170人阅读

摘要:课程一继承某些元素会自动继承其父元素的计算值举例上述代码,标签里的就会继承父元素的,为。显示继承给设置显示继承根元素下所有元素除独自设置如的都是。二初始值当向上继承到顶点还是没找到值的话,就需要初始值了。

课程ppt

一、css继承 1.1 某些元素会自动继承其父元素的计算值

举例:

This is a test of inherit.

上述代码,em标签里的color就会继承父元素的color,为color: #666

1.2 显示继承
* {
  /* 给box-sizing设置显示继承 */
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}

html根元素下所有元素(除独自设置:如.some-widget)的box-sizing都是border-box

二、初始值

当向上继承到顶点还是没找到值的话,就需要初始值了。

CSS 中,每个属性都有一个初始值

background-color 的初始值为 transparent 透明

margin-left 的初始值为 0

可以显式重置为初始值,比如 background-color: initial

三、CSS求值过程

filtering:通过样式规则为dom树种的各个元素进行选择器匹配,匹配有效的属性值,匹配当前媒体查询media等等,比如当用户打印时,加载media是打印样式的css样式,生成的声明值可能会有一个或多个,比如一个p标签匹配到了两个选择器 p{ font-size: 16px },p.text{ font-size: 1.2em }

cascading:用过对比选择器的特异性,选出优先级最高的一个选择器,生成层叠值,比如1.2em

defaulting:判断层叠值是否为空,如果为空,使用继承或者初始值,生成指定值,保证指定值一定不为空。

resolving:将相对值计算成绝对值,比如em转化成px,相对路径转化成绝对路径等,生成计算值( computed value :在浏览器不进行实际布局时,得到的具体的值)

formatting: 有些值不能静态计算出来的,比如有些值需要渲染之后才能获得,如vh,vw,百分比这种,得到使用值

将小数像素值转为整数,比如width:400.2px,转化成width: 400px,生成实际值,css求值完毕

3.1 举个栗子

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113449.html

相关文章

  • 360前端学习笔记-深入CSS

    摘要:深入课程链接一的版本规范在之前,把所有标准放在一起去管理,这样推进起来版本升级比较难,后来在的版本中,将标准分成几个模块来管理。 深入CSS 课程ppt链接 一、CSS的版本(level) css Level 1 css Level 2(CSS2.2规范) css Level 3 Color Module Level 3 Selectors Level 3 Media Queri...

    xcold 评论0 收藏0
  • 360前端学习笔记-如何写‘好’JavaScript

    摘要:前言如何写好这门课是由技术专家月影老师讲的。控制流设计原则为什么要用到事件机制呢因为要降低结构之间的耦合度,如果不这样做的话,我们需要做双向的操控的。 前言 《如何写‘好’javascript》这门课是由360技术专家月影老师讲的。 这堂课的ppt 说实话,我一直在纠结要不要写关于js的文章,因为对于js来说,我的实际经验不足,更不要说面向对象编程与函数式编程了,对于过程抽象与行为抽象...

    arashicage 评论0 收藏0
  • 360前端学习笔记-HTML

    摘要:前端与一枚大三学生,非常感谢前端星计划,在这里学习了很多,非常幸运获得的校招实习,非常感谢面试我的王峰老师和卢岳文老师总的来说,这天的学习,让我坚定了走前端这条路。使用在模式下可以使元素水平居中,但在模式下却会失效。 前端与HTML 一枚大三学生,非常感谢360前端星计划,在这里学习了很多,非常幸运获得360的校招实习offer~,非常感谢面试我的王峰老师和卢岳文老师!总的来说,这7天...

    PAMPANG 评论0 收藏0
  • 360前端学习笔记-HTML

    摘要:前端与一枚大三学生,非常感谢前端星计划,在这里学习了很多,非常幸运获得的校招实习,非常感谢面试我的王峰老师和卢岳文老师总的来说,这天的学习,让我坚定了走前端这条路。使用在模式下可以使元素水平居中,但在模式下却会失效。 前端与HTML 一枚大三学生,非常感谢360前端星计划,在这里学习了很多,非常幸运获得360的校招实习offer~,非常感谢面试我的王峰老师和卢岳文老师!总的来说,这7天...

    kuangcaibao 评论0 收藏0
  • 360前端计划学习-HTML + CSS

    摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。 浏览器 浏览器 渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

    lpjustdoit 评论0 收藏0

发表评论

0条评论

William_Sang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<