文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

css 对元素在文档中的排列的影响

文档中元素的排列主要是根据层叠关系进行排列的；   形成层叠上下文的方法有：     1)、根元素     2)、position 的属性值为： absolute | relative，且 z-index...isolate 的元素；     10)、will-change 中指定了任意 css 属性，即便没有直接指定这些属性对的值；     11)、-webkit-overflow-scrolling 属性设置为...touch 的元素； z-index   z-index 只使用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto；如果一个定位元素没有设置 z-index ，那么默认为 auto...，相对的还有 IFC (inline Formattion Context) 内联格式化上下文；   一个 BFC 的范围包含创建该上下文元素的所有子元素，但不包括创建的新 BFC 的子元素的内部元素；...  触发 BFC 的方式有：     1)、根元素，即 HTML 标签；     2)、浮动元素，即 float 值为 left | right 的元素；     3)、overflow 值不为 visible

3K20

在JS中使用强大的CSS选择器来定位页面元素

近期由于受到谷歌退出中国市场的影响，就连之前可以正常使用的翻译 API 也无法使用了。 无奈之下为不影响本站的加载速率，决定暂时关闭谷歌的在线翻译功能。...于是便想到了使用 CSS 的选择器语法来支持，首先定位到这些按钮的父元素上，然后再逐一对子元素（即按钮本身）进行事件注册，这样当某个按钮被删除后也就无须 if 条件判断，同样也不用调整 JS 代码。...顺着这个思路往下走的时候，发现并不是所有按钮的事件都是相同的，得排除掉其它非同类项的按钮。 结合之前编写 SCSS 代码时的经验，是否可以使用 :first-child 这样的选择器进行排除呢？...相比于 JS 中使用 ID 或名称来定位页面元素的方式，这种使用 CSS 选择器的模式，操作起来会更的加简便和灵活。...看来对于 hugo-theme-next 主题的代码架构评审的工作得加紧啦，毕竟使用的用户也在逐步增长中，得对大家的信赖“负责”才是。

