文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS魔法堂：选择器及其优先级

E:last-child：当E元素作为其父元素下最后一个子元素时，匹配成功。（IE5.5~IE8不支持）     8. E:first-of-type：与E:nth-of-type(1)效果一样。...，表达式结果为0时自动转换为；   ③.纯数字n，如2n，指定匹配偶数位置索引的元素，n会自动从0开始自增长，至于何时才停止就不得而知了，表达式结果为0时自动转换为1；   ④.纯数字n +/- 纯数字...，如2n+1，指定匹配奇数位置索引的元素，n会自动从0开始自增长，至于何时才停止就不得而知了，表达式结果为0时自动转换为。  ...E::selection：被用户选区的元素部分 伪元素选择器   伪元素就是浏览器自动在匹配的匹配元素前、后增加的元素，或者是截取匹配元素内的一部分。 1....适合使用的场景：         将行内样式提取出来时，但此时已经有一个全站样式了; 覆盖!important： /* 宽度为200px */ E { width: 200px; !

88360

每天10个前端小知识 【Day 17】

当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。...); grid-gap: 5px; grid-template-rows:repeat(2,50px); } 除了上述的repeact关键字，还有： auto-fill：示自动填充，让一行（或者一列...这时，浏览器会自动生成多余的网格，以便放置项目。...号项目位于e区域 与上述讲到的grid-template-areas搭配使用 justify-self 属性、align-self 属性以及 place-self 属性 justify-self属性设置单元格内容的水平位置...'"> 资源压缩 利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间 合理使用选择器 css匹配的规则是从右往左开始匹配，例如

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

【面试题】CSS知识点整理(附答案)

再看看从右至左的匹配：先找到所有的最右节点span，对于每一个span，向上寻找节点h3，由h3再向上寻找class=mod-nav的节点，最后找到根元素html则结束这个分支的遍历。...它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目" flex: 1 完整写法 flex属性是flex-grow, flex-shrink 和 flex-basis,...一个 ：与元素自身的字体大小有关。...BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。...元素浮动， right元素设置 width: 100%; padding-left:left元素的宽度; 右边宽度固定, 左边宽度自适应 左右都浮动,左边自适应元素设置外层div 100%宽度, 这样就会独占一行

1.5K40

Vue.js开发移动端经验总结

width=device-width表示页面宽度layoutviewport与设备视口宽度idealviewport一致 initial-scale=1表示页面宽度和网页宽度与设备视口宽度的初始缩放比例...使用相对单位 rem rem 是相对于根元素 html 的 font-size 来做计算。...一般我们将根元素html的font-size设置为宽度的1/10，不同设备的宽度不同，但是同样数值的rem比例与设备的宽度比例是一致的。...导致这个现象的原因是使用了transform的元素将创建一个新的堆叠上下文。...堆叠上下文（Stacking Context）：堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z 轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间

4.2K10

alert弹窗样式自定义-Vue.js开发移动端经验总结

一般我们将根元素html的font-size设置为宽度的1/10，不同设备的宽度不同，但是同样数值的rem比例与设备的宽度比例是一致的。...视口单位   将视口宽度window.和视口高度window.（即）等分为 100 份。   ...导致这个现象的原因是使用了的元素将创建一个新的堆叠上下文。...堆叠上下文（ ）：堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z 轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间...而注册全局组件我们首先需要引入组件，然后使用Vue.进行注册；这是一个重复的工作，我们每次创建组件都会进行，如果我们的项目是使用构建（vue-cli也是使用），我们就可以通过.自动将组件注册到全局。

2.9K40

响应式web设计 转

标签中插入一个标签，其中可以设置具体的宽度或者缩放比例，下面是将页面方大到实际尺寸两倍显示的meta标签实例:   <meta name="viewport" content...将网页从固定布局转换成百分比布局   需要牢记的公式:  目标元素宽度÷上下文元素宽度=百分比元素宽度  将文字大小从像素尺寸修改为相对单位em，实现文字缩放。   ...行高一般相对与元素本身的文字大小，而不是父元素的文字大小。  em作为一种测量单位，指的是特定字母的宽度和高度相对于特定字体磅值的比例。 ...:   匹配开头选择器 Element[attribute^="value"]   匹配包含内容选择器  Element[attribute*="value"]   匹配结尾选择器  Element...每一个输入元素都有一个label元素与之对应，且一并包含在div中。

