金三银四-《CSS面试题》今天的事亦不必再提，皆因钱财不够，我大抵是得给先生一份文书了。之所以说是文书，因为若是叫做辞职

介绍一下CSS的盒子模型

CSS的盒子模型分为标准盒子模型（W3C）和IE盒子模型，他俩的区别在于，标准盒子模型的width就是盒子中content部分，不包含padding和border，而IE盒子模型的width则是包括padding 和border的。我们可以通过css的box-sizing属性来转换类型。

`line-height`和`height`的区别

height就是盒子的固定高度，而line-height每一行文字的高，如果文字多了换行了，那么就会撑开盒子的整体的高度。

CSS选择符有哪些？哪些属性可以继承

选择符：

通配符*
id选择器#
类选择器.
标签选择器div、p
相邻选择器+
后代选择器ul li

可以继承属性：

font-size
color
line-height
...

不可以继承属性：

border
padding
margin
...

CSS优先级算法如何计算的

可以想象成用数字来表示选择器的值，比如!important的值为9999，行内样式的值则会比9999小一点的数值，比如1000 ，接着就是id，标签这些，值是依次减小，最后比较的时候比较数字的值的大小，数值大的选择器优先级则高。

用CSS画一个三角形

使用border属性来画三角形


<style>
    div {
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 100px solid transparent;
        border-bottom: 100px solid #ccc;
    }
</style>
<body>
<div></div>
</body>

`display`有哪些值，都有哪些作用

none               隐藏元素
block              将元素转成块级元素
inline             将元素转成行内元素
inline-block       将元素转成行内块元素

`position`有哪些值

static 默认值
relative 相对定位，相对自身位置来定位，不脱离文档流
absolute 绝对定位，根据第一个有relative的父元素定位脱离文档流
fixed 固定定位，根据当前窗口来定位、脱离文档流

实现一个左中右布局占满屏幕，其中左、右固定宽度`200px`，中间自适应宽度，要求先加载中间块，请写出结构及样式

<!--双飞翼布局-->
<div class="container">
    <div class="center">
        <div class="content">中</div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container div {
        float: left;
        height: 100vh;
    }

    .left {
        width: 200px;
        background-color: cornflowerblue;
        margin-left: -100%;
    }

    .center {
        width: 100%;
        background-color: dodgerblue;
    }

    .center > .content {
        margin: 0 200px;
    }

    .right {
        width: 200px;
        background-color: cadetblue;
        margin-left: -200px;
    }
</style>

<!--圣杯布局-->
<div class="container">
    <div class="center">中</div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        padding: 0 200px;
    }

    .container div {
        float: left;
        height: 100vh;
    }

    .left {
        width: 200px;
        background-color: cornflowerblue;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .center {
        width: 100%;
        background-color: dodgerblue;
    }

    .right {
        width: 200px;
        background-color: cadetblue;
        margin-left: -200px;
        position: relative;
        left: 200px;
    }
</style>

什么是CSS reset

reset.css是一个css文件,用来做样式初始化的.

css sprite是什么,有什么优缺点

把多个小图标合并成一个大的图片,这样的优点是可以减少资源请求,缺点是维护比较差,如果图片位置改变了,还要改变对应的精灵图的位置

CSS单位

%
px
rem
em
vh
vw
rbg

less和scss的区别

变量声明方式不一样,less声明变量是@,而scss是$
scss支持条件语句,而less不支持
下载所需要支持的安装插件不同

金三银四-《CSS面试题》