首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 常见面试题速查

中指定了任意 CSS 属性,即便没有直接指定这些属性的值 -webkit-overflow-scrolling 属性被设置为 'touch' 的元素 # 块级格式化上下文 BFC 块级格式化上下文(Block...,并有一套渲染规则,决定其子元素将如何定位,以及和其他元素的关系和相互作用 即,它是一块独立的区域,让处于 BFC 内的元素与外部元素相互隔离 如何形成 根元素 position:fixed/absolute...,也叫 CSS 精灵,是一种 CSS 图像合成技术,开发人员往往将小图标合并在一起后的图片称作雪碧图 使用工具将多张图片打包成一张雪碧图,并为其生成合适的 CSS,每张图都有相应的 CSS 类,该类定义了...# 关于媒体查询 是什么 媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制样式表范围的表达式组成,例如宽度、高度和颜色 媒体查询在 CSS3 中出现,允许内容的呈现针对一个特定范围的输出设备而进行裁剪...被点击访问过的超链接样式不再具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-A(link,visited,hover,active) # rgba()和opacity

91110

TDesign 更新周报(2022年7月第4周)

懒加载节点重置时(即调用 setData)没有清空子节点信息问题Card: 修复 loading 状态无效Space: 组件中若存在 v-if,则不渲染的组件间距依然存在InputNumber: 修复初始化为...选择器开始时间被禁用问题详情见:https://github.com/Tencent/tdesign-vue-next/releases/tag/0.18.1React for Web 发布 0.37.1...FeaturesUpload: 支持单组件的文案配置DatePicker: 支持周选择器Chekbox: 优化 label 为空字符串不渲染节点支持通过 CSS Token 配置组件圆角 Bug FixesForm...,用于控制是否滑动切换PullDownRefresh: 新增 scrolltolower 事件Button: variant 属性新增 dashedTabbar: 新增 CSS Variable 调整标签栏字体和图标颜色...CSS Variable 调整 Search 字体、背景、图标等颜色,具体查看文档Rate: 新增 CSS Variable 调整 Rate 辅助文本、选中、未选中及禁用态图标颜色,具体查看文档Input