3.6K10

vue移动端开发总结

width=device-width表示页面宽度layoutviewport与设备视口宽度idealviewport一致 initial-scale=1表示页面宽度和网页宽度与设备视口宽度的初始缩放比例...使用相对单位 rem rem 是相对于根元素 html 的 font-size 来做计算。...一般我们将根元素html的font-size设置为宽度的1/10，不同设备的宽度不同，但是同样数值的rem比例与设备的宽度比例是一致的。...说的简单点，就是position:fixed的元素会相对于最近的并且应用了transform的祖先元素定位，而不是窗口。导致这个现象的原因是使用了transform的元素将创建一个新的堆叠上下文。...堆叠上下文（Stacking Context）：堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间

1.3K40

vue移动端开发总结

width=device-width表示页面宽度layoutviewport与设备视口宽度idealviewport一致 initial-scale=1表示页面宽度和网页宽度与设备视口宽度的初始缩放比例...使用相对单位 rem rem 是相对于根元素 html 的 font-size 来做计算。...一般我们将根元素html的font-size设置为宽度的1/10，不同设备的宽度不同，但是同样数值的rem比例与设备的宽度比例是一致的。...说的简单点，就是position:fixed的元素会相对于最近的并且应用了transform的祖先元素定位，而不是窗口。导致这个现象的原因是使用了transform的元素将创建一个新的堆叠上下文。...堆叠上下文（Stacking Context）：堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间

4.1K30

【移动端网页布局】flex 弹性布局 ④ ( 设置子元素是否换行 | flex-wrap 样式说明 | 代码示例 )

总宽度超过了 flex 容器的宽度 , 也不进行换行 ; 如果 flex 项目 的总长度 超出了 flex 容器的宽度 , 出现装不开的情况 , 就会自动缩小 flex 项目的宽度 , flex 项目宽度会变小...; 假如我们 不想要上述效果 , 因为 flex 项目如果被缩小 , 就出现了不可控因素 , 不利于精准布局 ; 如果 想要让 flex 弹性布局 中的 子元素像 浮动布局 那样 , 超出的元素自动排列到第二行...; 2、flex-wrap 样式取值说明 flex-wrap 样式取值说明 : nowrap , 默认值 , 不进行换行 , 可以不设置 ; wrap , 设置后 , 就会像 浮动布局 那样 , 子元素宽度超过父容器宽度..., 就会自动换行 ; 二、代码示例 ---- 1、代码示例 : 默认情况下 flex 弹性布局子元素不会自动换行 在下面的代码中 , 设置了 flex 容器宽度为 300 像素 , flex 项目宽度为...> 展示效果 : 如果设置 4 个元素 , 则每个 flex 项目 子元素不足 100 像素 , flex 项目 的宽度 会被自动缩小 ; 2、代码示例 : 自动换行 在下面的代码中 , 设置了 flex

57920

前端面试（1）H5+css

结构伪类选择器： 选择符号 含义 相同点 E:first-child 匹配父元素的第一个子元素 E 带有 child，以 E 元素的父元素为参考 E:last-child 匹配父元素的最后一个子元素...E E:nth-child(n) 匹配父元素的第 n 个子元素 E E:nth-child(odd) 匹配奇数 E:nth-child(even) 匹配偶数 E:nth-last-child...(n) 匹配父元素的倒数第 n 个子元素 E E:first-of-type 匹配同类型中的第一个同级兄弟元素 E。...3.图像效果，用于绘画的 canvas 元素，svg 元素等 4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies 等 5.设备兼容特性 ，HTML5 提供了前所未有的数据与应用接入开放接口...HTML5 拥有更有效的服务器推送技术，Server-Sent Event 和 WebSockets 就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能 7.性能与集成特性

1.3K20

CSS3选择器 | 每个前端开发者必须要掌握的技术

