程序员经验分享-hwhale

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

2023-05-16

通常我们在学习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）,如 p,:before

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

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

e97fe86a60db89984c9a0616833539f.png

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

c50ec997d6314367bac5638ca4d827f.png9f4932def834830f32bb22857a8b6c3.png

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

CSS 优先级法则：

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

CSS常用模型

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

b8a68b3bd711fe6777882b200d8ad28.png

盒子模型相关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 (顺时针)

所有东西可视为盒子模型

b025260b6c6b755885b522963c230af.png

纵向Margin合并

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

7745375d781e4581071b7d68e62bb64.png

Position属性

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" 属性进行规定。

aafe737516f6f561d0186236f87977a.png

Float属性

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

ca4334c22753e9a98e0411371187050.png

Stacking context

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

b2878c50c176165d22c8347ec8ebaf7.png

浏览器会给符合下面规则的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

d27f03f91a382b26c567ea7bdcbdacf.png

 

Stacking order

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

637c500aefa138f439562ca4720e75e.png

 

性能

d0737bff679e026ce2efd8571645519.png

像素渲染流水线

396c309272dac7e5bc3c43326efe14d.png

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

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

CSS 选择器性能

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

更多web开发知识，请查阅 HTML中文网 ！！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

让网页开发少点

深入CSS，让网页开发少点“坑” 的相关文章

  • 将背景图像保留在底部

    我一直在研究将图像保留在底部页面的解决方案 我目前得到的代码是 footer background image url images footer png background repeat repeat x position absolu

  • 如何让图片在div中居中？

    我的 HTML 代码如下所示 div class ctn img src some img jpg div The ctn应该是固定大小 例如 150 150 但 IMG 的尺寸可能更大或更小 200 50 50 200 50 50 等 如

  • Laravel 表单标签中内联“必需”星号

    我正在尝试为 Laravel 中的必填字段添加红色星号 但我不确定如何将它们添加到标签中 我目前正在做的是 Form label took act or sat Did you or will you take the SAT or ACT

  • 无法更改 Bootstrap 4 中的导航栏链接颜色

    我正在尝试更改导航栏的一个链接的颜色 而我尝试了所有方法它仍然具有默认颜色 这是代码 li class nav item signup a class nav link Sign Up a li css navbar light navba

  • SVG 视图框显示屏幕外项目

    我正在使用 HTML5 制作游戏svg标签为图形提供多分辨率显示 游戏的大部分内容已经完成 但在测试中我刚刚遇到了一个主要错误 其中涉及 SVG 对象可见 尽管在非本机分辨率下位于视图框之外 我不确定这是否是我的代码或浏览器本身的缺陷 Go

  • CSS - a：访问过：悬停？

    如何应用字体color仅指向已经存在的超链接visited并且正在被hover通过鼠标 本质上 我想做的是 a visited hover color red 是的 这是可能的 这是一个例子 a href http www google c

  • 垂直滚动不适用于 Mobile Safari

    由于某些原因 当我在移动 Safari iOS 9 1 iPhone 5 Safari 8 1 上访问我的网站时 垂直滚动无法正常工作 https sleepy anchorage 3222 herokuapp com https slee

  • 如何根据 URL 路径添加 CSS 类？

    如何根据我所在的路径将 CSS 类添加到 div 中 包括如果我在其中包含 则不应该出现问题 div class popup ul li a href vs Example 1 a li li a href bod Example 2 a

  • 当我将 HTML 标签设置为 100% 高度时，我的内容消失了

    我有一个垂直布局 我想保持页面居中 一列保持固定在页面上 而另一列应根据内容滚动 并且有一些绝对的装饰性浮动 div 我希望滚动列垂直显示 100 即使内容不需要高度 但我似乎无法让它工作 我已将 html 标签和 body 标签以及所有必

  • 使列在引导程序中固定位置

    使用 Bootstrap 我有一个网格列 class col lg 3 我想将其放置在位置 固定 而另一个 col lg 9 是正常位置 可滚动页面 div class row div class col lg 3 Fixed conten

  • bootstrap-3 在 div 底部对齐链接和按钮

    从下面的屏幕截图中可以看出 链接并未在底部对齐div 如何对齐按钮edit delete add cart在底部div 注意我没有使用table bottomaligned position absolute bottom 0 margin

  • CSS3的:root伪类和html有什么区别？

    我似乎找不到太多关于这方面的信息 粉碎杂志 http coding smashingmagazine com 2011 03 30 how to use css3 pseudo classes 似乎是在说html and root是同一件事

  • 如何覆盖！重要？

    我创建了一个自定义样式表 它覆盖了我的 WordPress 模板的原始 CSS 但是 在我的日历页面上 原始 CSS 将每个表格单元格的高度设置为 important宣言 td height 100px important 有什么方法可以覆

  • 除了text/css之外还有其他样式类型吗？ [复制]

    这个问题在这里已经有答案了 可能的重复 style type text css 还有什么 https stackoverflow com questions 6077905 style type text css what else is

  • CSS 中的垂直线（与
    相对）

    我知道它不存在 但是有纯CSS版本吗 想要设置高度 并将其设置为 1px 宽 如果可能的话 带有阴影 只是无法理解纯 CSS 的方式来做到这一点 需要绝对定位 因为我的容器有两个并排的 div 例如 60 40 的分割 需要两者之间的垂直规

  • 在电子邮件中设置 html 样式

    我正在为有能力的客户发送 HTML 版本的电子邮件 现在这不是几乎全部吗 我担心的是如何设计它 我使用内联CSS吗 我可以在 html 中包含样式表吗 html 是否以 or 我可以阅读这方面的标准吗 我在造型方面能走多远 我有边框半径 背

  • 如何偏移网格项目，同时移动其兄弟项目？ [复制]

    这个问题在这里已经有答案了 我正在使用 CSS 网格 我想偏移一个元素 以便它在网格列上水平移动 我还希望这个元素保留其当前宽度 并应用偏移值此外到元素的宽度 Example container display grid grid temp

  • window.print() 仅打印屏幕的“可视”部分

    我有一个可滚动屏幕 上面有一个打印按钮 并且在其 onclick 事件上调用 window print 函数 我的问题是它只打印屏幕的 可见 部分 而不是整个屏幕 如果页面可滚动 则当内容无法容纳在 1 页中时 打印应扩展到 2 或更多 页

  • 将两个 .less 文件合并为一个

    假设我少了两个文件 first less a b font size 13px color lime and second less import first less a font family sans serif 我想要一种将它们组合

  • 如何防止图像被裁剪

    我正在尝试创建一个包含很多图层的动画图片 为了在不同的屏幕上获得正确比例的图像 我使用covercss 属性值 我已经尝试过object fit对于图像和background size用于背景图像 这就是为什么我的宽屏幕图像被浏览器裁剪的原

