css八股（一）

line-height和height的区别

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）

height是一个死值，就是这个盒子的高度。

介绍一下CSS的盒子模型

CSS的盒子模型有：标准盒子模型、IE盒子模型

CSS的盒子模型区别：

​ 标准盒子模型：margin、border、padding、content

​ IE盒子模型：margin、content（ border + padding + content ）

通过CSS如何转换盒子模型：

​ box-sizing：content-box; //标准盒子模型

​ box-sizing：border-box; //IE盒子模型

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

CSS选择符：

通配（*）

id选择器（#）

类选择器（.）

标签选择器（div、p、h1…）

相邻选择器（+）

后代选择器（ul li）

子元素选择器（>）

属性选择器（a[href]）

CSS属性哪些可以继承：

​ 文字系列：font-size、color、line-height。。。

不可继承的属性：border、padding、margin。。。

CSS优先级算法如何计算？

优先级比较：!important > 内联样式 > id > class > 标签 > 通配

CSS权重计算：
第一：内联样式 style 权重值：1000
第二：id选择器       权重值：100
第三：类选择器        权重值：10
第四：标签&伪元素选择器 权重值：1
第五：通配、>、+      权重值：0（后者覆盖前者）

用CSS画一个三角形

用边框画（border）
<style type="text/css">
    div {
        width: 0;
        height: 0;
        border-left: 100px solid #ccc;
        border-right: 100px solid transparent;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
    }
</style>

一个盒子不给宽度和高度如何水平垂直居中？

方式一:

<div class="container">
	<div class="main">main</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    border: 5px solid #ccc;
}
.main {
    background: red;
}

第二种：

<div class="container">
	<div class="main">main</div>
</div>

.container {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    position: relative;
    width: 300px;
    height: 300px;
    border: 5px solid #ccc;
}
.main {
    position: absolute;
    left: 50%;
    right: 50%;
    background: red;
    transform: translate(-50%, -50%);
}

display有哪些常见值？说明它们的作用

none		隐藏元素
block		把某元素转换成块元素
inline		把某某元素转换成内联元素
inline-block 把某某元素转换成行内块元素

对BFC规范（块级格式化上下文：block formatting context）的理解？

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

1.了解BFC：块级格式化上下文

2.BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。

3.如何触发BFC：

​ float的值非none

​ overflow的值非visible

​ display的值为：inline-block、table-cell

​ position的值为：absoute、fixed