CSS选择器及其优先级 !...继承出来的样式优先级最低； em\px\rem\vw区别 px：绝对单位 em：相对单位，相对父节点的字体大小 rem：相对单位，相对于根节点html的字体大小 vw:天生就是随着屏幕的宽度变化而变化 css...元素居中 1.使用定位属性：父元素相对定位，子元素绝对定位 2.利用css3新增属性transform: translate(-50%,-50%); 3.flex布局 flex布局的属性...浏览器渲染机制 浏览器采用流式布局模型（Flow Based Layout） 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree...怎样触发BFC 这里简单列举几个触发BFC使用的CSS属性 overflow: hidden display: inline-block position: absolute position: fixed
前面的话 小柒前面总结了与HTML相关的面试题，这篇文章总结CSS相关面试题。 题目 (1) 盒子模型的理解？...(2) CSS 中哪些属性可以同父元素继承 ?...link是XHML标签，除了能加载css文件，还可以定义rel连接属性；@import只能加载css link标签引入的css文件被同时加载；@import引入css将在页面加载完毕之后被加载 link...(8) css3的相关动画属性? CSS3动画三兄弟：transition、transform、animation。 (9) css文件有几种引入方式？...外链式（link引入） 内联式 行内式 @import引入 (10) CSS Sprite 是什么，谈谈这个技术的优缺点。 CSS Sprite将多张图片合并在一张图上。
面试题整理｜45个CSS面试题 一、初级CSS面试题 二、中级CSS面试题 三、进阶CSS面试题 四《HTML5&CSS3还原美团外卖》移动端布局实战 CSS已成为Web设计不可或缺的一部分，它让web...在前端面试中，CSS面试题也占有一定比重。 本篇文章，将为大家分享45个和CSS相关的面试题及其解析，难度分为：初级、中级、高级三个部分，由易到难，循序渐进。...一、初级CSS面试题 Q1、CSS全称是什么？ CSS英文全称：Cascading Style Sheets，也就是层叠样式表。...二、中级CSS面试题 Q16、CSS中的伪元素是什么？ CSS伪元素是添加到选择器的关键字，可用于设置所选元素的特定部分的样式。...三、进阶CSS面试题 Q32、什么是弹性布局？ flexbox布局正式称为CSS flexible box布局模块，是CSS3中的新布局模块。
BFC是W3C CSS2.1规范中的一个概念，在CSS3.0规范中已被修改为flow root。...他们是CSS预处理器。他是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。例如Less是一种动态样式语言。将CSS赋予了动态语言的特性，如变量，继承，运算，函数。...完全兼容CSS代码，可以方便地应用到老项目中。Less只是在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译。CSS 3的新增特性？...针对不同的浏览器写不同的CSS Code的过程，就是CSS Hack。...CSS 引入方式？外部样式表。引入一个外部CSS文件；内部样式表。将CSS代码放在标签内部；内联样式，将CSS样式直接定义在HTML元素内部；移动端的布局用过媒体查询吗？
23 0 0 50道CSS基础面试题 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？...5 CSS3新增伪类有那些?...9 CSS3有哪些新特性？...:480px)”> CSS : @media only screen and (max-device-width:480px) {/css样式/} 24 使用 CSS 预处理器吗？...用到了CSS的哪些属性？
# CSS 优先级 内联 > ID 选择器 > 类选择器 > 标签选择器 具体到计算层面，优先级由 A、B、C、D 的值来决定，计算规则如下： A 存在内联样式 A 值为 1，否则为 0 B 值为 ID...sprites 的理解及其好处 雪碧图，也叫 CSS 精灵，是一种 CSS 图像合成技术，开发人员往往将小图标合并在一起后的图片称作雪碧图 使用工具将多张图片打包成一张雪碧图，并为其生成合适的 CSS...，每张图都有相应的 CSS 类，该类定义了 background-image、background-position 和 background-size 属性。...-- link 元素中的 CSS 媒体查询 --> # 盒模型 盒模型是什么 当对一个文档进行布局时，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子 CSS 决定这些盒子的大小、位置以及属性
CSS 预处理器基本思想：为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等） 开发者使用这种语言进行进行 Web 页面样式设计，再编译成正常的 CSS 文件使用 使用 CSS 预处理器，可以使...CSS 更加简洁、适应性更强、可读性更佳，无需考虑兼容性 最常用的 CSS 预处理器语言包括：Sass（SCSS）和 LESS CSS优化、提高性能的方法有哪些？...多个css合并，尽量减少HTTP请求 将css文件放在页面最上面 移除空的css规则 避免使用CSS表达式 选择器优化嵌套，尽量避免层级过深 充分利用css继承属性，减少代码量 抽象提取公共样式，减少代码量...CSS可以拆分成2部分：公共CSS 和 业务CSS： 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务 对于业务CSS，需要有统一的命名，使用公用的前缀。...在 CSS 中伪类一直用 : 表示，如 :hover, :active 等 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after 后来在CSS3中修订，伪元素用 ::
一、CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本（如IE,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果...这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式。我们把针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!...二、CSS Hack的原理 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。...四、CSS Hack书写顺序 一般是将适用范围广、被识别能力强的 CSS 定义在前面。...[endif]--> 六、CSS Hack 类内部属性前缀法 属性前缀法是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀，以达到预期的页面展现效果。
这里用css 动画来做的话简直不费吹灰之力。 我先定义三个按钮，要求大小相同颜色不同。 然后用@keyframes 声明一个动画，再通过animation 来调用。...-- 定义公共类是为了复用css样式， 定义私有类是为了调整animation的参数， 以此来实现不同速率的运动 --> .btn {...*/ 0%{transform:translateX(0);} /*这里用到了一个CSS 函数， calc，意味计算，此内置方法可直接使用 120rpx 包含了 button自身的宽度100rpx
CSS的盒模型?...最常见也是最推荐的引入css的方式，使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。...并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。...④导入样式 导入方式指的是使用 CSS 规则引入外部 CSS 文件。...两者都是外部引用CSS的方式，但是存在一定的区别： 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
前言 我会推出前端面试题的专栏，每一期我会推出10个经典面试题，面试题一部分由小伙伴提供，一部分从面试真题中选出，最后会来一个大汇总。...请大家坚持在每天闲暇之余浏览几道题目，其中的面试题也是从基础开始，所以坚持下去就会有很大的收获。 01 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?...在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS 提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常...IE6也是类似这样做的，它将DTD当成了这个“参数”，以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式...04 div+css的布局较table布局有什么优点？ 改版的时候更方便 只要改css文件。 页面加载速度更快、结构化清晰、页面显示简洁。 表现与结构相分离。
Post 传送的数据量较大，一般被默认为不受限制 Get 安全性非常低，Post 安全性较高 在 FORM 提交的时候，如果不指定 Method，则默认为 Get 请求 CSS 1. css 盒子模型，...CSS 中 link 和@import 的区别 link 属于 XHTML 标签，@import 完全是 CSS 提供的一种方式，只能加载 CSS 加载顺序的差别，当一个页面被加载的时候，link...引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载 兼容性的差别。...解释一下这 2 个伪元素的作用 单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。...重绘和回流 重绘和回流 14. flex 布局 flex 布局教程–阮一峰 15. css 预处理器 提供了一种 css 的书写方式，常见的就是 SAAS 文档 和 LESS 文档
---- 6.css盒模型：content、padding、border、margin（在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。...text/css" src="style.css"> ②内部样式表 此处为样式 ③内联样式 内联样式 ④导入样式 @import url("style.css...") link和@impor的区别： ①@import只能加载css，link还可以定义rel连接属性等 ②link引用的css同时被加载，而@import引入的css会等页面全部下载完成后加载...给元素提供额外的说明 ---- 15.css reset的作用：通过重新定义标签样式，覆盖浏览器的css默认属性 ---- 16.css sprites：将一个页面所涉及的所有零星图片都包含到一张大图中去
CSS Sprite是什么，谈谈这个技术的优缺点 CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background...你用过媒体查询，或针对移动端的布局/CSS 吗？...基于 CSS Rule 数量远远小于元素数量的假设和索引的运用， 遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。... 2....如果实现一个高性能的CSS动画效果？
5 CSS3新增伪类有那些?...9 CSS3有哪些新特性？...:480px)"> CSS : @media only screen and (max-device-width:480px) {/css样式/} 24 使用 CSS 预处理器吗？...用到了CSS的哪些属性？...利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。
CSS部分的面试题主要考察应试者对CSS基础概念模型的理解，例如文档流、盒模型、浮动、定位、选择器权重、样式继承等。...很多应试者认为CSS很简单，没多少内容，面试就是面试 JavaScript部分的内容，这些观点是错误的，面试的第一关往往会考察应试者对CSS的掌握情况。因此，CSS也常常是应试者掉入的第一个陷阱。...1、CSS有哪些基本选择器？它们的权重是如何表示的？ CSS基本选择器有类选择器、属性选择器和ID选择器。...如果用link引用CSS，在页面载入时同时加载，即同步加载。 如果用@ import引用CSS，则需要等到网页完全载入后，再加载CSS文件，即异步加载。 （3）兼容性。...注意：在CSS3规范中，为了区别伪元素和伪类，CSS3建议伪类用单冒号“："，伪元素用双冒号"：："。 7、CSS的哪些样式可以继承？哪些不可以继承？
CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！...104道 CSS 面试题，助你查漏补缺（上） 目录 52.layoutviewport、visualviewport 和 idealviewport 的区别？...[47] 99.css 实现上下固定中间自适应布局？[48] 100.css 两栏布局的实现？[49] 101.css 三栏布局的实现？...CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS预处理器。...我们很久以前就在用CSS后 处理器了，最典型的例子是CSS压缩工具（如clean-css），只不过以前没单独拿出来说过。
有哪项方式可以对一个DOM设置它的CSS样式？ CSS都有哪些选择器？ CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？ 超链接访问过后hover样式就不出现的问题是什么？...下一篇：前端HTML+CSS初级面试题汇总二 1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?...18.CSS都有哪些选择器？ 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。...19.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？..._(¦3」∠)_ 下一篇：前端HTML+CSS初级面试题汇总二 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/138457.html原文链接：https://javaforall.cn
前言 CSS 是层叠样式表（Cascading Style Sheets）的简称。CSS 主要作用是美化网页、布局页面。CSS 规则主要由两个主要部分构成：选择器及一条或多条声明。...在前端基础面试中，CSS 是不会缺席的，下面就给大家分享下 CSS 的常见面试题。 CSS面试题： 介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？...CSS 选择符有哪些？ ::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 伪类与伪元素的区别 CSS 中哪些属性可以继承？ CSS 优先级算法如何计算？...使用 CSS 预处理器吗？喜欢哪个？ CSS 优化、提高性能的方法有哪些？ 浏览器是怎样解析 CSS 选择器的？ 在网页中应该使用奇数还是偶数的字体？为什么呢？...css 实现上下固定中间自适应布局？ css 两栏布局的实现？ css 三栏布局的实现？
二者的区别在于：作用对象不同，padding是针对自身的，margin是作用于外部对象的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
