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;
    }