CSS常见面试题

1. 盒子模型有几种类型，区别是什么

标准盒模型：宽度=内容的宽度（content）+padding+border+margin

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

2. box-sizing属性：

①content-box：内容的宽度是content

②border-box：内容的宽度是content+padding+border

3. CSS的选择器

CSS的选择符：id选择器、类选择器、标签选择器、相邻选择器（h1+p）、子选择器（h1+p）、后代选择器

（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover）

可继承的样式：font-size、font-family、color

不可继承的样式：border、padding、margin、width、height

选择器的优先级：!import>行内样式>ID选择器>类选择器>标签选择器>通配符选择器>继承选择器>浏览器默认属性

4. 优先级的计算

元素选择符：1

class选择符：10

id选择符：100

元素标签：1000

CSS优先级的法则：

• 选择器都有一个权值，权值越大，优先级越高（例：多个class属性）

• 当权值相等时，后出现的样式表设置要优于先出现的样式表设置

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

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. display有那些属性值

inline（默认）–内联
       none–隐藏
       block–块显示
       table–表格显示
      list-item–项目列表
     inline-block

7. position的值？

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

8. CSS3有哪些新特性？

RGBA和透明度
       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，当浏览器的尺寸变化时会采用不同的属性
9.使用纯CSS实现三角形

.box{
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 40px solid #f000f0;
        }

10.display:none与visibility：hidden的区别？

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