一，. 页面导入样式时，使用link和@import有什么区别？
语法的角度：
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；
而@import是CSS提供的语法，只能用于加载CSS;
浏览器解析的角度
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载(标准浏览器);
兼容性问题
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
总之，link要优于@import,由此决定了它的适应性更广，加载性更快，兼容性更强。
二.清空浮动的方法有哪些？哪个更好？
方式一:使用overflow属性来清除浮动
.ovh{
overflow:hidden;
}
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
方式二:使用额外标签法
.clear{
clear:both;
}
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
方法三:使用伪元素来清除浮动(after意思:后来,以后)
.clearfix:after{
centent:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
三.CSS 选择符及继承性和优先级算法，伪类
可继承性
可继承属性
font-size font-family color,ul,li,dd,dt;
不可继承的属性
border padding margin width height
优先级
就近原则:同权重情况下样式定义最近者为准,载入样式以最后载入的定位为准;
优先级算法: !important > id > class > tag
四. CSS3新增伪类
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
五.display vs position
display:block|inline-block|list-item|none
position
absolute :生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed :（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative:生成相对定位的元素，相对于其正常位置进行定位。
static :默认值。没有定位，元素出现在正常的流中, （忽略 top, bottom, left, right z-index 声明）
inherit: 规定从父元素继承 position 属性的值。
六. CSS3新特性
CSS3实现圆角（border-radius:8px），
阴影（box-shadow:10px），
对文字加特效（text-shadow、）
线性渐变（gradient）
旋转（transform）
ransform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)
skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
七.圣杯双飞翼布局
圣杯：Html:
<div id="header">Header</div>
<div id="bd">
<div id="main">main</div>
<div id="left">left</div>
<div id="right">Right</div>
</div>
<div id="footer">Footer</div>
Css:
body{
margin: 0px;
padding: 0px;
}
#header,#footer{
width:100%;
background: #666;
height:50px;
}
#bd{
padding-left:150px;
padding-right:190px;
background: red;}
#left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-100%;
position: relative;
right:150px;}
#main{
background: #D6D6D6;
width:100%;
float:left;}
#right{
width: 190px;
float: left;
background:greenyellow;
margin-left: -190px;
position: relative;
left: 190px;
}
双飞翼：html：
<div id="header">Header</div>
<div id="main">
<div id="inner">
Main
</div>
</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
Css：
body{
padding:0;
margin:0
}
#header,#footer{
width:100%;
background: #666;
height:50px;
clear: both;
}
#main {
background: #D6D6D6;
width: 100%;
float: left;
}
#inner{
margin-left:150px;
margin-right:190px;
}
#left{
background: #E79F6D;
width:150px;
float:left;
margin-left:-100%;
}
#right{
background: #77BBDD;
width:190px;
float:left;
margin-left:-190px;
}
八负margin的作用：
实现圣杯双飞翼布局
增加未设置宽度的元素的自身宽度
去掉浮动列表的右边框
和绝对定位一起实现水平垂直居中
去除列表最后一个li元素的border-bottom
去掉浮动列表的右边框：
<div id="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
Css：
*{
margin: 0;
padding: 0;
}
#wrap{
background-color:orange;
width: 320px;
height: 320px;
overflow: hidden;
}
ul{
zoom:1;
margin-right: -10px;
}
li{
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
list-style: none;
background-color: red;
}
和定位一起实现水平垂直居中：
#box{
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
实现水平垂直居中
用绝对定位实现
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top:-50px;
}
用绝对定位和auto实现
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
用绝对定位和transform反向偏移实现：
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
用flex实现
首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。
#dad {
display: flex;
justify-content: center;
align-items: center
}
九，src和herf的区别：
herf：指向网络资源所在位置，用于超链接。
src：指向外部资源，指向的内容会嵌入到文档中当前位置，在请求src资源时会将其指向的资源下载并应用到文档中。
十，标准盒模型和IE盒模型的区别：
标准：content部分不包括其他
IE:width包括了boder和padding