知识梳理——CSS

1.盒模型

1. 标准盒子模型
box-sizing: content-box;
宽度就是content的宽度

2. IE盒子模型
box-sizing: border-box;
宽度 = content + border + padding

2.垂直居中的方法

第一种

// 父元素
display: flex

// 子元素
align-items:center;
justify-content:center;

第二种

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

第三种

定位为上下左右为0，margin：auto 可以实现脱离文档流的居中

		//  父元素
		.outer {
            width: 600px;
            height: 600px;
            background-color: red;
            position: relative;
        }

		// 子元素
        .inner {
            width: 200px;
            height: 200px;
            background: pink;
            margin: auto;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

3. BFC（块级格式化上下文）

1. 什么是 BFC： 块级格式化上下文（BFC是一个完全独立的空间，让空间里的子元素不会影响到外面的布局）

2. 怎么触发BFC：

1. overflow: hidden（不为visible）
2. display: inline-block / table-cell / flex / inline-flex
3. position: fixed / absolute
4. float: left（不为none）

3. BFC解决了什么问题

1. 使用Float脱离文档流，高度塌陷
2. Margin边距重叠
3. 两栏布局

面试官：请说说什么是BFC？大白话讲清楚

4.多行元素的文本省略号

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

5. line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height一般是指容器的整体高度

6.了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘.

引起重排重绘的原因有：

1. 添加或者删除可见的DOM元素，
2. 元素尺寸位置的改变
3. 浏览器页面初始化，
4. 浏览器窗口大小发生改变
   重排一定导致重绘，重绘不一定导致重排

减少重绘重排的方法有：

1. 不在布局信息改变时做DOM查询
2. 使用csstext,className一次性改变属性
3. 使用fragment
4. 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

7.overflow的原理

要讲清楚这个解决方案的原理，首先需要了解块格式化上下文，A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.翻译过来就是块格式化上下文是CSS可视化渲染的一部分，它是一块区域，规定了内部块盒 的渲染方式，以及浮动相互之间的影响关系
当元素设置了overflow样式且值部位visible时，该元素就构建了一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内，也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，所以达到了清除浮动的目的，

8.清除浮动的方法

给要清除浮动的元素添加样式clear，
父元素结束标签钱插入清除浮动的块级元素，给该元素添加样式clear

添加伪元素，在父级元素的最后，添加一个伪元素，通过清除伪元素的浮动，注意该伪元素的display为block，

父元素添加样式overflow清除浮动，overflow设置除visible以外的任何位置

9.使元素消失的方法有哪些？

1. opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

2. visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

3. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。

10.画一条0.5px的线

1. 采用meta viewport的方式

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2. 采用border-image的方式
3. 采用transform: scale()的方式

      .line:after {
            content:"";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: green;
            transform:scaleY(0.5);
        }

11. link标签和import标签的区别

link属于html标签，而@import是css提供的

页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。

link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。

link方式样式的权重高于@import的。

12.doctype的作用

<!DOCTYPE>标签 是一种 标准通用标记语言 的文档类型声明，它的目的是要告诉 标准通用标记语言 解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

13. html5标签有哪些？

header、 nav、 aside、 footer、video

14. 语义化标签的作用？

1.选择合适的标签有利于开发者阅读和写出更优雅的代码
2.有利于SEO，让浏览器的爬虫和机器更好的解析（爬虫依赖于标签来确定上下文和各个关键字的权重）

15. 怎么实现两列布局

flex、 position、 float

他们之间的区别是什么？
flex兼容性好、position不符合大众、float会脱离文档流