2.1K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    寒假提升 | Day8 CSS 第六部分

    额外知识补充 2.1. border的图形 假如我们将border宽度设置成50会是什么效果呢? 如果我们进一步, 将另外三边的颜色去除呢? 如果我们将这个盒子旋转呢?...字体图标的好处: 放大不会失真 可以任意切换颜色 用到很多个图标时,文件相对图片较小 字体图标的使用: 登录阿里icons (https://www.iconfont.cn/) 下载代码,并且拷贝到项目中...将字体文件和默认的css文件导入到项目中 字体图标的使用 字体图标的使用步骤: 第一步: 通过link引入iconfont.css文件 第二步: 使用字体图标 使用字体图标常见的有两种方式: 方式一:..., 设计人员提供 方法2: https://www.toptal.com/developers/css/sprite-generator 精灵图的使用 精灵图如何使用呢?...精灵图的原理是通过只显示图片的很小一部分来展示的; 通常使用背景: ✓ 1.设置对应元素的宽度和高度 ✓ 2.设置精灵图作为背景图片 ✓ 3.调整背景图片的位置来展示 如何获取精灵图的位置 http

    58520

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

    CSS最早是在1997年开发的,它是Web开发人员定义其创建的网页外观的一种方式。它旨在允许开发人员将 网站代码的内容和结构与视觉设计分开,这在此之前是不可能实现的。...1、无法通过选择器升序 2、垂直控制的局限性 3、没有表情 4、没有列声明 5、伪类不受动态行为的控制 6、规则,样式,无法定位特定文本 Q8、列举一些CSS框架?...Q9、CSS中使用ID和Class的区别? 1)ID:ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。...Q14、什么是CSS Sprite(“精灵图”) CSS Sprites叫 CSS精灵或者雪碧图,是一种网页图片应用处理方式。...Q17、如何设置h2和h3标签的相同样式? 通过用逗号(,)分隔符来定位多个元素 h2, h3 { color: blue; } Q18、CSS中的float属性如何使用?

    4.5K30

    如何使用CSS伪类选择器

    比如说,下面的复杂选择器将绿色文本颜色应用于所有、和元素,这些元素是的子元素,其包含类.primary或.secondary,并且不是的第一个子元素...然而,:where()的零优先级对CSS重置来说是很实用的,它在没有特定样式的情况下应用标准样式的基线。通常情况下,重置会应用一个默认的字体、颜色、内边距和外边距。...试图在样式表的后面设置一个自定义的上外边距是没有效果的,因为article :first-child有更高的优先级: /* never applied - CSS reset has higher...重置样式,无论其优先级如何;不需要进一步的选择器或!...例如,当任何必填的内部字段没有校验通过时,你可以设置外部表单和下面的提交按钮的样式。

    2.2K40

    AngularDart Material Design 按钮 顶

    ('#myButton', green); @include button-color('#myButton', yellow); 将mixin用于颜色的优点是它们不会覆盖禁用的状态颜色。...您也可以像使用普通DOM元素一样使用CSS设置按钮的样式,尽管这也会影响禁用状态: /* Make #myButton green with yellow text */ #myButton { background...它是圆的,并且与MaterialButton的行为大致相同。 它可以是扁平的或凸起的。 凸起的按钮采用阴影设计。...('#myButton', green); @include icon-button-color('#myButton', yellow); 将mixin用于颜色的优点是它们不会覆盖禁用的状态颜色。...您也可以像使用普通DOM元素一样使用CSS设置FAB样式,尽管这也会影响禁用状态: /* Make #myButton green with yellow icon */ #myButton { background

    1.3K40

    HTML 表单和约束验证的完整指南

    在本文中,我们将研究 HTML 表单字段和 HTML5 提供的验证选项。我们还将研究如何通过使用 CSS 和 JavaScript 来增强这些功能。 什么是约束验证? 每个表单域都有一个目的。...任何知道如何打开浏览器开发工具的人也可以绕过您精心制作的 HTML 和 JavaScript。...颜色选择器 date 年、月、日的日期选择器 datetime-local 日期和时间选择器 email 电子邮件输入字段 file 文件选择器 hidden 一个隐藏的领域 image 显示由src...CSS 验证样式 您可以将以下伪类应用于输入字段以根据当前状态对其进行样式设置: 选择器 描述 :focus 重点领域 :focus-within 一个元素包含一个具有焦点的字段(是的,它是一个父选择器...表单验证 在使用 API 之前,您的代码应该通过将表单的noValidate属性设置为true(与添加novalidate属性相同)来禁用默认验证和错误消息: const myform = document.getElementById

    8.4K40

    2021前端面试高频 HTML + CSS

    页面导入样式时, link 和 @import 的 区别 ❝目前主要使用的还是 link 导入 样式, 因为 @import 兼容性不太好,它是 在 ` CSS2.1 才有的语法,只能在 IE5+...❝ **重绘:**当渲染树中的一些元素只需要更新属性的外观,而不影响布局操作就称之为 「重绘」, 例如:改变背景,字体颜色等。...❝ 单冒号 : 用于 CSS3 伪类选择器中 双冒号 : 用于 CSS3 伪元素选择器中 伪类选择器 是用来向元素添加特殊效果的,用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:...一个 BFC 像是一个隔离区域,和其它区域互不影响。 如何生成BFC?...或fixed,它是绝对定位元素; 对于position: absolute,元素定位将相对于上级元素中最近的一个relative、fixed、absolute,如果没有则相对于body; ❞ 13.

    95040

    从零开始实现一个颜色选择器(原生JavaScript实现)

    1.5的行高,注意没有单位 tips:1.5 倍行高是一个相对值,它是根据浏览器设置的字体大小来决定的,例如浏览器字体大小为 16px,那么 1.5 倍行高就是 16px * 1.5 = 24px 的行高...实际上它和最外层的色块盒子样式差不多,唯一需要注意的就是,我们后续将通过js来设置它的宽高以及行高了。因为它是动态改变的,不过这里我们可以先固定一个值,然后后续再做更改。...x坐标和y坐标,然后去设置拖拽游标的left和top偏移,这里会有临界值的处理。...0 : v; changeElementColor(scope); } 可以看到这个方法我们所做的操作就是设置游标元素的偏移量,以及它的偏移量所代表的的就是hsva颜色模式中的s和v,然后我们再次调用...首先,调用了changeElementColor方法赋值,其次缓存当前的输入框的颜色值,然后计算颜色面板游标元素的left和top偏移量,然后分别设置它们,再然后设置颜色面板的背景色。

    1.4K10

    零基础学前端开发之CSS基础

    网页当中,我们一般用唯一标识的一个标签,使用ID选择器,用来和其他标签做区分,一般使用ID选择器的都是大范围的标签。...比如下面将页面上所有元素的 margin 和 padding 都设置为 0。...* { ``marigin: ``0``; ``padding``: ``0``; } 总结一下: 如果设置块大范围,一般使用ID选择器,它是唯一的; 如果设置多个类别的时候,就使用类别选择器(类样式选择器...,首行缩进用em比较合适 开启控制台进行调整 line-height: 设置行高,设置文字的垂直居中 line-height,和父元素的高度保持一致,即垂直居中 设置文本装饰 text-decoration...注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。

    5610

    如何提升 CSS 性能的小知识

    前言 大家都知道,对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验。因此,与其相关的性能优化是不容忽视的。...回到主题:如何提升 CSS 性能? 一、减少 后代选择器 的使用 ?...如果项目很大,后代选择器非常多,这时候就很耗性能。所以不建议使用没有意义的后代选择器,如: .div p { // ... } 后代选择器为什么会更消耗性能呢?...我们知道修改某些 CSS 属性会导致整个页面布局的重绘( repaint )/重排( reflow )。...如果大量的元素更改这些属性,那么计算和更新他们的位置/大小需要花费很长的时间。 四、减少某些 消耗性能的 CSS 属性 ?

    67840

    CSS

    CSS介绍   CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观。   ...*/ CSS选择器(如何找到对应的标签) 基本选择器 元素选择器(标签名) p {color: "red";}   那如果有多个p标签,我像把其中一个p标签中的文字颜色改为红了,或者背景改成红色怎么办...分组(多个选择器逗号分隔)       当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。       ...那如果是不同的选择器的时候呢?就要学习我们下面的优先级了,首先看一下继承:       继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。...字重(粗细)       font-weight用来设置字体的字重(粗细)。

    1.8K10

    HTML5项目开发备忘录

    1.2.6 哪些地方需要有链接跳转 1.2.7 hover(HTML5学堂提示:有些美工图会提供三态,初始、移入和按下)效果是什么样子 1.2.8 哪些地方需要加鼠标的小手状态 1.2.9 哪些有...JS特效,需要考虑效果~ 1.2.10 基本字体字号、颜色和背景颜色的选用 1.2.11 分清楚背景图和数据图 1.2.12 公共模块拆分出来 1.2.13 哪些地方是需要提交数据的 form...基本的背景颜色和文字颜色 2.3.2 a标签的两种状态 2.3.3 基本的字体大小和样式设置 2.3.4 删除掉没有使用到的样式设置 2.3.5 保证after伪元素清浮动的方法在reset当中...3 移动端与PC端的特殊性 3.1 移动端 3.1.1 全新的选择器以及大部分的CSS3属性都得到了很好的支持 3.1.2 视口的设置 3.1.3 基本rem的处理 3.1.4 user-select...6.7 img标签需要浮动或设置display:block,以防止img元素下的3像素空隙 6.8 a标签的指触区需要注意 6.9 合理使用群组和后代选择器 7 最后不可缺少的相关工作 7.1 CSS

    1.3K50

    CSS基础——css 的介绍

    1. css 的定义 css(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言。...没有使用css的效果图 图片 使用css的效果图 图片 2. css 的作用 美化界面, 比如: 设置标签 文字大小、颜色、字体加粗等样式。 控制页面布局, 比如: 设置浮动、定位等样式。...3. css 的基本语法 选择器{ 样式规则 } 样式规则: 属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3; ... 选择器:是用来选择标签的,选出来以后给标签加样式。...代码示例: div{ width:100px; height:100px; background:gold; } 说明 css 是由两个主要的部分构成:选择器和一条或多条样式规则...小结 css 是层叠样式表,它是用来美化网页和控制页面布局的。 定义 css 的语法格式是: 选择器{样式规则}

    89531

    21道关于性能优化的面试题(附答案)

    请求数量:合并样式和脚本,使用CSS图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。 请求带宽:压缩文件,开启GZIP 。 CSS代码:避免使用CSS表达式、高级选择器、通配选择器。...(1)优化图片 (2)选择图像存储格式(比如,GIF提供的颜色较少,可用在一些对颜色要求不高的地方) (3)优化CSS(压缩、合并CSS) (4)在网址后加斜杠 (5)为图片标明高度和宽度(如果浏览器没有找到这两个参数...精灵图合并,减少HTTP请求;压缩HTML、CSS、JavaScript文件;使用CDN托管静态文件;使用 localstorage缓存和 mainfest应用缓存。 8、你知道哪些优化性能的方法?...高级选择器不容易读懂,执行时间也长。 (7)尽量使用id、 class选择器设置样式(避免使用 style属性设置行内样式) (8)尽量使用CSS3动画。 (9)减少重绘和回流。...开发过程中,发现很多开发者没有设置图标,而服务器端根目录也没有存放默认的 Favicon.ico,从而导致请求404出现。

    1.8K20
    领券