资讯专栏INFORMATION COLUMN

CSS 笔记

syoya / 3148人阅读

摘要:如果四象值未定义,那么依然处于文档流,只是不占空间否则,脱离文档流,相对于浏览器窗口定位粘性定位。否则其行为与相对定位相同。并且和同时设置时,生效的优先级高,和同时设置时,的优先级高。设定为元素的任意父节点的属性必须是,否则不会生效。

CSS 优先级

基础

使用 !important 的声明比没有使用的优先级更高

选择器优先级

ID > 类 | 伪类 | 属性 > 元素 | 伪元素 > 通配符

组合子(+, >, ~, " ") 和 否定伪类(:not()) 对特异性没有影响。(但是,在 :not() 内部声明的选择器是会影响优先级)。

来源优先级

自定义样式 > 浏览器样式 > 继承样式

引用优先级

行内样式 > 外部样式、内部样式

外部样式、内部样式出现的位置靠后的优先级更高

同等情况下,定义位置靠后的优先级更高

参考

https://developer.mozilla.org...

postion 属性

四象值未定义,即:topleftbottomright 未定义或者属性值 auto

static 文档流。默认值

relative 相对定位。相对于四象值未定义时位置定位

absolute 绝对定位。

如果四象值未定义,那么依然处于文档流,只是不占空间

否则,脱离文档流,相对于最近的非 static 属性的父级元素(包含 html)定位

fixed 固定定位。

如果四象值未定义,那么依然处于文档流,只是不占空间

否则,脱离文档流,相对于浏览器窗口定位

stricy 粘性定位。

如果四象值未定义,那么依然处于文档流。

否则

其行为与相对定位相同。并且 top 和 bottom 同时设置时,top 生效的优先级高,left 和 right 同时设置时,left 的优先级高。
设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。这里需要解释一下:
如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。
如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewport 定位。
达到设定的阀值。这个还算好理解,也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

参考

http://web.jobbole.com/90352/

https://developer.mozilla.org...

BFC 与浮动

http://www.w3cplus.com/css3/d...

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

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

相关文章

  • CSS Variables学习笔记

    摘要:注本文首发于个人博客学习笔记。最近看了下变量,又名自定义属性,跟大家分享一下我的学习笔记。使用自定义属性来设置变量名,并使用特定的来访问。二学习笔记声明调用声明方式变量声明的方式非常简单,如下,声明了一个名叫的变量。 注:本文首发于个人博客 《CSS Variables学习笔记》。 最近看了下CSS Variables(CSS变量,又名CSS自定义属性),跟大家分享一下我的学习笔记。 ...

    mudiyouyou 评论0 收藏0
  • webpack深入与实战笔记(20171015待续...)

    摘要:中添加同样起作用。说明提供的命令,打包时模块绑定的加载器为命令,监听打包的文件,只要改变自动会打包命令窗口显示打包进度命令窗口列出引入的所有模块命令窗口显示打包引入模块的原因 标注:本笔记来自 imooc-qbaty老师-webpack深入与实战gitbash(or CMD)进行命令操作 一、准备工作 lenovo@lenovo-PC MINGW64 ~ $ cd /d/imooc/ ...

    Airy 评论0 收藏0
  • 重学前端学习笔记(十)--CSS语法关于带@的规则

    摘要:指普通的规则,由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则,表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头,否则会被认为是变量。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有...

    codeKK 评论0 收藏0
  • 重学前端学习笔记(十)--CSS语法关于带@的规则

    摘要:指普通的规则,由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则,表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头,否则会被认为是变量。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有...

    SolomonXie 评论0 收藏0
  • 重学前端学习笔记(十)--CSS语法关于带@的规则

    摘要:指普通的规则,由选择器和属性指定构成的规则。用于跟命名空间配合的一个规则,表示内部的选择器全都带上特定命名空间。注意属性不允许使用连续的两个中划线开头,否则会被认为是变量。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有...

    HollisChuang 评论0 收藏0

发表评论

0条评论

syoya

|高级讲师

TA的文章

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