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

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

例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。...标签已呈现，只是在页面上看不到。 Q28.CSS的特异性是什么意思？ 如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。...使网站具有响应能力意味着某些元素将通过CSS媒体查询根据设备的屏幕尺寸（通常是视口宽度）来调整其大小或其他功能，从而做出响应。 例如，在较小的设备上减小字体大小。...SCSS其语法完全兼容CSS3，并且继承了SCSS的强大功能。由于SCSS是CSS的扩展，因此所有在CSS中正常工作的代码也能在SCSS中正常工作。...浏览器供应商有时会在实验性或非标准CSS属性和JavaScript API中添加前缀，因此，从理论上讲，开发人员可以尝试新的想法，同时从理论上防止在标准化过程中依赖他们的实验，然后破坏Web开发人员的代码

4.1K30

Sass学习（一）--Sass入门

实际编译的结果 article a{ color:red; } article a :hover{ color:blue } 可以看到实际编译的结果a与伪类选择器中间多了一个空格 表示的是 a元素里面的子元素经过时变蓝...sass文件也编译出来，如这里我们就不需要编译a.scss和b.scss但是当我们执行某些命令如将如果文件夹的sass全部编译这时候a和b都会被编译 如果我们不希望他们被编译，直接在文件名前面加下划线即可...:red; //b.scss $themeColor:blue ; @import "a.scss"; #main{ color:$themeColor; } 在b.scss中故意将import...default; 嵌套导入 sass还支持嵌套导入，在代码块中导入 //a.scss .a{ color:red } //b.scss .b{import "a.scss"} //编译b.scss...css文件中*/ solid red sass中文乱码 在编译sass中如果出现中文乱码的问题，找到你的sass安装目录，编辑 engine.rb文件 在require...最后面添加如下代码 Encoding.default_external

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

Angular 从入坑到挖坑 - 组件食用指南

@Input 用来获取数据，@Output 用来向外发送数据 4.4.2、子组件获取父组件信息 在父组件中，添加对于子组件的引用，并将需要传递的数据 or 方法绑定到子组件上 传递数据直接将父组件中的属性值赋值给绑定在子组件上的属性就可以了...传递方法时，绑定在子组件上的属性是父组件方法的名称，此处不能加 () ，否则就会直接执行该父组件的方法 在传递数据给子组件时，也可以通过 this 来指代父组件，从而将整个父组件作为数据绑定子组件上...4.4.3、父组件获取子组件信息 使用 @ViewChild 装饰器获取 在子组件上定义一个模板引用变量 父组件内容： 1、使用 @ViewChild 装饰器获取子组件数据...-- 在子组件上定义一个模板引用变量 --> 在父组件中添加对于 ViewChild...ngAfterViewChecked 视图发生变化时调用，在组件的生命周期中会调用多次 ngOnDestroy 只在销毁组件时调用一次，一般用来在组件销毁前执行某些操作 在组件加载过程中，会按照上面列出的钩子函数顺序

15.8K30

【愚公系列】2023年03月 其他-Web前端基础面试题（react专项_35道）

