前端面试题集锦（二）之CSS部分

1、CSS中的选择器都有哪些？权限情况如何？

解答：

（1）类选择器 .className
  (2) ID选择器 #id
  (3) 元素选择器 div 可以多个，以逗号隔开
（4）父子选择器 以空格隔开 div p ，表示所有div 下的p元素
（5）父子组合选择器 div>p , 表示所有父级元素是div的p元素
（6）相邻选择器 div+p , 表示所有紧接着div之后的p元素
（7）属性选择器 [target] , 表示所有带有target属性的元素
（8）属性筛选选择器 [arrt= ] [arrt-= ] [arrt|=] ,分别表示某项属性等于 ，某项属性包含，某项属性以某字符开头的元素
（9）伪类选择器 :link , :visited, :hover, :active, :first-child, 等等
   选择器权限： 行内样式 > id > class > element > * 通配符

2、CSS常用的伪类和伪元素

解答：

（1）常用的伪类有：
：hover -表示鼠标经过改变颜色；
：nth-child(even)-表示父元素的第偶数个子元素， 常用来生成斑马纹效果
：nth-child(odd)-表示父元素的第奇数个子元素，常用来生成斑马纹效果
：disabled - 表示选择所有禁用的表单元素
：checked - 表示所有选中的表单元素
（2）常用的伪元素
：after 向指定的元素后增加内容
：before 向指定的元素前增加内容
：first-letter 表示要选中的文本的第一个字母的样式
：first-line 表示要选中的文本的第一行文字的样式

3、CSS中的盒模型，有哪几种盒模型

解答：

CSS中的定位属性：分为几种
（1）static : 默认定位， 无定位
（2）relative: 相对定位，相对于自身位置进行偏移
（3）absolute: 绝对行为， 相对于最近的非 static 定位祖先元素的偏移,绝对定位的元素可以设置外边距（margin），且不会与其他边距合并
  (4) fixed ： 固定定位，相对于屏幕视口（viewport）的位置
（5）sticky: 粘性定位，盒位置根据正常流计算(这称为正常流动中的位置)，
然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。
在所有情况下（即便被定位元素为 table时），该元素定位均不对后续元素造成影响。
当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。
position: sticky对 table元素的效果与 position: relative 相同。

4、CSS中的盒模型，分为哪几种？

解答：

（1）盒模型的概念：
盒模型的组成由里向外content,padding,border,margin.
标准盒模型：盒模型的宽高只是内从content的宽高
IE盒模型： IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
（2）CSS3 的属性 box-sizing
可以设置盒模型为content-box 或 border-box

5、CSS中的float属性的理解，如何清除浮动，如何解决浮动元素撑不开高度的问题

解答：

CSS中的float属性
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次

（1）浮动的本质是用来文字环绕的，像分栏布局和列表排列都可用其它属性实现。

（2）浮动是一个带有方位的display：inline-block；所以设置浮动，就会有默认的display：inline-block；这个属性。
不需要再写display了；设置display：inline-block带来的各种效果，比如高宽自适应而不是继承父元素宽。
可以设置高和宽。他的前后不会像块级元素默认换行（但是它没有高度）。

（3）浮动会破坏inline-box，产生两个结果。①（无inlinebox->无line-box->无高度）。
②图片与文字无法同行显示。这两个结果恰恰是文字环绕的所必需的

float和position的相互影响

如果在float上设置position：absolute的话，会覆盖float的属性。就不是浮动了。float失效

在float上设置position：relative的话，如果设置left/top/right/bottom等属性，则元素会先浮动到相应位置，
然后再根据top/left/bottom/right所设置的距离发生偏移，在float上设置margin属性也是有效的。

清除浮动的方法：设置clear:both，clear:left,clear:right属性，

解决浮动元素撑不开父元素高度的问题：

1、使用空的块级元素撑开高度
2、对父元素使用：after伪元素
3、对父元素添加over-flow:hidden属性

6、CSS中外边距重合问题的描述，如何解决，CSS中bfc的理解block fomatting context

解答：

（1）在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），
以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
（2）创建BFC的条件
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，
块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
作用： 利用BFC避免外边距折叠，解决容器高度不会被浮动元素撑开的问题，避免文字环绕，可以避免多列布局中的样式问题，

7、CSS3中新增的常用属性，

解答：

（1）边框圆角 border-radius， 边框图片
  (2) 文字阴影，盒阴影，文字溢出省略
（3）背景图片（多个），背景尺寸剪切，颜色渐变
（4）2D 与 3D转换， transform ,translate, rotate, scale，skew, rotateX, roteteY
  (5) 过渡 transition , 动画 animation
  (6) 多列布局，弹性盒模型flex
（7）多媒体查询

8、CSS响应式设计的方法

解答：

（1）设置Viewport，
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
（2）设置多媒体查询，CSS3 @media 查询，@media 可以针对不同的屏幕尺寸设置不同的样式
（3）使用CSS 栅格视图，
（4）设置响应式的图片和视频
（5）使用响应式设计的样式框架

9、如何在网页中添加一个三角形或指定的其他图形？解决思路有几种？

解答：

（1）利用高度为0的块及元素的边框设置,css设置
（2）利用HTML转义字符串设置
  (3) 利用:after伪元素设置
（4）利用字体图标或背景图片设置