87210
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CSS语法与规则 — 重学CSS

    @media @page rule —— 这里基本上就是我们平时写的 CSS 样式规则部分 我们平时写都是在写普通的 CSS 规则，charset 我们基本都不会用，一般我们都会用 UTF-8。...media query 标准里 它在 CSS3 的 conditional 标准里 但是在 media 的 conditional 标准中又去引用了 media query，规定了 media 后面的一部分的查询规则...所以我们常常去讲 media query 是一个新特性，其实它并不是，它是类似一个预置好的函数的一个规范 真正把 Media 特性真正引入到 CSS3 当中，是通过 CSS3 中的 conditional...CSS3 标准来表述它 就是 css page 3 它主要是给我们需要打印的页面所使用的 理论上这个叫做分页媒体，其实主要的分页媒体就是打印机 我们的页面是不会有分页的 @counter-style:...如果我们检查元素中查看，我们可以看到其实所有的数据都已经挂载在 DOM 上了，只是前端做了筛选分页而已。

    1K41

    rem适配布局

    整个页面只有一个 html，通过修改 html 的文字大小，可以很好的控制页面中元素的大小。 媒体查询 介绍 媒体查询(Media Query)是 CSS3 新语法。...使用@media 查询，可以针对不同的媒体类型定义不同的样式； @media 可以针对不同的屏幕尺寸设置不同的样式； 重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面； 苹果手机、Android...} } 生成的 CSS 样式和上面的是一样的 如果遇到交集|伪类|伪元素选择器： 如果内层选择器前面没有&符号，则被解析为父选择器的后代；如果有，责备解析为父元素自身或父元素的伪类。...另外，Less 注释为 //注释内容,并且不会出现在对应的 CSS 中。...② 屏幕宽度/划分的份数就是 html  font-size 大小 ③ 页面元素的 rem 值=页面元素值（px）/html  font-size 大小 @import 导入的 css 文件名：可以把一个样式文件导入到另一个样式文件中

    1.9K30

    【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

    10px的padding * 2 + 10px的margin*2 + width(auto) = 200px(参考元素的宽度) 【注意】：width:100%不会将自身的margin和padding包含计算在参考元素的...width:100%的影响 浮动/定位是通过改变元素width的参考基准来影响width:100%的，有以下三点规律 1.1 默认情况下：以它的父级元素宽度为参考基准 这也就是我们上面看到的demo所展示的...没错，在一般情况下（没有浮动，不是行内框），并排的div 的margin可以彼此重叠,而且重叠后值为两者中较大的那个 ?...“标准流”，那么： 1.浮动流顺序排列，这个顺序是和HTML中元素的顺序一致的,HTMl中先浮动的元素排在前面，这个“前面”指的是靠近屏幕边缘的一端，“后面指的是远离屏幕的一端” 以上面的例子为基础 ....3.浮动流本身并不会影响标准流元素的定位,但是却影响着标准流文本的定位 如果我们仔细看一下五中开头的demo会发现一个难以忍受的bug: ?

    2.9K110

    如何提高CSS性能

    在link元素中加载两个样式表，允许并行下载。 ? 使用高效的CSS动画 当你对页面上的元素进行动画处理时，浏览器经常要重新计算它们在文档中的位置和大小，从而触发布局。...例如，如果改变了一个元素的宽度，它的任何一个子元素都可能受到影响，页面布局的很大一部分可能会改变。布局几乎总是适用于整个文档，所以布局树越大，它执行布局计算的时间就越长。...将48种单独的字体存储在一个可变字体文件中，意味着文件大小减少了88%。 不用担心CSS选择器的速度问题。 CSS选择符的结构方式会影响浏览器匹配它们的速度。...浏览器从右到左读取选择符，所以当你使用后代选择器时。例如，nav a {}，它会首先匹配页面上的每一个 元素，然后再将nav里面的元素归零。...如果你使用一个更具体的选择器，例如，在nav元素内的每个 上使用.nav-link，它就不会花时间去匹配页面上的每个 。

    3.1K30

    CSS3 Media Queries

    Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： css/reset.css" rel="stylesheet"...）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。...这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。..." /> 转换成css中的写法为： @media screen and (max-width: 600px) { 选择器 { 属性：属性值； } } 其实就是把small.css...在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在： 1、Media query只接受单个的逻辑表达式作为其值，或者没有值； 2、css属性用于声明如何表现页页的信息

    1.1K20

    改善CSS的10种最佳做法

    对于只需要几个CSS文件的小型网站，情况可能就是这样。但是在大型应用程序中，样式可能会迅速失控。你如何使它们易于管理？ 事实是，就像其他任何语言一样，CSS可能会影响或破坏你的设计。...通常，你不会使用框架中的每个选择器，因此你的软件包将包含无效代码。 如果仅对按钮样式使用，则将样式外包给你的CSS文件，然后删除其余样式。...因此，在删除所有内容之前，请确保确认确实没有在任何地方使用它。 2、首选使用CSS方法 考虑为你的项目使用CSS方法。CSS方法用于在CSS文件中创建一致性。它们有助于扩展和维护你的项目。...相同的元素无论在页面上的什么位置，都应看起来相同。...) { /* your CSS rules */ } /* Non mobile-first media query, everything below 600px will get the

    1.2K10

    css3 媒体类型(Media Type)

    这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。...Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式...{ 选择器{ 属性：属性值； } } 在>/head>中的…中调用： css">...small.css" /> 转换成css中的写法为： @media screen and (max-width: 600px) { 选择器 { 属性：属性值； } } 其实就是把small.css...在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在： 1、Media query只接受单个的逻辑表达式作为其值，或者没有值； 2、css属性用于声明如何表现页页的信息

    1.2K20

    css学习笔记，持续记录。

    Css选择器 1. 通配符选择器：  *{...};  选择所有元素； 2. HTML标签选择器：p{...}...兄弟选择器：E~F{sRules}，选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级，“~” 左右空格无影响。 6....在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。...:last-child的匹配规则 查找 el 选择器匹配元素的所有同级元素（siblings） 在同级元素中查找最后一个元素 检验最后一个元素是否与选择器 el 匹配 匹配指定类型的最后一个元素，last-of-type...可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

    3.7K60

    CSS规范--BEM入门

    考虑以下场景： 场景一：开发一个弹窗组件，在现有页面中测试都没问题，一段时间后，新需求新页面，该页面一打开这个弹窗组件，页面中样式都变样了，一查问题，原来是弹窗组件和该页面的样式相互覆盖了，接下来就是修改覆盖样式的选择器...场景二：承接上文，由于页面和弹窗样式冲突了，所以把页面的冲突样式的选择器加上一些结构逻辑，比如子选择器、标签选择器，借此让选择器独一无二。...BEM解决这一问题的思路在于，由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。...而.media__body是一个尚未被改变过的也是属于.media的元素。所有以上这些信息都通过它们的class名称就能明白，由此看来BEM确实非常实用。 使用BEM常见问题 1 丑极了！...当我们遵循了这个规定，无论父元素名发生改变，或是模块构造发生的改变，还是元素之间层级关系互相变动，这些都不会影响元素的名字。

    1.4K20

    面试题整理｜45个CSS面试题

    例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。...@media属性主要有四种类型（包括screen）： all—适用于所有设备。 print—打印预览模式/打印页面。...2.通俗解释： BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。...如果一个元素符合触发BFC的条件，则该元素中的布局不受外部影响。 浮动元素会创建BFC，所以浮动元素内部子元素主要受浮动元素影响，两个浮动元素之间是互不影响的。...这些元素不会影响其他元素的位置。 固定 fixed 将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。 粘性sticky 粘性定位是相对定位和固定定位的混合。

    6.7K30

    改善CSS的10种最佳做法

    对于只需要几个CSS文件的小型网站，情况可能就是这样。但是在大型应用程序中，样式可能会迅速失控。你如何使它们易于管理？ 事实是，就像其他任何语言一样，CSS可能会影响或破坏你的设计。...通常，你不会使用框架中的每个选择器，因此你的软件包将包含无效代码。 如果仅对按钮样式使用，则将样式外包给你的CSS文件，然后删除其余样式。...因此，在删除所有内容之前，请确保确认确实没有在任何地方使用它。 2、首选使用CSS方法 考虑为你的项目使用CSS方法。CSS方法用于在CSS文件中创建一致性。它们有助于扩展和维护你的项目。...相同的元素无论在页面上的什么位置，都应看起来相同。...) { /* your CSS rules */ } /* Non mobile-first media query, everything below 600px will get the

    1K20

    移动开发-媒体查询布局

    Query) 是CSS3新语法 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面...目前针对很多苹果、Android手机、平板等设备都用得到多媒体查询 ---- 语法规范: 1️⃣media type 查询类型: 将不同的终端设备划分成不同的类型，称为媒体类型 值 说明 all 用于所有设备...，暂且了解三个，注意他们要加小括号包含 值 说明 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度...，实现页面元素大小的动态变化 ---- 1️⃣引入资源 (理解) : 当样式繁多的时候，可以针对不同的媒体使用不同的css 原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件 <link...: pink; 3️⃣Less 嵌套: 如果要用 (交集、伪类、伪元素选择器) 内层选择器的前面没有 & 符号，则会被解析为父选择器的后代 如果有 & 符号，它就被解析为父元素自身或父元素的伪类 Less

    1.7K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券