CSS面试题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2 box-sizing属性？
用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3 CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

4 CSS优先级算法如何计算？
元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

5 CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

正常:

浮动:

绝对定位:

7 display有哪些值？说明他们的作用?
inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block-行内块显示

8 position的值？
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

9 CSS3有哪些新特性？
RGBA A为透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11 用纯CSS创建一个三角形的原理是什么？
首先，需要把元素的宽度、高度设为0。然后设置边框样式。

12 为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

13 display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间

14 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
为什么出现浮动？
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。

浮动特性
1) 不占位,脱离文档流（不压文字）
2) 浮动的块元素和行元素都转为内联块元素
3) 浮动元素对后面元素影响是实现后面元素的文本环绕

什么时候清除浮动？
如果想要实现三个块级元素并排显示，期望效果如下图所示：

给三个块级元素都加上float属性后，页面效果如下图所示：

问题出现了，父元素高度塌陷了
一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。

清除浮动的方式？
我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

清除浮动的基本方法：
方法1:最后一个浮动元素后加空div标签 并添加样式clear:both


方法1可以采用伪元素，这里我们使用:after。添加一个类clearfix：（推荐）

m

方法2:包含浮动元素的父标签添加样式overflow为hidden或auto

15 设置元素浮动后，该元素的display值是多少？
自动变成display:block

16 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

18 阐述一下CSS Sprites
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

19 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

17 Sass、LESS 和 Stylus区别总结
1.什么是 CSS 预处理器
CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。
2.基本语法区别:
在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。
首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。

这是一个再普通不过的，不过 Sass 同时也支持老的语法，就是不包含花括号和分号的方式：

而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，下面是 Stylus 支持的语法：

可以在同一个样式单中使用不同的变量，例如下面的写法也不会报错：

3.变量

1. sass：
   Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。
   sass变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的，例如：
   
   2.less ：

在less文件中，当一个值需要反复使用时，可以通过@符号定义变量。已经被赋值的变量以及其他的常量（如像素、颜色等）都可以参与运算。
Less 中变量都是用@开头的，其余与sass都是一样的，例如：

3.stylus：

stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，
但是在stylus中不能用@开头，例如：

以上三种写法都如同一下这种css：

4.嵌套
如果我们需要在CSS中相同的 parent 引用多个元素，这将是非常乏味的，你需要一遍又一遍地写 parent。例如：

如果用 CSS 预处理器，就可以少写很多单词，而且父子节点关系一目了然，并且sass，Less，stylus都支持下面这样的写法，且都是相同的：

5.运算符
在 CSS 预处理器中还是可以进行样式的计算如下：

在sass，Less与stylus中都是可以这样做的。

6.颜色函数
CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。
1.sass的颜色处理函数：

实例如下：

2.Less颜色处理函数：

示例如下：

3.Stylus颜色处理函数：

示例如下:

7.导入 (Import)
很多 CSS 开发者对导入的做法都不太感冒，因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同，它只是在语义上包含了不同的文件，但最终结果是一个单一的 CSS 文件，如果你是通过 @ import “file.css”; 导入 CSS 文件，那效果跟普通的 CSS 导入一样。

注意：导入文件中定义的混入、变量等信息也将会被引入到主样式文件中，因此需要避免它们互相冲突。
例如：
1.css:

2.XXX:

最终生成的 CSS：

8.继承
当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法.
1.sass：
sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

2.Less ：
但是在这方面 Less 表现的稍微弱一些，更像是混入写法：

上面两种写法其最终呈现的css样式都如下：

.message的样式将会被插入到相应的你想要继承的选择器中，但需要注意的是优先级的问题。
9.Mixins（混入）
Mixins 有点像是函数或者是宏，当某段 CSS 经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个 Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

1.Sass 的混入语法：
sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。比如说处理css3浏览器前缀：

2.Less CSS 的混入语法：
less也支持带参数的混合以及有默认参数值的混合，如下面的例子所示：

3.Stylus 的混入语法：

他们最终呈现的效果都如下：

10.3D文本
要生成具有 3D 效果的文本可以使用 text-shadows ，唯一的问题就是当要修改颜色的时候就非常的麻烦，而通过 mixin 和颜色函数可以很轻松的实现：
1.sass：

2.Less：

3.Stylus：

其生成的css最终的效果如下：

11.列 (Columns)
使用数值操作和变量可以很方便的实现适应屏幕大小的布局处理。
1.Sass：

2.Less：

3.Stylus：

其最终生成的css效果如下：

12.高级语法
1.在sass中，还支持条件语句：
@if可一个条件单独使用，也可以和@else结合多条件使用
代码如下：

其最终的css代码如下：

2.除却条件语句，sass还支持for循环：
for循环有两种形式，分别为：
(1)@for $var from through
(2)@for $varfrom<start>to<end>其中$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

同时也支持while循环：

最后，同时支持each命令，作用与for类似：

其css最终效果如下：

a标签的四种状态:

            a:link {color:#FF0000;}/* 未被访问的链接 *
            
           a:visited {color:#00FF00;}/* 已被访问的链接 */
           
           a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */

           a:active {color:#0000FF;}/* 正在被点击的链接 */