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代码：
<div class="container">
<div class="inner"></div>
</div>
这里，我们首先用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代码：
<div> <img src="love.jpg"> </div>
通过将盒子转换为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代码:
<div class="container">
<div class="inner">
我在容器中水平垂直居中
</div>
</div>
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浏览器。
网友评论