CSS练习题

display:none和visibility:hidden的区别是？
相对，固定，绝对和静态定位的元素有什么区别？
详细说明CSS3新特性？
Padding和Margin有什么区别？
CSS引入的方式有哪些? link和@import的区别是?
CSS居中（包括水平居中和垂直居中）的方案有哪些？
解释CSS的盒子模型？
CSS哪些属性可以继承？
为什么要初始化CSS样式？
使用 CSS 预处理器的优缺点有哪些？
简述写高效CSS时会有哪些问题需要考虑？
解释下浏览器是如何判断元素是否匹配某个CSS选择器？
解释一下 CSS Sprite，以及如何在页面或网站中使用它？
简要描述CSS中 content属性的作用？
简述GFC规范的理解？
简述对FFC规范的理解？
简述CSS什么是外边距重叠？重叠的结果是什么？
简述CSS中，自适应的单位都有哪些？
解释first-child与first-of-type的区别是什么？
简述content-box盒模型？
简述padding-box盒模型？
简述Animation属性值有哪些？
CSS如何把一个元素旋转30°？
简述CSS盒阴影的原理？
简述CSS中background-clip和 background-origin的区别？
CSS如何实现文本换行？
简述CSS如何实现超出隐藏省略？
简述CSS实现自适应正方形、等宽高比矩形？
简述CSS实现两栏布局的方式？
简述元素⽔平垂直居中的方法有哪些？如果元素不定宽高呢？
简述深入理解设备像素、CSS像素、设备独立像素、 DPR、PPI之间的区别与适配⽅案？
解释在IE低版本下的怪异盒模型和W3C的标准盒模型和弹性盒模型？
介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
CSS优先级算法如何计算？
CSS3新增伪类有那些?
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
请解释一下CSS3的flexbox（弹性盒布局模型），以及适用场景？
用纯CSS创建一个三角形的原理是什么？
一个满屏品字布局如何设计?
常见的CSS兼容性问题有哪些？
对BFC规范(块级格式化上下文：block formatting context)的理解？
上下margin重合的问题
设置元素浮动后，该元素的display值是多少？
移动端的布局用过媒体查询吗？
在网页中的应该使用奇数还是偶数的字体？为什么呢？
margin和padding分别适合什么场景使用？
元素竖向的百分比设定是相对于容器的高度吗？
全屏滚动的原理是什么？用到了CSS的哪些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
视差滚动效果？
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
怎么让Chrome支持小于12px 的文字？
让页面里的字体变清晰，变细用CSS怎么做？
position:fixed在Android下无效怎么处理？
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
display:inline-block 什么时候会显示间隙？
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
vw、vh 是什么？
介绍下 BFC 及其应用
介绍下 BFC、IFC、GFC 和 FFC
如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
居中为什么要使用 transform（为什么不使用 marginLeft/top）
介绍下粘性布局（sticky）
说出 space-between 和 space-around 的区别？
CSS3 中 transition 和 animation 的属性分别有哪些?
分析比较 opacity: 0、visibility: hidden、display: none 优
讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理
如何用 CSS 实现一个三角形
如何触发重排和重绘？
重绘与重排的区别？
如何优化图片
你能描述一下渐进增强和优雅降级之间的不同吗?
CSS3 新增了那些东西？
隐藏页面中的某个元素的方法有哪些？
display 有哪些值？说明他们的作用?
position 的值有哪些？
写出几种IE6 BUG的解决方法
absolute 的 containing block(容器块)计算方式跟正常流有什么不同？
position 跟 display、overflow、float 这些特性相互叠加后会怎么样？
为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？优缺点是什么？你认为最好的是哪一种？为
style 标签写在 body 后与 body前有什么区别？
CSS Sprites是什么？它的优势和劣势？
有哪些方式可以对一个 DOM 设置它的CSS样式？
CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
什么是 CSS Hack？IE6,7,8 的 hack 分别是什么？
行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
rgba() 和 opacity 的透明效果有什么不同？
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
描述一个"reset"的CSS文件并如何使用它。知道normalize. css吗？你了解他们的不同之
translate()方法能移动一个元素在z轴上的位置吗？
css的基本语句构成是?
CSS中使用列布局是什么？
如何水平并且垂直居中一张背景图
font-style属性可以让它赋值为“oblique”是什么意思
如何理解 CSS 的继承和重用？
制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
强制换行的css是什么？
用CSS实现一个扇形
用CSS画一条0. 5px的线
CSS中可继承与不可继承属性有哪些
display的属性值及其作用
display的block、inline和inline-block的区别
transition和animation的区别
伪元素和伪类的区别和作用？
对requestAnimationframe的理解
为什么有时候⽤translate来改变位置⽽不是定位？
替换元素的概念及计算规则
常见的图片格式及使用场景
什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
对 line-height 的理解及其赋值方式
CSS 优化和提高性能的方法有哪些？
Sass、Less 是什么？为什么要使用他们？
对媒体查询的理解？
对 CSS 工程化的理解
如何判断元素是否到达可视区域
z-index属性在什么情况下会失效
CSS3中的transform有哪些属性
使用 clear 属性清除浮动的原理？
position的属性有哪些，区别是什么
display、float、position的关系
px、em、rem的区别及使用场景
三栏布局的实现
如何根据设计稿进行移动端适配？
对Flex布局的理解及其使用场景
什么是CSS选择器？举几个例子。
CSS盒模型是什么？包含哪些部分？
如何实现一个响应式布局？
什么是CSS优先级（Specificity）？怎么计算？
解释一下“清除浮动”（clearfix）的常用方法。
什么是CSS预处理器？列出几个常用的预处理器。
Grid布局与Flexbox有什么区别？
解释一下CSS中的Position属性的不同值（static, relative, absolute
什么是CSS变量（custom properties）？
在CSS中如何使用媒体查询？
讲述一下伪类和伪元素的区别。
如何实现渐变效果？
解释CSS中的“z-index”属性。
如何实现一个简单的CSS动画？
什么是CSS的“过渡效果（transition）”？
如何使用CSS隐藏元素但保留其占位？
讲述一下如何在CSS中使用字体图标（如Font Awesome）。
解释一下CSS中的“display”属性的不同值。
解释什么是响应式设计和自适应设计。
什么是BEM（Block Element Modifier）命名规则？
请解释CSS的层叠上下文（stacking context）是什么？
CSS代表什么？
CSS规则由哪几部分组成？
如何将CSS样式应用到HTML文档中？
内联样式、内部样式表和外部样式表有何区别？
如何在CSS中使用注释？
CSS选择器有哪些种类？
通配符选择器（*）的作用是什么？
ID选择器和类选择器有何区别？
如何在CSS中使用伪元素？
CSS中的继承是什么意思？
如何重置浏览器默认样式？
CSS中的层叠顺序是什么？
如何在CSS中定义优先级？
什么是CSS特异性？
如何使用CSS进行盒模型（Box Model）布局？
如何设置背景颜色和背景图片？
如何设置背景图片的平铺方式？
如何在CSS中使用浮动（float）布局？
绝对定位、相对定位和固定定位有何区别？
Flex容器和Flex项有哪些属性？
如何在CSS中使用响应式设计？
如何在CSS中设置边距和填充？
如何使用CSS设置边框样式？
如何在CSS中设置表格样式？
如何在CSS中使用子代选择器？
如何在CSS中使用相邻兄弟选择器？
如何在CSS中使用视口单位？
如何在CSS中使用百分比单位？
如何在CSS中使用断点？
如何在CSS中使用渐进增强和优雅降级？
如何在CSS中使用变量（CSS Custom Properties）？
如何在CSS中使用容器查询（Container Queries）？
如何在CSS中使用网格布局（Grid Layout）？
如何在CSS中使用形状（Shape Outside）？
如何在CSS中使用颜色函数（Color Functions）？
如何在CSS中使用过滤器（Filters）？
如何使用CSS预处理器（如Sass、Less）？
如何使用CSS后处理器（如PostCSS）？
如何使用CSS框架（如Bootstrap、Tailwind CSS）？
如何优化CSS加载性能？
如何减少HTTP请求次数？
如何使用CSS Sprites？
如何使用CSS中的Critical Path Rendering？
如何使用CSS中的关键路径渲染（Critical CSS）？
如何在CSS中考虑无障碍性（Accessibility）？
如何使用CSS中的ARIA属性？
如何使用CSS中的对比度和颜色？
如何在项目中组织CSS文件？
如何处理复杂的CSS选择器？
如何调试CSS样式冲突？
如何在团队项目中维护CSS代码？
如何在CSS中使用模块化设计？
如何在CSS中使用原子设计（Atomic Design）？
如何在CSS中使用选择器组合？
如何在CSS中使用通配符选择器？
如何在CSS中使用属性值选择器？
如何在CSS中使用伪类和伪元素？
如何在CSS中使用通用选择器？
CSS中的z-index属性是如何工作的？它依赖于哪些条件？
CSS选择器中+、~、>符号的作用分别是什么？
如何实现元素的水平垂直居中？给出几种方法。
CSS3中的Grid布局有什么特点？如何使用？
CSS中的position属性有哪些值？它们的作用是什么？
opacity和rgba()的区别是什么？
请解释BFC（Block Formatting Context）并给出几个触发BFC的例子。
CSS中!important规则的作用是什么？应如何谨慎使用？
如何画出一个0. 5px的边框？
box-sizing属性的作用是什么？content-box和border-box的区别
CSS中的::before和::after伪元素常用于哪些场景？
CSS3中的动画（Animations）和过渡（Transitions）有什么区别？
如何理解CSS的层叠（Cascading）和继承（Inheritance）规则？
CSS中calc()函数的作用是什么？如何使用？
请解释什么是CSS预处理器，并列举几个常见的CSS预处理器。
CSS预处理器相比原生CSS有哪些主要优势？
在Sass中，变量是如何定义的？请给出一个例子。
如何在Sass中使用嵌套规则？请给出一个示例代码。
Sass中的Mixin和Function有什么区别？请分别给出使用场景。
Less和Sass之间有哪些主要区别？在项目中你更倾向于使用哪一个，为什么？
请解释CSS预处理器中的继承机制，并给出一个使用Sass或Less的示例。
如何将Sass或Less文件编译成CSS文件？常用的编译工具有哪些？
在使用CSS预处理器时，如何处理浏览器兼容性问题？
请描述一下CSS预处理器中的条件语句和循环语句的用法。
如何在Sass中使用占位符选择器（Placeholder Selectors）？它们与普通的类选择器
CSS预处理器中的导入（@import）和原生CSS中的@import有何区别？
请给出一个使用Sass或Less进行颜色函数操作的例子。
如何在CSS预处理器中管理颜色、字体等全局变量？
你如何在项目中使用CSS预处理器？
说明变量在CSS预处理器中的作用和使用方式。
什么是Mixin，如何定义和使用它？
什么是条件语句？在预处理器中如何实现条件逻辑？
如何管理和组织大型项目中的CSS预处理文件？
预处理器中的函数有什么用？能否提供一个示例？
请讨论CSS模块化的概念以及预处理器在此中的作用。
你在使用预处理器时遇到过哪些挑战，如何解决的？
如何处理预处理器编译后的CSS文件？
预处理器如何优化CSS文件的加载性能？
使用预处理器时，如何实现CSS的重用？
如何利用预处理器的功能减少样式表的重复？
CSS预处理器是否有对性能的影响？如果有，是什么？