1.如何垂直居中一个元素？
方法一：绝对定位居中（原始版之已知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
margin-top: -100px; /*设为高度的1/2*/
margin-left: -100px; /*设为宽度的1/2*/
}
方法二：绝对定位居中（改进版之一未知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}
方法三：绝对定位居中（改进版之二未知元素的高宽）
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto; /*设置水平垂直方向都为居中*/
position: absolute; /*父元素需要相对定位*/
left: 0;
top: 0;
right: 0;
bottom: 0; /*让四个定位属性都为0*/
}
方法四：flex 布局居中
body {
display: flex; /*设置外层盒子display为flex,flex弹性盒子模型布局*/
align-items: center; /*设置内层盒子的垂直居中*/
justify-content: center; /*设置内层盒子的水平居中*/
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
}
}
如何垂直居中一个 img
.content {
//img的容器设置如下
display: table-cell;
text-align: center;/*文本水平居中*/
vertical-align: middle;/*垂直水平居中一个图像*/
}
2.什么是 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
形成 BFC 的条件
浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC 的特性
内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
3.用纯 CSS 创建一个三角形的原理是什么？
span {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
4.Sass、LESS 是什么？大家为什么要使用他们？
他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS代码一同编译。
5.移动端 1px 问题的解决办法
推荐解决方法：媒体查询 + transfrom
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
6.li 与 li 之间有看不见的空白间隔是什么原因引起
浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格，也就是我们上面的代码换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决方案：
方法一：既然是因为‹li›换行导致的，那就可以将‹li›代码全部写在一排，如下
‹div class='wrap'›
‹h3›li标签空白测试‹/h3›
‹ul›
‹li class='part1'›‹/li›
‹li class='part2'›‹/li›
‹li class='part3'›‹/li›
‹li class='part4'›‹/li›
‹/ul›
‹/div›
方法二：我们为了代码美观以及方便修改，很多时候我们不可能将‹li›全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将‹ul›内的字符尺寸直接设为 0，将下面样式放入样式表，问题解决。
.wrap ul {
font-size: 0px;
}
7.怎么让 Chrome 支持小于 12px 的文字？
css3 的 transform 属性，设置值为 scale(x,y) 定义 2D 缩放转换
示例：
-webkit-transform: scale(0.50);
8.display:inline-block 什么时候会显示间隙？
间隙产生的原因是因为，换行或空格会占据一定的位置
推荐解决方法：
父元素中设置 font-size:0;letter-spaceing:-4px;
9.png、jpg、gif、webp这些图片格式解释一下
gif 图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256 种颜色
jpg 支持上百万种颜色，有损压缩，压缩比可达 180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
png 为替代 gif 产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8 简单说是静态 gif，也只有256 色，png24 不透明，但不止 256 色。
webp 谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C浏览器才支持，google39+，safari7+
10.什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
示例如下：
#test{
width:300px;
height:300px;
background-color:blue; /_firefox_/
background-color:red\9; /_all ie_/
background-color:yellow; /_ie8_/
+background-color:pink; /_ie7_/
\_background-color:orange; /_ie6_/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px)
{ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} } /*chrome and safari*/
11.重置（resetting）CSS 和 标准化（normalizing）CSS 的区别
重置（Resetting）： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像margin、padding、font-size这些样式全部置成一样。你将必须重新定义各种元素的样式。
标准化（Normalizing）： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。
12.css sprite 是什么,有什么优缺点
概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度。
增加图片信息重复度，提高压缩比，减少图片大小。
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
缺点：
图片合并麻烦。
维护麻烦，修改一个图片可能需要从新布局整个图片，样式。
13.css3 有哪些新特性
选择器
E:last-child 匹配父元素的最后一个子元素 E。
E:nth-child(n)匹配父元素的第 n 个子元素 E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。
RGBA
多栏布局
‹div class='mul-col'›
‹div›
‹h3›新手上路‹/h3›
‹p›新手专区 消费警示 交易安全 24小时在线帮助 免费开店‹/p›
‹/div›
‹div›
‹h3›付款方式‹/h3›
‹p›快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款‹/p›
‹/div›
‹div›
‹h3›淘宝特色‹/h3›
‹p›手机淘宝 旺信 大众评审 B格指南‹/p›
‹/div›
‹/div›
.mul-col {
column-count: 3;
column-gap: 5px;
column-rule: 1px solid gray;
border-radius: 5px;
border: 1px solid gray;
padding: 10px;
}
多背景图
backgroundimage:url('1.jpg),url('2.jpg')
CSS3 word-wrap 属性
p.test {
word-wrap: break-word;
}
文字阴影
text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);
@font-face 属性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
@font-face {
font-family: BorderWeb;
src: url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src: url(RUNICMT0.eot);
}
.border {
font-size: 35px;
color: black;
font-family: 'BorderWeb';
}
.event {
font-size: 110px;
color: black;
font-family: 'Runic';
}/* 淘宝网字体使用 */
@font-face {
font-family: iconfont;
src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}
圆角
border-radius: 15px;
盒阴影
box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
盒子大小
CSS3 box-sizing 属性
媒体查询
CSS3 @media 查询
CSS3 动画
@keyframes
@keyframes abc {
from {
transform: rotate(0);
}
50% {
transform: rotate(90deg);
}
to {
transform: rotate(360deg);
}
}
渐变效果
background-image: -webkit-gradient(
linear,
0% 0%,
100% 0%,
from(#2a8bbe),
to(#fe280e)
);
CSS3 弹性盒子模型
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 过渡
div {
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
CSS3 变换
rotate()旋转
translate()平移
scale( )缩放
skew()扭曲/倾斜
变换基点
3d 转换
14.CSS 性能优化
内联首屏关键 CSS（Critical CSS）
内联 CSS 能够使浏览器开始页面渲染的时间提前，只将渲染首屏内容所需的关键 CSS 内联到 HTML 中
异步加载
CSS 文件压缩
去除无用 CSS
15.如何解决不同浏览器的样式兼容性问题？
在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
使用已经处理好此类问题的库，比如 Bootstrap。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Reset CSS 或 Normalize.css。
16.除了screen你还能说出一个 @media 属性的例子吗？
all 适用于所有设备。
print 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。
screen 主要适用于彩色的电脑屏幕
speech speech 这个合成器. 注意: CSS2 已经有一个相似的媒体类型叫 aural.
编写高效的 CSS 应该注意什么？
首先，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素
然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。
17.响应式设计与自适应设计有何不同？
响应式设计和自适应设计都以提高不同设备间的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。
响应式设计的适应性原则：网站应该凭借一份代码，在各种设备上都有良好的显示和使用效果。响应式网站通过使用媒体查询，自适应栅格和响应式图片，基于多种因素进行变化，创造出优良的用户体验。就像一个球通过膨胀和收缩，来适应不同大小的篮圈。
自适应设计更像是渐进式增强的现代解释。与响应式设计单一地去适配不同，自适应设计通过检测设备和其他特征，从早已定义好的一系列视窗大小和其他特性中，选出最恰当的功能和布局。与使用一个球去穿过各种的篮筐不同，自适应设计允许使用多个球，然后根据不同的篮筐大小，去选择最合适的一个。
18.什么时候用translate定位
translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。
当使用translate()时，元素仍然占据其原始空间（有点像position：relative），这与改变绝对定位不同。
19.文本超出部分显示省略号
单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;
20.过渡与动画的区别是什么
transition
可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性
animation
可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。
21.rgba()和 opacity 的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
其他css面试题总结
(24条消息) 【前端面试题】02—59道CSS面试题(附答案)_普通网友的博客-CSDN博客
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
