css经典题目

##  css经典题目总结

###  1.CSS优先级算法如何计算？

元素选择符： 1

class选择符： 10

id选择符：100

元素标签：1000

### 2.对 BFC 规范(块级格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box，会参与不同的 Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。

BFC 规定了内部的 Block Box 如何布局。

定位方案：

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

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

每个元素的 margin box 的左边，与包含块 border box 的左边相接触。

BFC 的区域不会与 float box 重叠。

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

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

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

根元素，即 html

float 的值不为none（默认）

overflow 的值不为 visible（默认）

display 的值为 inline-block、table-cell、table-caption

position 的值为 absolute 或 fixed

### 3. CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？

CSS选择符：

1. id选择器（ # myid）

2. 类选择器（.myclassname）

3. 标签(元素)选择器（div, h1, p）

4. 相邻选择器（h1 + p）

5. 子选择器（ul > li）

6. 后代选择器（li a）

7. 通配符选择器（ * ）

8. 属性选择器（a[rel = "external"]）

 

9. 伪类选择器（a:hover, li:nth-child）

伪元素选择器、分组选择器。

### 4.继承性：

可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；

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

优先级（就近原则）：!important > [ id > class > tag ]

!important 比内联优先级高

### 5.优先级就近原则，同权重情况下样式定义最近者为准

!important>id >class>tag

 

important比内联优先级高

元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000

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

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

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

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

```

background: linear-gradient(directioncolor-stop1color-stop2, ...);

```

### 7.用纯CSS创建一个三角形的原理是什么？

```

width:0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

```

首先，需要把元素的宽度、高度设为0。然后设置边框样式

### 8.display:none 与 visibility:hidden 的区别是什么？

display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）

使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

### 9.CSS优化、提高性能的方法有哪些？

避免过度约束

避免后代选择符

避免链式选择符

使用紧凑的语法

避免不必要的命名空间

避免不必要的重复

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

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

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

修复解析错误

避免使用多类选择符

移除空的css规则

正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

display:inline后不应该再使用width、height、margin、padding以及float。

display:inline-block后不应该再使用float。

display:block后不应该再使用vertical-align。

display:table-*后不应该再使用margin或者float。

不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。

不滥用web字体

对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。

不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。

不给h1~h6元素定义过多的样式

全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。

不重复定义h1~h6元素

值为0时不需要任何单位

标准化各种浏览器前缀：通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：.foo{

    -moz-border-radius: 5px;

    border-radius: 5px;

}复制代码

使用CSS渐变等高级特性，需指定所有浏览器的前缀

避免让选择符看起来像正则表达式

CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。

遵守盒模型规则（Beware of broken box models）

### 10.什么时候用margin什么使用用padding？

◆何时应当使用margin

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

◆何时应当时用padding

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。