结构性伪类选择器 css中已经定义好的选择器，不能随便起名字 选择符 含义 :root 将样式绑定到页面的根元素中 :not 排除某个选择器样式 :empty 使用该选择器来制定当元素内容为空白时使用的样式...选择奇偶行 nth-child(odd)与nth-child(even): 不足之处： nth-child选择器在计算子元素时，第奇数个元素还是偶数个元素时，是连同父元素内的所有 子元素一起计算的...E:active 选择匹配的E元素，且匹配元素被激活。...fit-content:将元素宽度收缩为内容宽度 max-content:内部元素宽度值最大的那个元素的宽度=最终容器的宽度。...如 出现文本，则相当于文本不换行 min-content:内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度 注意：以上属性值需要加前缀 ---- 补充： calc函数：此CSS函数让你在声明

71210

浏览器工作原理

如果没有规则与该标记匹配，解析器就会将标记存储到内部，并继续请求下一个标记，直至找到可与所有内部存储的标记匹配的规则。  　　如果没有规则(即没有找到相应的语法规则)，解析器就会引发一个异常。...自下而上的解析器将扫描输入内容，找到匹配的规则后，将匹配的输入内容替换成规则。如此继续替换，直到输入内容的结尾。部分匹配的表达式保存在解析器的堆栈中。...它是HTML文档的对象表示，同时也是外部内容(例如 JavaScript)与HTML元素之间的接口。  　　解析树的根节点是”Document”对象。DOM与标记之间几乎是一一对应的关系。...我们将计算端值（将字符串转化为 RGB 等）并在此节点上缓存经过计算的结构。 　　第二个 元素处理起来更加简单。我们将匹配规则，最终发现它和之前的 span 一样指向规则 G。...样式表解析完毕后，系统会根据选择器将 CSS 规则添加到某个哈希表中。这些哈希表的选择器各不相同，包括 ID、类名称、标记名称等，还有一种通用哈希表，适合不属于上述类别的规则。

3K40

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。...由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计？...——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。...（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。...（特定屏幕尺寸下，html元素的font-size应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的CSS媒体查询代码），即可自动改变所有用rem定义尺寸的元素的大小

10K33

CSS 实用手册

负值 ④. auto 自动 ,由浏览器计算外边距的值应该是多少，默认情况下，auto 只对左右有效，上下无效，为块级元素设置宽度后，再设置其左右外边距为 auto，该元素能水平居中显示。 ⑤....，即自动表格布局为默认值，列的宽度高度是由内容来决定 (2). fixed 固定，即固定表格布局，列的宽度和高度由设定的值决定 (3)....元素一旦浮动起来后，宽度将变成自适应(非手动指定情况下) ③....语法 display:value ①. flex 将块级元素 变为 flex 容器 ②. inline-flex 将元素变为行内flex 容器，容器的宽度为子元素的宽度 注意:将元素设置为 flex 布局之后...弹性布局的潜在问题 ①. input与另一个元素作为子元素弹性布局时，另一元素的宽度如果是按份等分，那么input的宽度将不准确，解决方案是将另一元素的宽度设为固定宽度,如百度移动端 ②.

2.7K10

前端基础篇css

–注释内容–> css基础 一、css概念及特点 css—层叠样式表 特点：实现了结构与表现相分离 作用：定义html元素如何在网页中显示 二、css基础语法 css由选择器和声明两大部分组成，声明又是由属性和属性值组成...c) 内联元素不能定义宽度和高度，以及与高度相关的一些属性（margin-top,margin-bottom,padding-top,padding-bottom,line-height） d) 内联元素不能嵌套块元素...将元素转换为内联元素，是内联元素的默认display属性值 c)inline-block 将元素转换为内联块状元素，是内联块状元素的默认display属性值（如img,input） d)none 将元素隐藏不可见...属性 a）src 引入音频文件路径 b) controls 显示音频控制条 c) autoplay 设置自动播放 d) loop 设置循环播放 e) width 定义视频区域的宽度 f) height...:empty 匹配内容为空的元素(空格，回车换行都不能有) 14. :root 匹配根元素html 四、UI状态伪类选择器（主要针对form表单元素） 1.

