前端面试题——CSS篇

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

有两种：IE盒子模型、W3C盒子模型；
盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）；
区别：IE的content部分吧border和padding计算进去；在CSS3中引入了box-sizing属性，它可以允许改变默认的CSS盒模型对原宿宽高的计算方式。
共包括两个选项：
content-box：标准盒模型，CSS定义的宽高只包括content的宽高。
border-box：IE盒模型，CSS定义的宽高包括了content、padding和border。
在标准模式下，一个块的总宽度=width+margin（左右）+padding（左右）+border（左右）
在怪异模式下，一个块的总宽度=width+margin（左右）（即width已经包括了padding和border值）

2.CSS优先级算法如何计算？

• 优先级就近原则，同权重情况下样式定义最近者为准；
• 载入样式以最后载入的定位为准
  优先级为：
  ！important>id>class>tag
  important比内联优先级高

3.如何居中div？

水平垂直居中问题，在CSS中margin：0 auto；可以实现水平居中，但是在垂直中方面一直没有特定的属性，知道CSS3的出现，有了弹性盒，可以通过设置弹性和直接设置居中位置，做浏览器兼容的话可以通过使用一些hack处理负margin方法，table-cell方法，位移方法。
负margin方法
CSS代码：

.container{
  width:500px;
  height:400px;
  border:2px solid red;
  position:relative;
}
.inner{
  width:480px;
  height:380px;
  background-color:green;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-190px;
  margin-left:-240px;
}

HTML代码：

这里，我们首先用top:50%和left:50%让inner的坐标原点（左上角）移动到container的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。
table-cell方法
CSS代码：

div{
  width:300px;
  height:300px;
  border:3px solid red;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
img{
  vertical-align:middle;
}

HTML代码：

通过将盒子转换为table元素，table元素本身是可以通过属性控制位置，div上面的vertical-align:middle是控制垂直方向上的居中的，而text-align:center是控制水平方向的。
弹性盒子法
CSS代码：

.container{
  width:300px;
  height:200px;
  border:3px solid red;
  display: -webkit-flex; 
  display: flex; 
  -webkit-align-items: center; 
  align-items: center; 
  -webkit-justify-content: center; 
  justify-content: center; 
}
.inner{
  border: 3px solid #458761;
  padding: 20px;
 }

HTML代码:

  

 我在容器中水平垂直居中 
  

align-items 控制垂直方向的居中，justify-content 控制水平方向的居中。这是 CSS3 的新方法。
位移方法
位移方法和margin定位方法一样，只不过把margin改成了位移不需要计算一半是多少，直接transform：translate（-50%，-50%）

div{
  width:200px;
  height:200px;
  background:green;
  position:absolute;
  left:50%；
  top:50%;
  transform:translate(-50%,-50%);
}

div绝对定位水平垂直居中（margin：auto实现绝对定位元素的居中）

div{
  width:200px;
  height:200px;
  background:green;
  left:0;
  top:0;
  bottom:0;
  right:0;
  margin:auto;
}

4.position的值relative和absolute定位原点是？

absolute 生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。
fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right，z-index声明）。
inherit 规定从父元素继承position属性的值。

5.CSS定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/权重为 1/ div{}
/权重为 10/ .class1{}
/权重为 100/ #id1{}
/权重为 100+1=101/ #id1 div{}
/权重为 10+1=11/ .class1 div{}
/权重为 10+10+1=21/ .class1 .class2 div{}
如果权重相同，则最后定义的样式会起作用，但是应避免这种情况出现。

6.请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素脱离文档流，不占据空间。浮动元素碰到包含他的边框或者浮动元素的边框停留。
1.使用空标签清除浮动
这种方式是在所有浮动标签后面添加一个空标签定义 CSS clear:both;弊端就是增加了无意义标签。
2.使用overflow
给包含浮动元素的父标签添加CSS属性overflow:autozoom:1;zoom:1用于兼容IE6。
3.使用after伪对象清除浮动
该方法只适用于非IE浏览器。