[CSS]CSS面试题（三）

1、如何用w3c标准写html代码？

使用doctype声明。
只要遵循W3C标准来编写HTML，网页将永远能在所有浏览器上显示出来。

2、css3如何设置盒子模型为ie盒子模型？

使用box-sizing属性。
box-sizing: content-box || border-box || inherit;
ie盒子模型为border-box，而标准盒子模型是content-box

知识点：box-sizing和IE盒模型
IE5.5及更早的IE浏览器采用的不是标准盒模型，我们称之为IE盒模型。

标准盒模型的组成部分有：margin + border + padding + content，content部分的width height不包含border和padding。
而在IE盒模型中，块级元素的width, height包含了border和padding。


浏览器的兼容情况：（现在的浏览器使用的是标准的盒子模型，如果想要变成ie盒子模型，使用box-sizing属性）

• Chrome/Opera/IE 支持 box-sizing
• FireFox 支持 -moz-box-sizing
• Safari 支持 -webkit-box-sizing

例题：在W3C标准盒模型中，默认情况下块元素的总宽度为：
1、content
2、content+2*padding
3、content+2*padding+2*border（IE盒子模型）
4、content+2*padding+2*border+2*margin
知识点：如果问盒子的总宽度的话，则选4；
（1）标准盒模型总宽度：width（content宽）+左右margin+左右padding+左右border（content-box）
（2）怪异盒模型（IE盒模型）总宽度：width（包含了content宽+padding+border）+左右margin（border-box）

采用border-box：不论边框的大小怎么变，整个盒子都不会改变大小，而content-box一改变边框的大小，整个盒子就会改变。

3、CSS权重和优先级的问题？

• css选择器的种类：行内选择器 > id选择器 > class选择器 > 元素选择器
• 强制使用!important，但建议不要使用这个
• 10个class也不能逆转一个id

<!--例题-->
<style type="text/css">
    div.demo{     /*1+10 = 11*/
        color: black; 
    }
    div.wrap .demo{  /*1+10+10 = 21*/
        color: yellow;
    }
    div.wrap > .demo{  /*1+10+10 = 21 子选择器（blue,blue）*/
        color: blue;
    }
    div.wrap + .demo{  
    /*这是兄弟选择器.wrap后面没有兄弟选择器，所以这个样式没有起到作用*/
        color: red;
    }
    div.demo + .demo{  
    /*1+10+10 = 21 兄弟选择器，只选择到后面一个.demo，后面一个.demo变成红色 （blue,red）*/
        color: red;
    }
 </style>
 
<div class="wrap">
    <div class="demo"> Hello </div>
  <div class="demo"> World</div>
</div>

例题：Hello 和 world 两个单词分别是什么颜色？
1、black, black
2、yellow, blue
3、blue, red
4、blue, blue
答案：3

CSS三大特性—— 继承、 优先级和层叠

• 继承：即子类元素继承父类的样式;
• 优先级：是指不同类别样式的权重比较;
• 层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

CSS选择器的种类
1.标签选择器(如：body,div,p,ul,li)
2.类选择器(如：class=“head”,class=“head_logo”)
3.ID选择器(如：id=“name”,id=“name_txt”)
4.全局选择器(如：*号)
5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如：div p,注意两选择器用空格键分开)
9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11.子选择器 (如：div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

CSS选择器的优先级？
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
（1）可以用权值来比较
用数字表示只是说明思想，一万个class也不如一个id权值高

• 内联样式表的权值为 1000
• ID 选择器的权值为 100
• Class 类选择器的权值为 10
• HTML 标签选择器的权值为 1
  做法：可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20。
  （2）另外一种理解方式：是由四个级别和各级别的出现次数决定的。
  每个规则对应一个初始"四位数"：0、0、0、0
  若是 行内选择符，则加1、0、0、0
  若是 ID选择符，则加0、1、0、0
  若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
  若是 元素选择符/伪元素选择符，则分别加0、0、0、1
  算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

需注意的
①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;
②、优先级相同时，则采用就近原则，选择最后出现的样式;
③、继承得来的属性，其优先级最低;
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。

简洁，高效的CSS
所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。
（1）不要再ID选择器前使用标签名
解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。
（2）不要在类选择器前使用标签名
解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如p.colclass{color：red;}和 span.colclass{color:red;}
（3）尽量少使用层级关系；
#divclass p.colclass{color:red;}改为 .colclass{color:red;}
（4）使用类选择器代替层级关系