fe-interview/category/css.md

css面试题

不定时更新

历史题目

最新：2021.02.27

• 你有使用过mask属性吗？请说说它的用途
• 你有使用过css-doodle吗？说说它的作用是什么？
• 使用纯css使得两个背景叠加
• 使用纯css画一个角向渐变的背景
• 如何让IE6支持PNG透明？
• 使用纯css画一个径向渐变的背景
• 使用纯css画一个线性渐变的背景
• 使用css画个动态的泳池特效
• 设置元素为display:flex后，哪些属性会失效呢？为什么？
• flex是哪些属性的简写呢？
• 说说display:flex和display:inline-flex有什么区别？
• input标签改变高度的同时如何使光标定位在左上角（不使用textarea）
• 使用css画一个羽毛球场地图
• css和wxss有什么区别？
• 如何让span在div中垂直居中？
• 使用绝对定位position:absolute;后，就不能使用margin: 0 auto;实现居中，为什么呢？如何解决？
• ::before和::after它们的使用场是什么？
• 如何给字体设置阴影效果？
• 如何将数字设为等宽？
• 如何将文字设为等宽？
• 使用css实现导航栏左右滑动
• 请使用纯css画出一条虚线，并设置虚线的间隙（不能使用图片）
• 使用css制作一个圣诞树
• 使用纯的css如何定义变量？请举例说明
• 用css画一个篮球场地图
• 用css画一个羽毛球场地图
• 用css画一个足球场地图
• 如何隐藏鼠标在某个区域内的光标？
• 用css隐藏input的光标
• 用纯CSS实现判断鼠标进入的方向
• 写的css样式是否能被js所读到？如果可以如何读取？
• 你有使用过css的clamp函数吗？说说它有什么用途？
• 你有写过Less的插件吗？
• 在LESS中如何定义变量上下文中的范围？
• 在Less中命令行里编译的命令是什么？
• 在Less中“Source Map Less Inline”选项代表什么？
• 在Less中数据URI的作用是什么？
• 如何在Less中创建循环结构？
• 在Less中有哪些不同类型的函数？
• 在Less中有哪些注释方式？
• 在Less中支持运算符吗？
• 在Less中什么是＆combinator？
• 在Less中使用extend有什么用？
• 在Less中是如何导入的？
• 在Less中e()函数的目的是什么？
• 在Less中使用命名空间和访问器有什么作用？
• 把Less编译为CSS的最佳方法是什么？
• 在Less中的颜色通道功能是什么？
• Less可以不通过编译直接在浏览器中使用吗？如何使用？
• 在Less中有哪些常用的函数？
• 在Less中转义有什么作用？
• 在Less中的Mixins有什么作用？
• 在Less中的嵌套作用是什么？
• Less变量的种类有哪些？
• 在Less中怎样使用变量？如何定义？
• 使用Less有哪些方式？
• Less的原理是什么？
• Less文件的扩展名是什么？
• Less现在最新的版本是使用的是什么语言编写的？
• 你知道Less刚出来时是用哪种语言编写的吗？
• Sass和Less有什么相同点？
• Sass脚本支持哪些数据类型？
• 在Sass中Mixin有什么应用场景？
• 怎样使用Sass的Mixin功能？
• Sass中什么是括号运算？
• 在Sass中如何执行布尔运算？
• Sass的色彩操作是什么？
• Sass的数字操作是什么？
• Sass中的@import函数有什么作用？
• Sass中如何编写占位符选择器？
• 如何定义一个Sass变量？
• 用于检测Sass中的错误是哪个指令？
• Sass中的@extend指令有什么作用？
• Sass中的@media指令有什么作用？
• Sass中的at-root指令有什么作用？
• 请解释下Sass中的嵌套规则是什么？
• Sass的注释和css注释之间有什么区别？
• Scss和Sass有什么区别？
• 你喜欢Sass还是Less？为什么？
• 你最喜欢Sass的原因是什么？
• css3的属性transfrom的值preserve-3d和perspective有什么区别？
• 你是如何检查css语法是否正确的？有哪些方法？
• css变量有哪些浏览器支持？
• 怎样在SVG中使用css变量？
• 怎样在@keyframes中使用CSS变量
• css变量区分大小写吗？
• css变量受哪些影响？
• css变量和预处理器中的变量有什么不同？
• css变量属性有什么用途？有什么优缺点？
• 说说你对css变量（自定义属性）的理解？
• css的属性list-style-position的值outside和inside有什么区别？
• 如何去掉em的默认样式？
• 说说你对screen.width伪响应式的理解
• 移动端开发时你了解淘宝的lib-flexible方案吗？它的原理是什么？
• pc端和移动端使用两套布局和使用一套自适应布局分别有哪些优缺点？
• 要开发一个pc端和移动端的自适应布局网站，说说你的方案是什么？
• 解释下使用2倍图片，有什么优缺点？
• 解释下为什么在移动端切图时会有使用到2倍图片呢？
• 请使用css column写一个多列布局
• 说说你对css3属性column的理解
• 如何判断dpr的倍数？
• css中如何获取dpr值？
• 元素包含块有什么作用？
• 如何确定元素的包含块？
• 说说你对css包含块的理解
• 你知道css压缩的方法和原理是什么吗？请描述一下
• 你觉得在css中如果值是0时写单位好还是不写好呢？为什么？
• 解释下为什么css中值为0时可以不写单位吗？
• css unicode字符集使用时要注意哪些问题？
• css unicode字符集有哪些分类？
• 如何去掉button的点击样式？
• 如何让子元素不继承父元素的:hover效果？
• 如何清除input元素聚焦时的边框
• 如果设置一个元素的字体为：font-size:18，没有写单位px，那么会默认有px的单位吗？
• 为什么有时候给元素设置宽度不起作用呢？
• 举例说明哪些css属性可以简写？
• 如果元素宽度不够时，如何使得长串单词不会被截断？
• 举例说明如何控制中文不换行？
• 控制换行的属性有哪些？
• 你感觉css哪块的知识点最难掌握？为什么？
• 如何垂直居中一个浮动的元素？
• 通过CSS的定位有几种，分别相对于什么定位？
• 如何创建块级格式化上下文(block formatting context),BFC有什么用
• 你有使用过touch-action属性吗？说说它的用途
• 你自认为自己的css水平如何？还有哪些是用css实现不了的？
• 请使用css实现一个小波纹的效果
• 你是如何对 CSS 和 JavaScript 代码组织的？有哪些原则？
• font-weight的默认值是多少？
• 使用css实现模糊的效果
• 使用css实现描边效果
• 使用css实现浮雕效果
• css中定义class时，中间有空格和没空格的区别是什么？
• 写一个特效：鼠标经过文字时，文字旋转360度
• 以前我们都提倡把css通过外部引入，但现在使用webpack时往往会和html打包在一起？这是为什么呢？
• 在什么情况下，用translate()而不用绝对定位？反之呢？请说明理由
• css预处理器的优点和缺点是什么？
• 请问下，居中为什么尽量用transform，而不用margin+left(top)？
• 请解释下float的工作原理
• 请描述一下网页的层叠等级(z-index)？
• 请解释下outline-offset属性有什么作用？
• 如何清除li列表的符号，改成图片背景
• 说说你对Bootstrap网格系统的工作原理的理解
• 合并CSS的方法有哪些？
• 可以改变页面布局的属性有哪些？
• 行内元素float:left后是否变为块级元素？
• 使用css3制作一个鼠标经过文本时，显示出边框的动画特效
• 使用css制作出一个星星
• 解释下1px、1rem、1em、1vh代表的含义分别是什么？
• 你有使用过@support吗？说说你对它的理解
• 你在使用calc过程中遇到过哪些坑？如何解决？
• 简述下Flex的容器和项目的概念
• 如何实现gif动图的暂停和播放？
• 请说说width: auto和width: 100%有什么区别？
• 伪类选择器和伪元素选择器有什么区别？
• 解释下为什么说通配符选择器要慎用？
• 给兄弟元素的标签设置红色
• 举例说明BFC有什么应用场景
• 使用纯css布局中一个“王”字
• 解释下BFC、IFC、GFC、FFC的区别是什么？
• 怎样解决float元素无法撑起父级容器的高度？
• 使用了float的标签，如何避免左侧贴边重叠？
• 使用flex实现一行有多个不等的标签元素宽度平均分配
• 怎么让position:fixed相对于父元素定位？
• 为什么代码中两个display属性为inline-block的元素之间有多余字符（包括换行、制表符等）会造成页面中这两个元素之间有空隙？解决方案是什么？替代方案又都有哪些？
• justify-content的space-between与around有什么区别？
• css如何去掉i标签默认的斜体？
• fixed定位脱离文档流与float有什么区别？
• 哪些方式使得position:fixed定位的基准元素改变？
• Fixed定位如果脱离Viewport会产生什么样的bug？如何解决？
• 如何创建stacking context？
• 分离图层做动画有什么优点？
• 使用css3动画代替js的动画有什么好处？
• 如何取消同级li的最后一个li标签的右边距？
• 请说说css常用的单位和不常用的单位分别有哪些？
• flex:1与flex:auto有什么区别？
• 简写的flex:1的完整写法是什么？
• 使用css实现一个弹幕的效果
• grid布局和flex布局有什么区别？
• 你有使用过grid布局吗？说说你对它的理解
• 使用css制作鼠标经过图片时，放大图片1.5倍
• 使用css制作吊扇转动的效果
• 使用css3实现小车行驶的动画效果
• 使用css实现闪光的霓虹灯文字效果
• 说说CSS对元素属性赋值的详细过程？
• 使用css3制作雪花效果
• 你最不喜欢css的哪些特性是什么？为什么？
• 在工作中有没有遇到过哪些前端样式你是用css做不出来的？做不出来怎么办？
• 当你忘记某个css时，你是如何解决的？
• 你现在还会经常学习css的新知识吗？
• 你觉得css高级的特性有哪些？
• 你是怎么学习css的？说说你的学习方法
• 你最喜欢的是哪个css特性？为什么？
• 你现在还经常写css代码吗？
• 使用css3制作下雨动画的效果
• 在不可替换元素上使用width/height/margin/padding会有什么样的表现？
• 我们使用第三方的css安全吗？为什么？
• 使用display: table-cell有什么应用场景呢？
• 如何优化打印样式？
• css加载会阻塞js运行吗？
• css加载会阻塞DOM树渲染吗？
• css加载会阻塞DOM树解析吗？
• 什么情况下会出现css阻塞？
• position的relative和absolute分别是相对谁进行定位的？
• 请说说position:absolute和float有什么不同？
• 当css中background或background-image的值为url()或url(#)时，会发生什么情况？为什么？如何解决？
• 请举例说明width:fit-conten有什么使用场景
• margin属性的负值 在inline-block元素下是如何表现的？
• 使用flex实现一个自适应的九官格
• rem的弊端是什么？
• 举例说明pointer-events有什么实际用途？
• css穿透属性有哪些？
• css中的fill有什么应用场景？
• 解释下z-index最大值和最小值可以设置为多少呢？
• z-index可以是负数吗？
• 不加class和id使得倒数三个li背景色为红色
• 在css中哪个属性会影响DOM读取文档流的顺序？
• css在页面上画一个正方形，边长为页面宽度的一半
• 举例说明photoshop中的设置与css哪些属性是对应的呢？
• 如何实现css隔离？
• 使用text-align: justify怎么让单行也起作用？
• 用css实现两端对齐text-align: justify有什么不足之处？
• 如何设置字体之间的间隙？
• 说说你对在web端图片清晰和模糊的理解
• 如何使两张图片叠加？
• 1in等于多少mm？1mm等于多少px？
• @media print可以用来控制web打印样式吗？
• page-break-before和page-break-after属性有什么应用场景？
• 有使用过css的images-set吗？它能解决什么问题？
• css variable的使用方法和好处有哪些？
• 请说说css的三大特性是什么？
• css子元素会继承父元素的font-size吗？请解释下面父子元素各字体的大小[代码]
• 你有用到以pt为单位过吗？pt单位有什么应用场景呢？
• 如何设置字体的左右间距？
• 使用css如何拉伸字体？
• 写出固定子容器在固定的父容器下水平垂直居中的布局
• 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行
• 怎样把单位cm转换成px呢（在打印时有时会用到）？
• flex与其他有什么不同，用它有什么好处？
• pseudo-class与pseudo-element有什么区别？
• 行内元素可以设置padding和margin吗？
• 如果要你自己设计一个css框架，说说你的思路
• 使用css3画个旋转的立方体
• translate3D有什么作用？
• BFC与IFC有什么区别？
• 举例说明BFC会与float元素相互覆盖吗？为什么？
• 如何形成BFC？
• 为什么float会导致父元素塌陷？
• 什么是逐帧动画？
• 什么是关键帧动画？
• 实现一个下拉不到底的橡皮筋效果
• 如何取消页面中选中的文字？
• 为什么伪类的content不能被选中？
• 举例说说你对white-space属性的理解
• ::first-letter有什么应用场景？
• 使用css画一个饼图的效果
• 使用css如何设置背景虚化？
• 举例说明background-repeat的新属性值：round和space的作用是什么？
• 举例说明with属性的fill-available有什么应用场景？
• width属性的min-content和max-content有什么作用？
• 你用过outline属性吗？它有什么运用场景？
• 为什么说css的选择器一般不要超过三级？
• 使用纯CSS实现3D按钮效果
• 使用css实现太阳自转同时地球围着太阳公转的效果
• 你有用过animation-fill-mode属性吗？它有什么应用场景？
• 当display:flex遇到white-space nowrap会对布局有什么样的影响？如何解决？
• 用css实现一个等腰三角形的小图标
• 使用css实现蒙版的效果
• 使用css实现手风琴的效果
• 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
• 假如css的分号写在声明块之外，将会发生什么呢？解释下原因[代码]
• 如何阻止:hover、:active等鼠标行为状态的触发？
• 在响应式布局中，如何使用纯css使得块元素等比缩放？
• 用css画一个平行四边形
• H5如何禁止显示系统菜单？
• 如何让表格单元格等宽显示？
• 固定的外框尺寸，里面的图片尺寸不固定，如何让图像自适应外框呢？
• 不用换行的标签，怎么伪元素实现换行的效果？
• 给一个图片设置透明有哪些方式呢？
• box-sizing的宽度包含了哪些？
• 判断如下边框的颜色，并解释为什么[代码]？
• 如何使用伪元素实现增大点击热区来增加用户体验？
• 怎么给手持设备添加特殊样式？
• 如何使用css显示a链接的url？
• css中的url()要不要加引号？说说你的理解
• 使用css写一个垂直翻转图片的效果
• 请写出font属性的快捷写法
• 举例说明与打印有关的属性有哪些？
• 如何让背景图片固定不随滚动条滚动？
• 你用过css的tab-size属性吗？浏览器默认显示tab为几个空格？
• clear属性只对块级元素有效么？为何无法应用于行内元素？
• css的负边距有哪些应用场景？
• 你了解CSS Houdini吗？说说它的运用场景有哪些？
• 使用css画个镰刀形的月亮
• 使用css写一个红绿灯交替的动画效果
• 除了可以用js跟踪用户信息外，如果不用js，使用纯css怎么做呢？
• 当拿到一个新的项目，让你对这个项目的css做下架构设计，你该如何下手？
• 表列举一些你认为最“昂贵”的css属性并解释为什么
• 为什么说css的选择器是从右向左匹配？
• 使用css实现霓虹灯效果
• :placeholder-shown和:focus-within这两个伪类你有使用过吗？说说看
• 使用css实现气泡框的效果
• 说说sroll-snap-type属性的运用场景有哪些？相关联的属性还有哪些？
• 使用css实现一个loading的效果
• 你有使用过css的混合模式mix-blend-mode和background-blend-mode吗？
• 使用负文本缩进text-indent: -9999px时有没有遇到过什么奇怪的问题呢？怎么解决？
• 你会经常用到伪元素吗？一般都用在哪方面？
• 用css画出一把刻度尺
• 说说position:sticky有什么应用场景？
• 如何使用css给一个正方形添加一条对角斜线？
• 举例说明CSS特性检测的方式有哪些？
• 你们团队中css的class命名采用的是什么方式呢？下划线还是横线还是驼峰？
• 使用纯css画出一个右侧滚动顶部进度条的效果
• 一个项目中有很多无用的css代码，怎么找到并清除这些无用的代码？
• 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
• 使用css画一根燃烧中的蜡烛
• 使用css画个鸡蛋
• CSS content属性特殊字符有哪些？
• 用css画出一个圆圈，里面有个叉号（不能用英文字母x）
• 用css画出一个圆圈，里面有个对号
• 用css画出两个大圆相交，可以在各自圆及相交部分输入文字
• 用css画出中间一个大圆，四周有12个小圆环绕并和大圆是同心
• 如何解决html设置height：100%无效的问题？
• css的height:100%和height:inherit有什么区别？
• css如何让height:100%起作用？
• 用css3实现伪3D的文字效果
• 用css3实现文字发光的效果
• 你有使用过css的属性background-blend-mode吗？说说它的运用场景有哪些？
• 如何使用css实现鼠标跟随？
• 能不能使用纯css使你的浏览器卡死？怎么实现？
• 为什么说对opacity进行动画要比box-shadow进行动画性能更好呢？
• 请问class与[class=xxx]的区别是什么？两者是否等价？
• 请使用纯css实现波浪效果
• 有哪些标签是不支持伪元素的？
• 如何重写行内样式？方法有哪些（至少两种）？
• 用css3画出一个立体魔方
• 举例说明shape-outside的属性的用途有哪些？
• ui设计中px、pt、ppi、dpi、dp、sp之间的关系？
• 使用css画个钟表的时间刻度
• 请使用css3实现图片的平滑转换
• 使用纯css能否监控到用户的一些信息？怎么实现？
• 在一个项目里，你是如何组织(架构)css代码的？
• 为了减小css文件的大小，怎么去除无用css呢？有哪些方法？
• css的加载会阻塞js运行吗？为什么？
• css的加载会阻塞DOM树解析和渲染吗？为什么？
• 异步加载CSS的方式有哪些？
• 举例说明如何从html元素继承box-sizing？
• 使用css的attr()写一个类似a标签title的提示框
• 鼠标事件css的:hover和js的mouseover有什么区别？
• 举例说明你对指针事件（pointer-events）的理解
• 如何用css实现把“我不爱996”变成“699爱不我”？
• scroll-snap-align属性的应用场景是什么？
• css中Scroll-behavior属性有什么应用场景？
• 你有使用过css的writing-mode属性吗？说说它有哪些应用场景？
• 使用css实现对话气泡的效果
• 如何隐藏没有静音、自动播放的音视频？
• 怎么使用css选择空链接？
• 说说你对table-layout的理解，它有什么运用场景？
• 颜色hsla的字母分别表示什么？
• 如何禁用移动的选择高亮？
• 使用css实现悬浮提示文本
• 怎么设置可点击的元素上强制手型？
• 如何使用css实现跨浏览器的最小高度？
• 使用css3实现一个斑马线的效果
• 使用纯css来创建一个滑块
• 用css画一个五边形和一个六边形
• 你有没有使用过“形似猫头鹰”（例：* + *{ ... }） 的选择器？
• 为什么说css中能用子代选择器的时候不要用后代选择器？
• 如何给文字的color设置渐变
• 如何在白天和黑夜自动切换页面的颜色？
• CSS中哪些属性会引起GPU渲染，会增加耗电吗？
• flex布局的缺点有哪些？（除兼容性外）
• OOCSS有哪些好处？对应的库有哪些？
• 你知道什么是面向对象的css（oocss）吗？有没有实践过？
• 如何解决IE6浮动时产生双倍边距的BUG？
• 如何让IE6支持min-width和max-width？
• 什么是hack？css的hack有哪些？
• padding会影响到元素的大小，那不想让它影响到元素的宽度应该怎么办？
• 说说你对相对定位、绝对定位、固定定位的理解
• css中的选择器、属性、属性值区分大小写吗？
• img标签是行内元素，为什么却能设置宽高？
• 如何禁止长按保存或复制图像？
• css的height:100%和height:inherit之间有什么区别呢？
• css的哪个属性可以把所有元素或其父元素的属性重置呢？
• 如何取消从父级元素继承下来的CSS样式呢？
• 说下你对css样式的这几个属性值initial、inherit、unset、revert的理解
• 如何解决css加载字体跨域的问题？
• 当使用@font-face的时候，为什么src中要加入local呢？
• 你有使用过font-size-adjust属性吗？说说它的作用是什么？
• body{height:100%}和html,body{height:100%}有什么区别？为什么html要设置height:100%呢，html不就是整个窗口吗？
• 你所理解的css高级技巧有哪些？
• 举例说明跟字体相关的属性有哪些？
• 你知道字体所拥有的字重的数量和font-weight的数值字重是什么对应关系吗？
• 字体的粗细的属性是用哪一个？它有哪些属性值？
• 用CSS实现一个轮播图
• 用CSS实现tab切换
• 移动端1px像素的问题及解决方案是什么？
• 如何将元素的所有css属性恢复为初始化状态？
• 使用纯css实现一个rate评分的功能
• css中的baseline，你知道吗？
• 你知道什么是动态伪类吗？
• 使用css3绘制一个QQ小企鹅的LOGO
• 使用css3画一个扇形
• 请使用css3来模拟中/英文打字的效果
• 使用css3绘制一个圆形动态的时钟
• 使用css将图片转换成黑白的效果
• 说说你对css的合成与混合模式的理解
• 一个页面引用多个文件，如何防止样式冲突？
• 如何清除在项目中无用的css代码呢？
• css图片缩放失真出现锯齿的如何解决呢？
• css如何消除字体的锯齿？
• 请使用CSS画一个带锯齿形边框圆圈
• sass是如何导入模块的
• 使用sass里，你是怎么组织你的sass文件的？
• 说说sass有哪些你认为很棒的特性
• 在sass中可以执行布尔运算吗？
• 你有用过sass中的Mixin功能吗？它有哪些作用？
• 检测sass中错误的指令是哪个？
• 说说你对sass的嵌套规则的理解？
• 你认为sass和less的最大区别是什么呢？你喜欢哪个？为什么？
• sass是怎么定义变量的？
• 使用sass的方式有哪些？
• 为什么要使用sass/less？
• 你对伪类了解多少？分为几大类？
• 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景
• 你知道什么是CSS-in-JS吗？说说你对它的了解
• 你知道什么是聚焦环吗？怎么解决呢？
• 如何让一个块元素绝对居中？
• css的user-select:all 有什么用处？
• 说说display:none和visibility:hidden的区别
• 如何使用CSS绘制一个汉堡式菜单
• 你是如何压缩字体的？
• 如何修改美化radio、checkbox的默认样式？
• 你有使用过postcss吗？它和less/scss/stylus有什么区别？
• 解释下什么是PPI和DP？
• 头部设置meta也可以做到自适应为啥还要用rem？
• 在rem下如何实现1像素？
• rem是如何实现自适应布局的？
• 使用rem的优缺点是什么？和使用百分比有什么区别？
• 当页面采用rem布局时，如何解决用户设置字体大小造成的页面布局错位？
• 使用rem时应该注意什么？
• 使用rem布局时怎样合理设置根标签字体大小？
• 解释下css3的flexbox（弹性盒布局模型），以及它应用场景有哪些？
• 你有使用过vmax和vmin吗？说说你对它们的理解
• 如何设置背景图片不随着文本内容的滚动而滚动？
• css中兼容ie浏览器的前缀是什么?
• 请问触发hasLayout的后果是什么？
• css中class和id选择器有什么区别？
• 移动端页面不满一屏时如何实现满屏背景？
• 写一个高度从0到auto的transition动画
• 如何使用CSS3的属性设置模拟边框跟border效果一样？
• 怎么IE6下在使用margin:0 auto;无法使其居中？
• 使用css实现彩虹的效果
• css中padding和margin是相对于父元素还是子元素呢？
• 当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？
• 在css中为什么说不建议使用@import？
• 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环
• 说出至少十条你理解的css规范
• 使用css画出一个五角星
• 使用overflow: scroll时不能平滑滚动怎样解决？
• 请说下你对css对象模型(CSSOM)的理解
• 用css实现倒影的效果
• 用css实现饼图效果
• 怎么使用纯css实现左右拉伸拖动？
• 举例说明attr()的使用场景
• 你有使用:valid和:invalid来校验表单吗？
• 使用css写一个水平翻转文字的效果
• 举例说明:not()的使用场景有哪些
• 怎么让div中的图片和文字同时上下居中？
• 怎么使图片宽度自适应呢？
• 实现文本的竖向排版
• 你有用过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技巧有哪些？
• 判断第一行和第二行的颜色分别是什么？并解释为什么？[代码]
• 用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有哪些新增的特性？
• 圣杯布局和双飞翼布局的理解和区别，并用代码实现