mirror of
https://github.com/haizlin/fe-interview.git
synced 2026-01-18 16:12:59 +00:00
25 KiB
25 KiB
css面试题
一周汇总一次
历史题目
最新:2019.11.17
- 怎么使图片宽度自适应呢?
- 实现文本的竖向排版
- 你有用过vw布局吗?和使用rem有什么区别?
- 举例说明常用的cursor取值有哪些?
- 举例说明clear取值有哪些?
- 请写出:link、:visited、:hover、:active的执行顺序
- 实现一个上下固定,中间自动填满的布局
- 怎样用纯CSS实现禁止鼠标点击事件?
- 当全国哀悼日时,怎么让整个网站变成灰色呢?
- 如果给一个元素设置background-color,它的颜色会填充哪些区域呢?
- 使用css3做一个魔方旋转的效果
- 手写一个使用css3旋转硬币的效果
- height和line-height的区别是什么呢?
- 请用css写一个扫码的加载动画图
- 举例说明伪类:focus-within的用法
- 如何用css自定义滚动条?能做到所有浏览器兼容吗?想要做兼容怎么办呢?
- border-radius:50%和border-radius:100%有什么区别?
- 如何使用CSS实现段落首字母或首字放大效果?
- 如何给段落的首行缩进?
- 你有去看过或者了解过css的标准文档吗?
- 你知道CSS的标准发布流程吗?
- 你最希望css拥有什么样的特性?(目前没有的)
- 解释下为什么css的reset不建议直接这么写:*{ margin:0; padding:0;}?
- 为什么说不提倡用1px的小尺寸图片做背景平铺?
- 举例说明css有哪些简写的属性和属性值?
- 请说说颜色中#F00的每一位分别表示什么?为什么会有三位和六位的表示呢?
- 请使用css写一个多级的下拉菜单
- 用css给一个元素加边框有哪些方法?
- 相邻兄弟选择器、后代选择器和子选择器三者有什么区别?
- 举例说明你对相邻兄弟选择器的理解
- 你是怎么设计css sprites(精灵图)的?有哪些技巧?
- 请描述下你对translate()方法的理解
- 怎样去除图片自带的边距?
- 让你手写一个reset的文件,你应该怎么写?要考虑哪些方面呢?
- 你知道css的预处理器和后处理器都有哪些吗?它们有什么区别呢?
- 请使用css画一个圆,方法可以多种
- css中最常用的字体有哪些?你是怎么选择字体的?
- 请举例说明css有哪些不可继承的属性?
- 你有使用过preload、preconnect、prefetch这些属性吗?说说它们都有什么作用?
- 你是怎样对css文件进行压缩合并的?
- 如果css文件过大时,如何异步加载它?
- css3和css2的区别是什么?
- 你有使用过字体图标吗?它有什么好处?
- 你知道什么是流体排版吗?说说它的原理是什么?
- 请说说你对vh、vw的理解以及它们的运用场景是什么?
- css怎么更改表单的单选框或下拉框的默认样式?
- 你了解css3的currentColor吗?举例说明它的作用是什么?
- 怎么去掉点击a链接或者图片出现的边框?
- css的linear-gradient有什么作用呢?
- 会引起Reflow和Repaint的操作有哪些?
- 你有用过clip-path吗?说说你对它的理解和它都有哪些运用场景?
- 你是怎么选择resetting和normalizing的?为什么?
- position跟margin collapse这些特性相互叠加后会怎么样?
- 移动端的布局用过媒体查询吗?写一个试试
- 举例说明你知道的css技巧有哪些?
- 判断第一行和第二行的颜色分别是什么?并解释为什么?[代码]
<style>
.red {color:red;}
.green {color:green;}
</style>
<div class="red green">第一行:颜色是什么?</div>
<div class="green red">第二行:颜色是什么?</div>
- 用css怎么实现两端对齐?
- 你有用过弹性布局吗?说说你对它的理解
- 外边距重叠是什么?重叠的结果是什么?怎么防止外边距重叠?
- css中的border:none和border:0px有什么区别?
- 如何写高效的CSS?
- 如何做图片预览,如何放大一个图片?
- 举例说明在css3中怎么实现背景裁剪?
- 如何使用CSS的多列布局?
- 请说说CSS3实现文本效果的属性有哪些?
- 请说说在什么时候用transition?什么时候使用animation?
- 说说响应式设计(responsive design)和自适应设计(adaptive design)的区别?
- 什么是脱离文档流?有什么办法可以让元素脱离标准的文档流?
- 请问background-attachmentn属性有什么用途?
- 移动页面底部工具条有3个图标,如何平分?在设置边框后最后一个图标掉下去了怎么办?
- css怎样使每个字符宽度一样?
- 说下你对background-size的理解,它有什么运用场景?
- 如何自定义radio按钮的样式
- word-wrap、word-break和white-space有什么区别?
- 说说你对字母"X"在CSS中有什么作用?
- CSS3中的transition是否可以过渡opacity和display?
- 说下background-color:transparent和opacity:0的区别是什么?
- 你有用过IE css的expression表达式吗?说说你对它的理解和它有什么作用呢?
- z-index有时不起作用的原因是什么?怎么解决?
- 你有了解css计数器(序列数字字符自动递增)吗?如何通过css的content属性实现呢?
- 说说你对css的will-change属性的理解,它有什么作用呢?
- transition、animation、transform三者有什么区别?
- 如何使用css3实现一个div设置多张背景图片?
- 有哪些方式可以对一个DOM设置它的CSS样式?
- 举例说明实现圆角的方式有哪些?
- 有用过scss和sass吗?说说它们之间的区别是什么?
- absolute的containing block(容器块)计算方式和正常流有什么区别?
- 说说visibility属性的collapse属性值有什么作用?在不同浏览器下有什么区别?
- 说说你对min-width和max-width的理解,它们有什么运用场景?
- 说说你对hasLayout的理解,触发hasLayout的方式有哪些?
- 使用纯CSS代码实现动画的暂停与播放
- 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同?
- 什么是zoom?它有什么作用?
- 举例说明微信端兼容问题有哪些?
- 请举例说明伪元素 (pseudo-elements) 有哪些用途?
- 设置字体时为什么建议设置替换字体?
- 你有没有自己写过一套UI库?说下遇到哪些难点?
- 说说你对GPU的理解,举例说明哪些元素能触发GPU硬件加速?
- 你知道CSS中的字母"C"代表什么吗?
- 怎么自定义鼠标指针的图案?
- Reset CSS和Normalize CSS的区别是什么?
- 为什么要使用css sprites?
- 标签、class和id选择器三者的区别是什么?分别在什么时候用?
- 举例说明时间、频率、角度、弧度、百分度的单位分别是哪些?
- 你有用过table布局吗?说说你的感受
- 说说你对设备像素比的理解
- 说下你对cursor属性的理解
- position的relative和absolute定位原点是哪里?
- 过渡和动画的区别是什么?
- CSS中的calc()有什么作用?
- 怎么实现移动端的边框0.5px?
- 行内元素和块级元素有什么区别,如何相互转换?
- 说说你对低版本IE的盒子模型的理解
- 你是如何规划响应式布局的?
- 说说你对前端二倍图的理解?移动端使用二倍图比一倍图有什么好处?
- 如何让大小不同的图片等比缩放不变形显示在固定大小的div里?写出来
- 你对视网膜(Retina)分辨率有了解吗?有没有在实际中使用过?
- 移动端微信页面有哪些兼容性问题及解决方案是什么?
- 如何更改placeholder的字体颜色和大小?
- 行内css和important哪个优先级高?
- 当一个元素被设置为浮动后,它的display值变为什么呢?
- 为什么会出现浮动?在什么时候需要清除浮动呢?
- 写出div在不固定高度的情况下水平垂直居中的方法?
- 移动端的布局用过媒体查询吗?写出例子看看
- CSS的伪类和伪对象有什么不同?
- CSS的overflow属性定义溢出元素内容区的内容会如何处理呢?
- 外层有一个自适应高度的div,里面有两个div,一个高度固定300px,另一个怎么填满剩余的高度?
- 说说你对CSS样式覆盖规则的理解
- 写出几个初始化CSS的样式,并解释说明为什么要这样写
- display有哪些值?分别说明他们的作用是什么?
- 怎么让body高度自适应屏幕?为什么?
- font-style的属性有Italic和oblique,两者有什么区别呢?
- IE(6/7/8/9/10/11/Edge)下的hack写法分别有哪些?
- 写出你遇到过IE6/7/8/9的BUG及解决方法
- 举例说明css的基本语句构成是什么呢?
- 写例子说明如何强制(自动)中、英文换行与不换行
- 说说你对BEM规范的理解,同时举例说明常见的CSS规范有哪些?
- 遇到overflow: scroll不能平滑滚动怎么解决?
- 请问display:inline-block在什么时候会显示间隙?
- 用CSS画出一个任意角度的扇形,可以写多种实现的方法
- 请你解释下什么是浮动和它的工作原理是什么?同时浮动会引起什么问题?
- 说说你对!important的理解,一般在哪些场景使用?
- 在实际编写css中你有遇到过哪些浏览器兼容性的问题?怎么解决的?
- 怎么改变选中文本的文字颜色和背景色?
- 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢?
- 你有使用过哪些栅格系统?都有什么区别呢?
- 请说说
*{box-sizing: border-box;}的作用及好处有哪些 - 说说你对jpg、png、gif的理解,分别在什么场景下使用?有使用过webp吗?
- 如何消除transition闪屏?
- 元素竖向的百分比设置是相对容器的高度吗?
- 用CSS绘制一个红色的爱心
- 举例说明css中颜色的表示方法有几种
- 说说position的absolute和fixed共同与不同点分别是什么?
- 手动写动画最小时间间隔是多少,为什么?
- 怎样把一个div居中?怎样把一个浮动元素居中?怎样把绝对定位的div居中?
- 用css画一个太阳
- 你有用过哪些css框架?说说它们的特点
- box-sizing常用的属性有哪些?分别有什么作用?
- inline、block、inline-block这三个属性值有什么区别?
- margin和padding使用的场景有哪些?
- 什么是视差滚动?如何实现视差滚动的效果?
- css3的:nth-child和:nth-of-type的区别是什么?
- 怎么使用自定义字体?有什么注意事项?
- 要是position跟display、overflow、float这些特性相互叠加后会怎么样?
- 有用过Flex吗?简要说下你对它的了解
- 列举CSS优化、提高性能的方法
- 假如设计稿使用了非标准的字体,你该如何去实现它?
- 你知道全屏滚动的原理是什么吗?它用到了CSS的哪些属性?
- 你是怎样抽离样式模块的?
- 说说你对媒体查询的理解
- 你知道的等高布局有多少种?写出来
- 手写一个满屏品字布局的方案
- span与span之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
- 重置(初始化)css的作用是什么?
- 怎么让英文单词的首字母大写?
- 怎么才能让图文不可复制?
- 写出你知道的CSS水平和垂直居中的方法
- 实现单行文本居中和多行文本左对齐并超出显示"..."
- 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
- 写出主流浏览器内核私有属性的css前缀
- 使用flex实现三栏布局,两边固定,中间自适应
- 浏览器是怎样判断元素是否和某个CSS选择器匹配?
- 用CSS绘制一个三角形
- 说下line-height三种赋值方式有何区别?
- 让网页的字体变得清晰,变细用CSS怎么做?
- 描述下你所了解的图片格式及使用场景
- 请描述css的权重计算规则
- rgba()和opacity这两个的透明效果有什么区别呢?
- 怎样修改chrome记住密码后自动填充表单的黄色背景?
- 说说你对z-index的理解
- 在页面中的应该使用奇数还是偶数的字体?为什么呢?
- 你有用过CSS预处理器吗?喜欢用哪个?原理是什么?
- 说说CSS的优先级是如何计算的?
- 说说浏览器解析CSS选择器的过程?
- 说说你对line-height是如何理解的?
- 要让Chrome支持小于12px的文字怎么做?
- css的属性content有什么作用呢?有哪些场景可以用到?
- 什么是FOUC?你是如何避免FOUC的?
- 解释下 CSS sprites的原理和优缺点分别是什么?
- 请描述margin边界叠加是什么及解决方案
- style标签写在body前和body后的区别是什么?
- position:fixed;在ios下无效该怎么办?
- ::before和:after中单冒号和双冒号的区别是什么,这两个伪元素有什么作用?
- 说说你对css盒子模型的理解
- css常用的布局方式有哪些?
- 对比下px、em、rem有什么不同?
- 简述下你理解的优雅降级和渐进增强
- 清除浮动的方式有哪些及优缺点?
- 简述你对BFC规范的理解
- 用css创建一个三角形,并简述原理
- CSS3新增伪类有哪些并简要描述
- CSS选择器有哪些?哪些属性可以继承?
- 在页面上隐藏元素的方法有哪些?
- CSS3有哪些新增的特性?
- 圣杯布局和双飞翼布局的理解和区别,并用代码实现