随机推荐

  • 使用CSS更改PNG图像的颜色

    给定一个图像 xff0c 如何使用CSS更改PNG图像的颜色 xff1f 下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法 xff0c 希望对大家有所帮助 在CSS中使用Filter属性 xff0c 利用滤镜功能来更改png图像颜色

  • 使用CSS更改hr标签的厚度

    下面本篇文章就来给大家介绍一下使用CSS更改hr标签的厚度的方法 xff0c 希望对大家有所帮助 HTML lt hr gt 标签在 HTML 页面中创建一条水平线 xff1b 水平分隔线 xff08 horizontal rule xff

  • 使用CSS设置文本或图像的透明度

    如何使用CSS设置文本或图像的透明度 xff1f 下面本篇文章就来给大家介绍一下使用CSS设置文本或图像的透明度的方法 xff0c 希望对大家有所帮助 想要使用CSS设置文本或图像的透明度 xff0c 可以使用opacity属性来设置 op

  • 使用CSS垂直居中文本

    CSS的常见任务是垂直居中文本或图像 xff1b 虽然CSS2不支持垂直对齐 xff0c 但我们可以通过组合一些属性来垂直居中块 下面本篇文章就来给大家介绍一下使用CSS垂直居中文本的方法 xff0c 希望对大家有所帮助 方法一 xff1a

  • CSS删除内联块元素之间空格的方法

    如何删除内联块元素之间的空格 xff1f 下面本篇文章就来给大家介绍一下使用CSS删除内联块元素之间的空格 xff0c 希望对大家有所帮助 要想删除内联块元素之间的空格 xff0c 可以使用margin right属性 xff1b 此属性用

  • 使用CSS在元素后面添加空格

    在CSS中 xff0c 可以使用 after选择器在元素后面添加空格 xff08 34 34 xff09 after选择器用于在其他元素的内容之后多次添加相同的内容 xff1b 它在每个选定元素的内容后面插入一些内容 下面本篇文章就来给大家

  • CSS在页面加载时创建淡入效果

    下面本篇文章就来给大家介绍一下使用CSS在页面加载时创建淡入效果的方法 xff0c 希望对大家有所帮助 想要使用CSS在页面加载上创建淡入效果 xff0c 可以使用css的animation属性或transition属性在页面加载时创建淡入

  • CSS设置文本和边框（图像）阴影

    在CSS中可以使用阴影效果属性在HTML文档中添加文本和边框 xff08 图像 xff09 阴影 下面本篇文章就来给大家介绍一下CSS的阴影效果属性 xff0c CSS添加阴影效果的方法 xff0c 希望对大家有所帮助 1 添加文本阴影 在

  • 使用JavaScript清除div的内容

    JavaScript提供清除div内容的功能 xff0c 想要执行此功能有两种方法 xff1a 一种是使用innerHTML属性 xff0c 另一种是使用firstChild属性和removeChild 方法 下面本篇文章就来给大家介绍一下

  • 大话pixhawk运行Ardu:Copter启动过程

    1 xff1a 了解启动过程有什么帮助 xff1f 2 xff1a 硬件连接 3 xff1a 启动过程 amp 分析 rgbled on I2C bus 2 at 0x55 bus 100 KHz max 100 KHz init look

  • JavaScript将Set（集合）转换为Array数组

    在JavaScript中 xff0c 想要将Set xff08 集合 xff09 转换为Array数组 xff0c 可以通过以下方式实现 方法1 xff1a 使用Array from 方法 Array from 方法从对象或可迭代对象 xf

  • 使用CSS将图像进行模糊处理

    给定一个图像 xff0c 如何使用CSS将图像进行模糊处理 xff0c 转换为模糊图像 xff1f 下面本篇文章就来给大家介绍一下使用CSS模糊处理图像的方法 xff0c 希望对大家有所帮助 在CSS中 xff0c 可以使用filter属性

  • CSS设置占位符文本的对齐方式

    HTML的placeholder属性指定一个简短提示 xff0c 用于描述input字段或文本区域 xff08 textarea xff09 的预期值 xff0c 即占位符文本 短提示在用户输入值之前显示在字段中 在大多数浏览器中 xff0

  • 谈谈HTML的短语标签及其作用

    在HTML中 xff0c 短语标签是专用标签 xff0c 用于指示文本块具有结构意义 xff0c 执行与文本格式标签类似的特定操作 例如 xff0c abbr标签表示该短语包含缩写词 短语标签的一些例子有 xff1a abbr strong

  • 常见的类名id名命名参考规范

    web前端命名规范 下面是常见的命名参考规范 xff1a 主体 头部 xff1a header 内容 xff1a content container 尾部 xff1a footer 导航 xff1a nav 侧栏 xff1a sidebar

  • Vue.js开发的4个基本ES2015特性

    ES2015 又名ES6 是当前JavaScript语言的规范 如果您是JavaScript新手或者最近没有更新JavaScript知识 xff0c 那么在ES2015中有许多新特性可以使开发变得更好 更有趣 如果您是Vue开发人员 xff

  • VueJS项目的5个很棒的样板/模板

    你要开始一个重要的Vue项目吗 为了确保您从一个坚实的基础开始 xff0c 您可以使用一个模板 也称为样板 骨架 启动器或脚手架 xff0c 而不是从npm init或vue init开始 许多经验丰富的开发人员都以开源模板的形式收集了关于

  • 如何构建出色的Vue组件

    很少有人最初编写Vue组件时打算将其开源 我们大多数人开始为自己编写组件的原因 xff1a 我们有一个问题 xff0c 然后决定通过构建一个组件来解决它 有时我们发现自己想要在代码库的新位置解决相同的问题 xff0c 所以我们提取组件并对其

  • 在Vue.js中定义组件模板的7种方法

    Vue js 使用了基于 HTML 的模板语法 xff0c 允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据 所有 Vue js 的模板都是合法的 HTML xff0c 所以能被遵循规范的浏览器和 HTML 解析器解析 在Vue

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

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

热门标签