1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
1.盒子模型有两种，IE盒子模型、W3C盒子模型；
2.盒子模型：内容（content），内边距（padding），边框（border），外边距（margin）
3.区别：IE的content部分把border和padding计算进去了
2.CSS选择器有哪些？哪些属性可以继承？
1.id选择器（#id）;
2.类选择器（.class);
3.标签选择器（div）;
4.相邻选择器（h1+p）；
5.子选择器（ul>li）；
6.后代选择器（li a）；
7.通配符（*）；
8.属性选择器（a[rel = 'xyz'];
9.伪类选择器（a:hover,li:nth-child);
可继承样式：font-size font-family color ul li dl dd dt;
不可继承样式：border padding margin width height；
3.CSS优先级算法如何计算？
优先级就近原则，同权重样式定义最近者为准
载入样式以最后载入的定位为准
优先级：
!important > id > class > tag > *(通配符)
4.display有哪些值？说明他们的作用
1.block:设定元素变为块级元素，占据一整行，可设置宽高；
2.inline-block：设定元素为行内块元素，可设置宽高，一行能显示多个；
3.inline：行内元素，不可设置宽高，一行可显示多个；
4.none：设置元素不可见；
5.flex：开启弹性布局；
6.table：作为块级表格显示；
7.list-item：像块级元素一样显示，并添加样式列表标记；
8.inherit：继承父元素的display属性；
5.position的值relative和absolute定位原点是？
relative：相对定位，相对于正常位置进行定位
absolute：绝对定位，相对于父元素中最近一个position不为 static（静态，无定位）定位；
fixed：相对于浏览器窗口定位；
static：默认，无定位；
inherit：继承父元素的定位；
6.CSS3有哪些新特性？
1.圆角 --》border-radius
2.阴影和反射 --》shadow、reflect
3.文字特效 --》text-shadow
4.文字渲染 --》text-decoration
5.线性渐变 --》gradient
6.旋转 --》transform
缩放、定位、倾斜、动画、多背景
transform：scale（1.1,1.2）；
transform：translate（x，y）；
transform：skew（9deg，0deg）
7.用纯CSS创建一个三角形
原理是将上、左、右的颜色设为透明transparent
#demo{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent red transparent;
}
8.常见的浏览器兼容性问题及其解决方法，常用的hack方法。
1.png24位图片在IE6浏览器上出现背景，解决方法：将图片做成png8；
2.浏览器默认的样式不同。解决方法：设置初始样式清除。或者使用normalize.css进行样式统一。
3.IE6出现双倍外边距的问题，在IE6里，块元素设置浮动后，再设置margin会出现双外边距的问题；解决方法：使用css-hack，在原本的margin：10px；后面加一个 _margin：10px；
4.Chrome中文界面下回默认将小于12px的文本强制按照12px显示，解决方法：加入CSS属性 -webkit-text-size-adjust:none;
注意点.超链接访问过后hover样式不生效，解决方法：按照L-V-H-A顺序书写a:link -->a:visited -->a:hover -->a:active
9.li标签之间的空白间隙原因及其解决方法
行的排列会受到中间空白（回车/空格）的影响，因为空格也是一种字符，也会被应用样式，会占空间
解决方法：把字符大小设为0；
问题扩展：
在块级元素中包含img标签，会出现空隙的问题；
因为图片文字等inline元素默认的和父元素对其的方式是 baseline，而baseline与父级的底部有间隙。(w3c中img标签默认是一个inline标签)
解决方法：将对齐方式设为除了baseline以外的任何一种:
vertical-align:top/bottom/text-top/text-bottom
其实这个空隙是ie针对盒子模型设定的inline-height，和font-size；
所以也可以给img设置display:block;font-size:0;但是对于结构来说，有点本末倒置的意味。
10.在CSS中，visibility有个collapse属性，是干嘛的？
collapse是崩塌，失效的意思。
对于普通的元素visibility:collapse和display:none 表现相同，使元素隐藏并且不占据空间。
但是对于table来说，table会被隐藏，但是依然占据空间（ie不支持）
11.为什么要清除浮动？清除浮动的方式？
清除浮动是为了清除使用浮动的元素造成的影响；浮动的元素，高度会塌陷，对布局不利。
解决方法：
1.给父级div设置高度height
2.使父级div也一起浮动
3.给父级元素设置 overf:hidden;
4.使用clearfix类名
.clearfix:before,.clearfix:after{
content:"";
display:block;
height:0;
line-height:0;
visibility:hidden;
clear:both
}
.clearfix{
*zoom:1;
}
12.元素竖向的百分比设定是相对于容器的高度吗?
对于height属性来说，设置百分比就是设置相对于容器的百分比
对于margin、padding来说，设置竖向百分比却是以容器的宽度来计算
13.什么是响应式设计？响应式设计的基本原理是什么？
响应式设计（Responsive Web design）：集中创建页面的图片排版大小，可以智能的根据用户使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行对应的布局。
基本原理：使用@media媒体查询，然后使用不同的CSS规则来实现屏幕的最佳布局。
14.position:fixed;在手机端下无效怎么处理？
fixed的元素是相对于整个页面固定位置的，你在屏幕上滑动是在滑动整个viewport。
原来的网页还在，fixed也没有变过位置，所以说并不是手机端不支持fixed，只是fixed元素不是相对于手机屏幕固定的
我们可以设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
15.怎么实现div的居中？
1.水平居中
1.给div设置宽度，并使用margin：0 auto;
div{
width:100px;
height:100px;
margin:0 auto;
background:hotpink;
}
2.使用绝对定位
div{
position:absolute；
width:100px;
height:100px;
left:50%;
margin-left:-50px;
background-color:skyblue;
}
2.水平垂直居中
1.使用绝对定位
div{
position:absolute；
width:100px;
height:100px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
background-color:skyblue;
}
2.使用transform属性
div{
position:absolute；
width:100px;
height:100px;
left:50%;
top:50%;
transform:translate(-50%,-50%)
background-color:skyblue;
}
3.使用弹性布局
.container{
display:flex;
align-items:center;
justify-content:center;
}
.container div{
width:100px;
height:100px;
background-color:hotpink;
}
