前端面试题整理（css）

1、介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。

CSS hack的原理：

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

条件注释法：

只在IE下生效：

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

只在IE6下生效：

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

只在IE6以上版本生效：

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

只在IE8上不生效：

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

非IE浏览器生效：

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![endif]-->

类内属性前缀法：

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*color

青色

+color

绿色

-color

黄色

_color

蓝色

#color

紫色

color:red\0

红色

\9\0

color:red\9\0

粉色

!important

color:blue !important;color:green;

棕色

说明：在标准模式中

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

选择器前缀法：

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

CSS hack利弊

一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量 CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8- 的专属hack出马了。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。相信只要大家一起努力，少用、慎用hack，未来一定会促使浏览器厂商的标准越来越趋于统一，顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack，必将减轻我们编码的复杂度，少做无用功。

2、介绍CSS盒模型。

盒状模型是CSS中重要的概念。盒状模型中最重要的是内容，它是必备的，其他的几项都是可选的。 如上图，盒状模型有内至外的顺序是：

content（内容，它可以是文字、图片等。）
padding（内边距，也有人称之为空白、内补丁等。）
border（边框。）
margin（外边距，也可称为边界。）

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css盒子模型</title>

    <style>

        *{margin: 0;padding: 0;} /*清除浏览器默认的边距*/

        .block{width:300px;height:200px;padding:10px;border:10px solid red;background: #000;margin:20px 0 0 20px;}

        .box{height:100px;width: 200px;background: yellow;color: #ff4a00;border:5px solid green;}

    </style>

</head>

<body>

    <div class="block">

        <div class="box">内容</div>

    </div>

</body>

</html>

aaarticlea/png;base64,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" alt="" />

3、CSS层叠是什么？介绍一下。

我认可的理解：层叠指的是上级标签的样式会自动继承到其所有下级标签，如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中，除非<p>重写了相关样式将其覆盖。
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名，如对于页面上方的<div>，可将其id设为header；页面下方的<div>设为footer，可以增强CSS的可维护性。

基本上层叠的意思就是“继承”、“权重”、“覆盖”，通过良好的层级命名更好的实现效果，更少的代码，更多的功能。

4、都知道哪些CSS浏览器兼容性问题。

问题1：不同浏览器的标签默认的外边距（margin）和内边距（padding）不同

解决方案：*{margin:0;padding:0;}

备注：不建议通配符*，css遍历也是有代价的（虽说现代浏览器可以忽略）。可以写全body,p,html,h1,h2,h3...{margin:0;padding:0;}

问题2：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div+float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

问题3：图片默认有间距

解决方案：使用float属性为img布局，上下间距可以设置vertical-align: middle;或者设置成display:block。

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

问题4：CSS透明问题

解决方案：

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

备注：最好两个都写，并将opacity属性放在下面。

问题5：CSS圆角问题

解决方案：ie7以下版本不支持圆角,其他浏览器都是加前缀例：FF（-moz-）

备注：随着浏览器更新换代，圆角属性都会被支持的；ie6-7,可以用三角形实现（有兴趣的可以研究研究）

5、CSS3都有哪些新内容。

css3边框：

border-radius：圆角边框
box-shadow：边框阴影
border-image：边框图片

css3背景：

background-size：图片大小
background-origin：图片定位区域

css3文本效果：

text-shadow：文本阴影
word-wrap：自动换行

css3字体：

@font-face：定义字体

css32D转换：

translate()：当前位置移动
rotate()：顺时针旋转角度
scale()：元素尺寸放大缩小
skew()：元素翻转
matrix()：2D转换的组合

css33D转换：

rotateX()：围绕其 X 轴旋转
rotateY():围绕其 Y 轴旋转

css3过渡：

transition：hover过渡

css3动画：

animation：动画设置

@keyframes：创建动画规则

css3多列：

column-count：分隔的列数
column-gap：列之间的间隔
column-rule：列之间的宽度、样式和颜色

css3用户界面：

resize：是否可由用户调整元素尺寸
box-sizing：可以改变盒子模型
outline-offset：超出边框边缘的位置绘制轮廓