css面试题目

盒子模型

标准盒子模型：宽度=内容的宽度（content）

context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

** 为什么要初始化CSS样式**

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对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

CSS优先级

优先级就近原则，同权重情况下样式定义最近这位准

同权重： 内联样式> 嵌入样式表>外部样式
!important >id >class >tag
元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

display的值

1.block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示
2.none 元素不显示，并从文档流中移除
3.inline 行内元素，默认宽度为内容宽度，不可设置宽高，同行显示
4.inline-block 默认宽度为内容宽度，可以设置宽高，同行显示
5.list-item 像块类型元素一样，可以设置宽高，同行显示
6.table 此元素会作为会计表格来显示
7.inherit 规定应该从父元素继承display属性的值

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

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

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签 并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

CSS属性overflow属性定义溢出元素内容区的内容

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

position 的值

1.absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

2.fixed：生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

3.relative：生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

4.static：默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5.inherit：规定应该从父元素继承 position 属性的值。

CSS3有哪些新特性

1.新增各种 CSS 选择器 :not(p) 选择每个非p的元素； p:empty 选择每个没有任何子级的p元素（包括文本节点）

2.边框（border）

3.背景 background-clip（规定背景图的绘制区域），background-origin，background-size

4.线性渐变 （Linear Gradients） 向下/向上/向左/向右/对角方向

background: linear-gradient(direction, color-stop1, color-stop2, ...);

5.文本效果 阴影text-shadow，textwrap，word-break，word-wrap；

6.2D 转换

transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate()

7.3D转换 perspective()；transform是向元素应用 2D 或者 3D 转换；

8.渡 transition

9.动画

10.多列布局 （multi-column layout）

11.盒模型

12.flex 布局览器的尺寸变化时会采用不同的属性

CSS3新增伪类有那些

1.p:first-of-type 选择属于其父元素的首个元素

2.p:last-of-type 选择属于其父元素的最后元素

3.p:only-of-type 选择属于其父元素唯一的元素

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

5.p:nth-child(2) 选择属于其父元素的第二个子元素

6.:enabled :disabled 表单控件的禁用状态。

7.:checked 单选框或复选框被选中。

css3动画和JS动画的区别

1.js实现的是帧动画

2.css实现的是补间动画