回顾整理项目编写中的感受、思考和待解决的疑惑-（一） CSS相关整理篇

一、关于css的认知和编写项目中的感受

    1.关于css的认知:css在之前的学校学习认知中，总感觉是一项比较基础和简单的东西。 但是在前端项目编写的过程中，尤其是Hybrid混合式开发app中，发现会出现挺多需要思考的问题。较为深入的熟悉css对于处理ui原型相关问题的时候很重要。

二、css相关整理

1.自己整理和编辑的css思维导图

2.回顾项目编写中样式方面曾有过的疑惑

(1)css是什么？在浏览器的加载过程中，经过了怎样的状态转换到展现?css加载中，什么样的操作会影响其加载性能

(2)编写多个类外面边距和内边距的时候，会影响附近的元素的高度和宽度，从而影响ui的实现。怎样避免这种情况发生?

(3):before和:after是什么，常见用法怎么用？

(4)em和rem的用法和常见组合思考？

(5)普遍性的垂直居中，水平居中的解决方式?

(6)盒子模型中的box-sizing和border-box的区别和作用?

(7)在安卓等设备中，如何考虑自适应问题?

(8)是否要限定盒子模型的宽度和高度，还是根据padding和文本内容，自动出现相应的内容宽度和高度?

三、带着问题和大致的结构寻找答案和思考

3.1  MDN上面说css是一种样式表语言，百度百科上面说是表现html得一种语言。css经过了css解析器，生成了cssDOM,然后和相应的DOm树一起生成了 render树。然后最后生成了layout树。（参考前端pangda博客中对浏览器记载过程的的描述）

     在这个css渲染的过程中，存在两个状态，一个是flow(回流)，还有一个是Repaint(重绘)。回流是对整个cssDOM的重新渲染，性能消耗极大.。常见的js操作dom界面，和更改元素尺寸的操作会造成回流。同时table布局很容易导致回流

3.2  区域外的布局不影响相应的BFC容器中的布局。也就是营造一个独立的渲染区域，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。 可以营造BFC的几种情况:float,overflow,flex,inline-block.

3.3  :before和:after分别表示伪类选择器，匹配对应元素的第一个元素和最后一个元素。在清除浮动的例子中看见过

3.4  em表示相对父级元素的大小，rem表示相对根节点元素的大小。 在当前元素设置了字体大小的时候，em可以相对于当前字体大小进行百分比设置。 这样得话，可以实现屏幕的自适应效果。

3.5  flex布局中，默认盒子内元素等高，通过对应的垂直居中和水平居中设定。不给定宽高的情况下，用padding,盒子套盒子实现垂直居中和水平居中。设定了父类宽高的情况下，可以通过margin.

3.6 box-sizing:border-box属性表示这个元素的盒模型类型为怪异盒模型。因此对应的元素的宽高是包括了content+padding+border,w3c标准下的盒模型只是content.

3.7  暂时在安卓设备中是通过padding来设置，没有深入了解相关自适应问题。

3.8  在实际需求中，考虑到ui要求往往是边距的大小用px限定死，而对应的宽高则是随屏幕的大小变化而变化，因此大部分情况下，盒子模型是不限定死宽高的。

四、还待整理的疑惑

1.关于自适应问题？如何使用百分比+flex布局+怪异盒模型的实现方案来实现自适应？

2.伪类选择器在哪些情况下使用会更便捷？

3.css选择器是按照怎样的顺序匹配相应的节点，以怎样的编写顺序，有利于css解析器进行解析呢?