CSS如何设置高度为屏幕高度_CSS知识总结

1、CSS厉害之处是层叠样式表，层叠指样式层叠，选择器层叠，文件层叠，这些特性使CSS极度灵活。

2、border调试法，怀疑某个元素有问题，就给这个元素加上border。

3、资料网站推荐：Google搜索关键词加mdn, CSS tricks , 张鑫旭博客。

4、文档流：流动方向，inline元素从左到右，到达最右边才会换行，block元素从上到下，每一个都另起一行，inline-block元素也是从左到右。

宽度，inline宽度为内部inline元素的和，不能用width指定，block自动计算宽度，可用width指定，inline-block结合两者特点可用width指定。

高度，inline高度由line-height间接决定，和height无关，block高度由内部文档流元素决定的，可以设置height，inline-block和block类似，可以设置height。

5、overflow：当内容的宽度或高度大于容器时会溢出，可用他来设置是否显示滚动条，有auto，scroll，hidden，visible属性。

6、布局分为float，grid，flex三种布局，当需要兼容IE9时，用float布局，父元素添加clearfix属性，只需要兼容最新浏览器时用grid布局，其他的用flex布局。在写布局时，永远不要把width和height写死，除非特殊说明，用min-width/max-width/min-height/max-height.

7、CSS定位：背景的范围是border外边沿围成的区域，一个div的分层，从上到下分别为内联子元素（相当于文字），浮动元素，块级子元素，border，background。

8、浮动元素脱离文档流，position属性，static（默认值，呆在文档流中），relative（相对定位，升起来但不脱离文档流），absolute（绝对定位），fixed（固定定位），sticky（粘滞定位），如果写了一个absolute，一般都得补一个relative，如果写了absolute或fixed，一般都得补top和left.

9、浏览器渲染原理：下面简要概述了浏览器完成的步骤：

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上。

三种样式更新方式：

10、transform：四个常用功能translate(位移)，scale（缩放），rotate（旋转），skew（倾斜），这四个功能一般都需要配合transition过渡，inline元素不支持transform，需要先变成block元素。

11、transition:作用，补充中间帧，语法，transition：属性名 时长 过渡方式 延迟，可以用all代表所有属性，过渡除了起始还有中间点，有两种办法代替中间点，使用两次transform或者使用animation（声明关键帧，添加动画）。

12、animation：时长/过渡方式/延迟/次数/方向/填充模式/是否暂停/动画名。

13、如何让动画停止在最后一帧，在属性中加forwards。

14、@keyframes语法：