1.7K30

现代图片性能优化及体验优化指南

浏览器会选择最匹配的子 元素，如果没有匹配的，就选择 元素的 src 属性中的 URL。然后，所选图像呈现在 元素占据的空间中。 什么意思呢？...而有了 后，浏览器将原生支持上述的一些列操作，我们来看看对应的语法： <!.../photo@3x.png'； 其中的 2x，3x 就是用于匹配 DRP的。 使用 image-set 的一些痛点与媒体查询方案类似。代码量与兼容性语法，而且难以匹配所有情况。...它们的作用是： srcset：定义多个不同宽度的图像源，让浏览器在 HTML 解析期间选择最合适的图像源 sizes：定义图像元素在不同的视口宽度时，可能的大小值 有了这些属性后，浏览器就会根据 srcset...我们借助了 aspect-ratio 这个 CSS 中较新的属性来始终自动获得正确的宽高比，无论其父元素的宽度如何变化。

1.4K30

2019年底前的web前端面试题初级-web标准应付HR大多面试问题

元素的高度，宽度，行高，顶部和底部边距不可以设置。 元素的宽度就是它包含的图片，文字的宽度，不可改变。...层级选择器： 匹配所有后代元素 匹配直接子元素 匹配所有在该元素后的next元素 匹配该元素的所有同辈元素 位置选择器： :first匹配第一个元素 :last获取最后一个元素 :not去除所有与给定选择器匹配的元素...remove() 从Dom中删除所有匹配的元素 repalceWith() 将所有匹配的元素替换成指定的元素 repalceAll() 将匹配的元素替换掉所有selector匹配到的元素 append...() 将每个匹配的元素内部追加内容 appendTo() 将所有匹配的元素追加到另一个指定的元素集合中 prepend() 将每个匹配的元素内部前置内容 prependTo(） 把所有匹配的元素前置到指定的元素集合中...after() 在每个匹配的元素之后插入内容 before() 在每个匹配的元素之前插入内容 insertAfter() 将所有匹配的元素插入到指定的元素后 insertBefore() 将所有匹配的元素插入到指定的元素前

2.3K50

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

适配不同屏幕大小其实只需要遵循一条原则，确保页面元素大小的与屏幕大小保持一定比例。...根据 CSS Values and Units Module Level 4：vw等于初始包含块（html元素）宽度的1%，也就是 1vw 等于 window.innerWidth 的数值的 1% 1vh...具体的可以试下这个 Demo：CodePen Demo -- srcset属性配合w宽度描述符配合sizes属性 此方案的意义在于考虑到了响应性布局的复杂性与屏幕的多样性，利用上述规则，可以一次适配 PC...而从展示效果层面来说，使用系统字体能更好的与当前操作系统使用的相匹配，得到最佳的展示效果。...并且系统字体的优点在于它与当前操作系统使用的相匹配，因此它的文本展示必然也是一个让人舒适展示效果。 当然，上述 font-family 的定义不一定是最佳的。

3K32

如何提高CSS性能

例如，如果改变了一个元素的宽度，它的任何一个子元素都可能受到影响，页面布局的很大一部分可能会改变。布局几乎总是适用于整个文档，所以布局树越大，它执行布局计算的时间就越长。...不要改变高度和宽度属性，而是使用transform：scale()。 要移动元素，避免改变top、right、bottom或left属性，而使用transform: translate()。...Monotype做了一个实验，将12种输入字体组合起来，生成8种权重，横跨3种宽度，横跨斜体和罗马风格。将48种单独的字体存储在一个可变字体文件中，意味着文件大小减少了88%。...CSS选择符的结构方式会影响浏览器匹配它们的速度。浏览器从右到左读取选择符，所以当你使用后代选择器时。例如，nav a {}，它会首先匹配页面上的每一个 元素，然后再将nav里面的元素归零。...如果你使用一个更具体的选择器，例如，在nav元素内的每个 上使用.nav-link，它就不会花时间去匹配页面上的每个 。

2.2K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券