前端面试题整理（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）

盒状模型是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,可以用三角形实现（有兴趣的可以研究研究）

前端面试题整理（css）

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：超出边框边缘的位置绘制轮廓

前端面试题整理（css）的更多相关文章

web前端面试题HTML/CSS部分
web前端面试题HTML/CSS部分前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...
【web前端面试题整理02】前端面试题第二弹袭来，接招！
前言今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼题目一览 Jav ...
前端面试题：CSS实现水平垂直居中
这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现这一种工作中用的应该是最多的,兼 ...
【web前端面试题整理06】成都第一弹，邂逅聚美优品
前言上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...
Web 前端面试题整理(不定时更新)
重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的! 面试有几点需注意: 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增 ...
2019届校招前端面试题整理——HTML、CSS篇
前言 2019届校招陆陆续续开始了,整理了一些高频的面试题. HTML部分 1. 什么是<!DOCTYPE>? DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行.来 ...
【web前端面试题整理03】来看一点CSS相关的吧
前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...
[WEB面试题] web前端面试题HTML+CSS第一弹，个人整理部分面试题汇总
以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...
最近面试前端面试题整理（css部分）
对最近面试的面试题坐下总结: 一,css部分 1,html元素的垂直居中答案: <div id="box"> <div> 测试 </div> ...

随机推荐

C&num; TCP socket发送大数据包时，接收端和发送端数据不一致服务端接收Receive不完全
简单的c# TCP通讯(TcpListener) C# 的TCP Socket (同步方式) C# 的TCP Socket (异步方式) C# 的tcp Socket设置自定义超时时间 C# TCP ...
CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
Windows 7专业版安装VS2005与WinCE6&period;0开发环境
近期更新了自己的小黑从XP更新到WIN7专业版,我花了两天时间验证了下列软件安装在WIN7 PRO是完全兼容的. 1:2011年最新更新的SourceInsight3.50.0066版本,这个是支持W ...
iOS 获取版本号（Swift和OC两种）
iOS获取应用版本号:version OC: [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVers ...
【JAVA反射机制】
一.Class类 Java.lang.Object |-java.lang.Class<T> 构造方法:无. 常用方法: static Class<?> forName(Str ...
tcp通信：多进程共享listen socket方式
原文链接:http://blog.csdn.net/largetalk/article/details/7939080 看tornado源码多进程(process.py)那段,发现他的多进程模型和一般 ...
为PHP开发者准备的12个调试工具
PHP是在实践中发展迅速并被最多使用的脚本语言:包含了诸如详细的文档.庞大的社区.无数可使用的脚本及支持框架等许多特性.PHP提供的这些特性使得它比Python或Ruby等脚本语言更容易上手. 为构建 ...
关于 getsockname、getpeername和gethostname、gethostbyname
一.gethostname,gethostbyname的用法这两个函数可以用来获取主机的信息.gethostname:获取主机的名字gethostbyname:通过名字获取其他的信息(比如ip) 1 ...
bootstrap tooltips在 angularJS中的使用
使用bootstrap自带的提示控件,省去了不少事情 <div class="s2" ng-init="InitTooltip()"> <in ...
解题：BZOJ 2989 数列
题面学习二进制分组题目本身可以看成二维平面上的问题,转成切比雪夫距离后就是矩形和了二进制分组是将每个修改添加到末尾,然后从后往前二进制下进位合并,这样最多同时有$\log n$组,每个修改只会被 ...