10、为什么不直接更新state状态 11、React中的这三个点（...）是做什么的 12、简单介绍下react hooks 产生的背景及 hooks的优点 13、 React hooks 怎么模拟生命周期...传递 props 给 super() 的原因则是便(在子类中能在 constructor 访问 this.props。...这些综合事件具有与您惯用的本机事件相同的界面，除了它们在所有浏览器中的工作方式相同. React实际上并未将事件附加到子节点本身。...React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX 10、为什么不直接更新state状态 如果直接更新state状态，那么它将不会重新渲染组件，而是使用...传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props 。

7.6K10

SCSS基础

，开发者使用这种语言进行编码后，代码需要被编译成 CSS 才能被浏览器理解。.../2; //通过变量进行运算 } 除了简单的赋值，Sass中变量还可以定义类似数组的变量： $animals: puppy kitty chick; 插值法 在SCSS中通过#{ }语法可以将变量插入任意位置...的语法呈现的是嵌套规则，即将外层的样式作为父选择器，子标签写在父标签里面来更直观地表现出样式结构。...父选择器 & 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用 & 代表嵌套规则外层的父选择器，比如： 或者特殊一点的用法： 图片...复用：mixin/include 在使用中，我们可能存在需要复用的样式，如flex：left等等 @mixin square { width: 100px; height: 100px; }

72550

Vue总汇

【注意】被循环的元素上必须加key 不要加v-if 可以遍历的值类型 数组，对象，数字，字符串 为什么加key? 用于虚拟dom的diff算法优化，且key在相对作用域里必须保持唯一值。...子组件通过Props接收父组件传递的属性值 $childern获取子元素直接操作子元素或调用子元素的方法【非常不推荐】 $emit子传父 1.常规方式 emit调用父级传过来的函数 2. parent...获取父组件实例对象，直接修改或调用【非常不推荐】 双向通信 v-model 作用：使父子组件进行双向的伪绑定 语法： 1.父传子 v-model绑定到子组件上 2.子传父 this....$emit('input',newData) 概念：当我们在子组件上使用使用v-model的时候，会自动的向子组件注入一个value值和input函数， 子组件如果想修改value就是用$emit调用...父传子 和常规传参一样在子组件上绑定属性子组件用props接收 子传父 // 子组件 // 父组件 <template

9310

Angular开发实践（八）： 使用ng-content进行组件内容投射

简单投射 我们先从最简单开始，在 demo.component.html 中添加，修改后的 demo.component.html 和 demo.component.scss 如下： demo.component.html...如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。...为了解决这个问题，我们必须使用 ngProjectAs 属性，它可以应用于任何元素上。...为什么会出现这样的情况呢？ 出现原因 不会 "产生" 内容，它只是投影现有的内容。...解决方法 为了让组件能够控制投射进来的子组件的实例化，我们可以通过两种方式完成：在我们的内容周围使用 元素及 ngTemplateOutlet，或者使用带有 "*" 语法的结构指令

2.9K81

移动端H5各种各样的列表的制作方法(一) by FungLeo

本系列文章将引用reset.scss和mixin.scss两个基础文档,用于重置浏览器样式,和基础的一些SASS代码块.由于代码较长,请参阅《移动端系列博文基础reset.scss和mixin.scss...里面,已经将html的字体大小设置为了62.5%,也就相当于正常情况下的10px.也就是说,上面的1.6rem相当于16px.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释....padding值,分配到ul和li上,就可以了....小结 好,通过这样两个demo,我们应该对一些基本的情况有所了解了.FungLeo将在下面的章节里面,逐渐的提高列表的复杂程度.为大家呈现各种各样不同的列表....这是两道开胃菜,非常的简单.需要说明的是这样几点: 不要给任何元素设置宽度,因为这是一个独占一行的列表 在不设置宽度的情况下,可以设定内填充,不会造成任何问题.

27910

基于 LeanCloud 的无后端评论库 Nexment，于任何 Web 应用或前端项目使用

但是美中不足的其一是有后端部署的要求；其二是与博客的引用出于某些不清楚还没深究的原因效果不佳。最后的妥协是通过 iFrame 引用然后通过强制同源在父页面获取子页面窗口高度来实现评论区高度匹配。...Nexment 的 Container 组件后，传入的包含配置信息的参数使用了 React Context 来在子组件传递。...在 React 中直接将父组件方法作为参数传递至子组件调用即可。...文本框相关 大多功能都采用了依赖来实现，列举如下： Textarea 中在光标处插入内容，采用 insert-text-at-cursor。...Vue 中是通过 ID 获取的元素，React 中通过 useRef Hook 可获取到当前组件的 DOM，样例如下: const nexmentTextarea: any = React.useRef

81520

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用...和前面的例子一样，从 中 .d 的角度来看，由于会被样式规则影响到的目标元素，已经全都集中在第一层了，所以就不用再去便利整个 CSSOM 树了，甚至只需要检查 .d...也可以换个方式思考：在 HTML 的结构中，一个元素可以有无数个子元素，但只能有一个父元素，由子找父（由下往上）搜寻绝对是比较快的。...我们可以回顾一下浏览器渲染的步骤，由于 inline style 存在于 DOM 元素中，只能在 CSS 套用到 DOM 上时才会接触到，事前无法将两者结合。...CSS 效率 实际上浏览器在这里已经完成了优化机制；浏览器会自动将状态一致的元素做样式快照。

1.7K10

CSS | 视差滚动 | 笔记

transform-style 设置元素的子元素是位于 3D 空间中还是平面中。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中， 然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。...背景图固定，但其背景图的呈现依然受所在容器元素区域限制，即背景图只能在容器区域显示，其余无背景图 Q&A 补充 CSS 初始化 参考: necolas/normalize.css: A modern alternative...vh 是 css 中的一个相对长度单位， 是相对于视窗的高度， 100vh 就是指 元素的高度等于当前浏览器的视窗高度， 即浏览器内部的可视区域的高度大小。...100vh，可以兼容某些不支持自定义属性的浏览器。

59121

如何更优雅的编写CSS代码

SCSS是css的预处理器。基本上，它是CSS的超集：它添加了一些很酷的特性，比如：变量、嵌套、导入和混合。我会略将下我们马上要使用的特性。 变量 在scss中你可以使用变量。主要好处：可重用性。...分块和导入 当涉及到可维护性和可读性上时，不可能将所有的代码都保存在一个大文件中。在实验性或小的APP中，这么做可以满足需求，但在专业级别的app上。想都别想。...元素 现在你要怎样用你的乐高积木来建造一个窗户呢？嗯，其中某些看起来像架子，当你组装好四个框子时，你会得到 一个漂亮的窗户。这就是我们的元素。...块/元素可以嵌套到其它块/元素中，但它们必须是完全独立的。记住这个词：独立。所以，不要在按钮元素上写margin，因为你想要把按钮放在标题元素下，否则你的按钮将会和标题元素强耦合。...实际上，在构建网站时，你可能会使用到并非所有浏览器都完全支持的新特性，这时候，添加浏览器供应商前缀可以支持这些新特性，下面是示例： -webkit-animation-name: myAnimation

1.9K10

SCSS 学习笔记 和 vscode下载live sass compiler插件配置

，只能在选择器范围内使用 2.3.3.2 全局变量 定义后能全局使用的变量 1、在选择器外面的最前面定义的变量 2、使用 !...2、还有就是带（_）文件，在引入时，可以不写（_）,即引入 _test.scss , @import "test" 3、这也就意味着，同一个目录下不能同时出现两个相关名的 SCSS 文件（一个不带...使用参数时建议加上默认值 2.6 SCSS @extend（继承）指令 在设计网页的时候通常遇到这样的情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。...通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。...自检函数通常用在代码的调试上 2.11 SCSS 流程控制指令@if、@for、@each、@while 2.11.1 @if 控制指令 @if()函数允许您根据条件进行分支，并仅返回两种可能结果中的一种

34110
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券