CSS面试题

基础

CSS样式(选择器)的优先级

计算权重
!important
内联样式
后写的优先级高
View Code

雪碧图的作用

减少HTTP请求数,提高加载性能
有一些情况下可以减少图片大小
View Code

base64的使用

用于减少HTTP请求
使用于小图片
base64的体积约为原图4/3
View Code

伪类和伪元素

伪类表状态
伪元素是真的有元素
前者单冒号,后者双冒号
View Code

如何美化checkbox

label[for]和id
隐藏元素input
:checked+label
View Code

实现两栏(三栏)布局的方法

float+margin布局(清楚浮动)
inline-block布局(元素间隙)
flexbox布局
View Code

position:absolute/fixed有什么区别

前者相对最近的absolute/relative
后者相对于屏幕(viewport)
View Code

display:inline-block的间隙

原因:字符间距
解决:消灭字符或者消灭间距(fonts-size:0
View Code

如何清楚浮动

让盒子负责自己的布局
overflow:hidden(auto)
::after{clear:both;}
View Code

如何适配移动端页面

viewport
rem/viewport/media query
设计上:隐藏 折行 自适应
View Code

如何产生不占空间的边框

box-shadow
outline
View Code

css动画的实现方式有几种

transition
keyframes(animation)
View Code

过渡动画和关键帧动画的区别

过渡动画需要有状态变化
关键帧动画不需要状态变化
关键帧动画能控制更精细
View Code

如何实现逐帧动画

使用关键帧动画
去掉补间steps
View Code

css的引入方式有哪些,link和@import的区别

link是HTML提高的标签,@import是CSS的提供的语法规则
页面加载时候link引入的css直接加载,@import引入的css等页面加载完毕后被加载
l
View Code

行内元素有哪些,块级元素有哪些,CSS的盒子模型

行内元素div/p/ul/ol/li
块级元素a/span/em
盒子模型width/height/padding/border/margin
View Code
原文地址:https://www.cnblogs.com/sonwrain/p/10551477.html