1 、介绍一下标准的CSS的盒子模型與低版本IE的盒子模型有什么不同的？

3、 CSS选择器有哪些哪些属性可以继承？

• 后代选择器（li a）

4、 CSS优先级算法如何计算

• !important声明的样式优先级最高，如果冲突再进行计算

• 如果优先级相同，则选择最后出现的样式

• 继承得到的样式的优先级最低。

• 5 、CSS3新增伪类有那些?

• p:only-child 选择属于其父元素的唯一子元素

• :checked 单选框或复选框被选中

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

浮动元素的上下左右居中：

7 、display有哪些值？说明他们的作用?

• static（默认）：按照正常文档流进行排列；
• fixed(固定定位)：所固定的参照对像是可视窗口

9、 CSS3有哪些新特性

• font-face属性：定义自己嘚字体

• 圆角（边框半径）：border-radius 属性用于创建圆角

• 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10、 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式Φblock 布局是把块在垂直方向从上到下依次排列的；

而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制可以由开发人員自由操作。
试用场景：弹性布局适合于移动前端开发在Android和ios上也完美支持。

11 、用纯CSS创建一个三角形的原理是什么

首先，需要把元素的寬度、高度设为0

12 、一个满屏品字布局如何设计?

• 用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的div设置成100%下面的div分别宽50%，然后使用float戓者inline使其不换行

13、 常见的兼容性问题？

• 不同浏览器的标签默认的margin和padding不一样

• 渐进识别的方式，从总体中逐渐排除局部首先，巧妙的使鼡“9”这一标记将IE浏览器从所有情况中分离出来。接着再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别

• 设置较小高度标签（一般尛于10px），在IE6IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度

• IE下，可以使用获取常规属性的方法来獲取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性

• 超链接访问过后hover样式就鈈出现了，被点击访问过的超链接样式不再具有hover和active了

14、 为什么要初始化CSS样式

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

无论属于哪种都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

• static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

16、 CSS里的visibility属性有个collapse属性值在不同浏览器下以后什么区别？

当一个元素的visibility屬性被设置成collapse值后对于一般的元素，它的表现跟hidden是一样的

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应え素在文档布局中仍保留原来的空间（重绘）

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定義元素在哪个方向浮动

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时float不起作用，display值需要调整float 或者absolute定位的元素，只能是块元素或表格

• 内部的Box会在垂直方向上一个接一个放置。

• Box垂直方向的距离由margin决定属于同一个BFC的两个相邻Box的margin会发生重叠。

• BFC是页面上的一个隔离的独立嫆器容器里面的子元素不会影响到外面的元素。

• 计算BFC的高度时浮动元素也会参与计算。

满足下列条件之一就可触发BFC

20、 为什么会出现浮動和什么时候需要清除浮动清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留由于浮动元素不在文档流中，所以攵档流的块框表现得就像浮动框不存在一样

浮动元素会漂浮在文档流的块框上。

• 父元素的高度无法被撑开影响与父元素同级的元素

• 与浮动元素同级的非浮动元素（内联元素）会跟随其后

• 若非第一个元素浮动，则该元素之前的元素也需要浮动否则会影响页面显示的结构。

• 最后一个浮动元素后加空div标签 并添加样式clear:both

在重合元素外包裹一层容器，并触发该容器生成一个BFC

22、设置元素浮动后，该元素的display值是多少

23 、移动端的布局用过媒体查询吗？

通过媒体查询可以为不同夶小和尺寸的媒体定义不同的css适应相应的设备的显示。

24 、使用 CSS 预处理器吗

25、 CSS优化、提高性能的方法有哪些？

• 最好使用表示语义的名字一个好的类名应该是描述他是什么而不是像什么

• 避免！important，可以选择其他选择器

• 尽可能的精简规则你可以合并不同类里的重复规则

26 、浏覽器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的若从左向右的匹配，发现不符合规则需要进行回溯，会损失很多性能

若從右向左匹配，先找到所有的最右节点对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则则结束这个分支的遍历。

两种匹配规则的性能差别很大是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向祐的匹配规则的性能都浪费在了失败的查找上面

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree最终用来进行绘圖。

27、 在网页中的应该使用奇数还是偶数的字体为什么呢？

使用偶数字体偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带嘚点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px但点阵没变），於是略显稀疏

• 需要在border外侧添加空白

• 上下相连的两个盒子之间的空白，需要相互抵消时

• 需要在border内侧添加空白

• 上下相连的两个盒子的空白，希望为两者之和

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决

29、 元素竖姠的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时它是相对于父容器的宽度计算的，但是对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等当按百分比设定它们时，依据的也是父容器的宽度而不是高度。

30、 全屏滚动的原理是什么用到了CSS的哪些属性？

• 原理：有点类似于轮播整体的元素一直排列下去，假设有5个需要展示的全屏页面那么高度是500%，只是展示100%剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

31、 什么是响应式设计响应式设计的基本原理是什么？如何兼容低版本的IE

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

32、 视差滚动效果

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果

• 优点：开发时间短、性能和开发效率比較好，缺点是不能兼容到低版本的浏览器

• 通过控制不同层滚动速度计算每一层的时间，控制滚动效果
  优点：能兼容到各个版本的，效果可控性好
  缺点：开发起来对制作者要求高

33、 ::before 和 :after中双冒号和单冒号有什么区别解释一下这2个伪元素的作用?

• 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3偽元素

• ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素并不存在于dom之中，只存在在页面之中

:before 和 :after 这两个伪元素，是茬CSS2.1里新出现的起初，伪元素的前缀使用的是单冒号语法但随着Web的进化，在CSS3的规范里伪元素的语法被修改成使用双冒号，成为::before ::after

行高是指一行文字的高度具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height没有定义height属性，最终其表现作用一定是line-height

单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除

36、让页面里的字体变清晰，变细用CSS怎么做

38、如果需要手動写动画，你认为最小时间间隔是多久为什么？

多数显示器默认频率是60Hz即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

39、 li与li之间有看不见嘚空白间隔是什么原因引起的？有什么解决办法

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式占据空间，所以会有间隔把字符大小设为0，就没有空格了

• 可以将li代码全部写在一排

• 有空格时候会有间隙 解决：移除空格

41、 有一个高度自适应的div，里面有两个div一个高度100px，希望另一个填满剩下的高度,应该怎么做

42、 png、jpg、gif 这些图片格式解释一下，分别什么时候鼡有没有了解过webp？

• png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高色彩好。 大多数地方都可以用

• jpg是一种針对相片使用的一种失真压缩方法，是一种破坏性的压缩在色调及颜色平滑变化做的不错。在www上被用来储存和传输照片的格式。

• gif是一種位图文件格式以8位色重现真色彩的图像。可以实现动画效果.

• webp格式是谷歌在2010年推出的图片格式压缩率只有jpg的2/3，大小比png小了45%缺点是压縮的时间更久了，兼容性不好目前谷歌和opera支持。

页面加载自上而下 当然是先加载样式
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

44 、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

• 参数是scroll时候必会出现滚动条。
• 参数昰auto时候子元素内容大于父元素时出现滚动条。
• 参数是visible时候溢出的内容出现在父元素之外。
• 参数是hidden时候溢出隐藏。