clear法: 设置

的伪类:after{clear:both};

overflow法： 设置

overflow:hidden;

CSS通配符

观点：

查询次数多&匹配效率低，会影响性能但是影响不大

影响可维护性 & 容易造成样式冲突

所有需要设置的元素放在一起设置

建议使用css reset文件

necolas/normalize.css

jgthms/minireset.css

选择器性能优化 参考：网站CSS选择器性能讨论

样式系统从最右的选择符开始向左进行匹配规则，只要左边还有选择符就会继续向左移动.

CSS选择器效率排序(快到慢)：

id选择器（#myid）

类选择器（.myclassname）

标签选择器（div,h1,p）

相邻选择器（h1+p）

子选择器（ul < li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel=”external”]）

伪类选择器（a:hover,li:nth-child）

优化方法：

id选择器最快，不要同时使用其他选择器

类选择器尽量不合标签选择器同时用

明确DOM结构情况下优先使用子选择器

使用类选择器替代后代选择器&子选择器

尽量用继承避免编写重复样式

浏览器渲染原理

参考：

前端必读：浏览器内部工作原理

浏览器的渲染：过程与原理

A 网页加载耗时分布：

DNS查询

TCP连接

HTTP请求及响应

服务器响应

客户端渲染(浏览器渲染)

B 渲染引擎

Geoko： Firefox(新版用Quantum)

Webkit: Safari & Chrome

Trident： IE

Edge: Edge

C 渲染流程:

1) 解析html构建DOM树： 将标签转化为内容树的DOM节点

2) 构建render树：解析外部CSS及style标志中的样式信息，用以构建render树. render树由一些包含颜色和大小等属性的矩形(??)组成，他们将被按照正确顺序显示到屏幕上.(CSS->CSSOM树，DOM+CSSOM树->render树)

3) 布局render树：确定每个节点在屏幕上的确切坐标

4) 绘制render树：遍历render树，并使用UI后端层绘制每个节点

Tip：以上过程是逐步完成的，为了更好的用户体验渲染引擎将会尽可能早地呈现内容，也就是边解析边显示.

渲染优化知识点

关键渲染路径：与当前用户操作有关的内容，即用户打开网页时首屏的显示.具体到浏览器就是HTML&CSS&JS等资源的接收及处理后渲染出页面.了解的目的就是为了优化，优化需要针对具体问题，比如保证首屏内容的最快显示,可以推出PWA也就是渐进式页面渲染，由此可以再推到资源拆分、场景策略等.

CSS & JS加载：

Tip

CSS会阻塞渲染直至CSSOM构建完毕

穿插在HTML中的script标签将阻塞HTML解析

JS的defer&async

对inline-script无效

defer用于延迟执行引入并且不阻塞HTML解析.待整个文档解析完毕后执行defer的JS，最后触发DOMContentLoaded事件.

async用于异步引入JS，如果已经加载好就会开始执行,但是执行顺序不确定.

优化方法：

优先引入CSS，JS尽量少影响DOM的构建

实际工程中经常将JS放到文档底部前(非框架文件)

三、background学习

定义：用于定义HTML元素的背景.

属性：

background-color: 背景色

设定方式：

十六进制： #ff0000

RGB: rgb(255, 0, 0)

颜色名称: red

RGBA(???)

透明：transparent

inherit：继承父元素背景色

background-image: 背景图像(默认平铺重复)

设定方式： url("[path]")

background-repeat:

水平平铺：repeat-x

垂直平铺: repeat-y

不平铺：no-repeat

background-attachment：是否随页面滚动

scroll: 跟随页面滚动

fixed：跟随进度条位置

inherit: 继承自父元素

background-position: 设置背景图像的起始位置(Firefox和Opera需要先设置为fixed才能正常工作)

设定方式：

top|center|bottom(垂直) left|center|right(水平)

x%(水平) y%(垂直)

xpos(水平) ypos(垂直)

background-origin: 相对位置

值：padding-box|border-box|content-box

background-size: 背景图片大小

值： length(宽度,高度)|percentage(宽度,高度)|cover(保持纵横比并缩放成完全覆盖背景定位区域的最大大小)|contain(保持纵横比并缩放成合适背景定位区域的最大大小，即只满足短的方向的等比例缩放)

三、深度思考

1.css可以绘制哪些常见的特殊形状？

参考：

奇妙的 CSS shapes(CSS图形)

The Shapes of CSS

梯形、三角形、六边形、圆形、心型、五角星...

SharpsDemo演示

2.如何理解vertical-align与line-height？

参考：

深入理解line-height与vertical-align

CSS深入理解vertical-align和line-height的基友关系

line-height: 行高.只影响inline元素及内容.

可选值：|||normal|inherit

默认值：normal(通常是font-size的1.2倍)

内容区：行内文本，font-size决定了其高度;

行内框：等于行间距(上半)+内容区+行间距(下半)，line-height决定了其高度;当font-size>line-height时行内框小于内容区;

行框：行内的最高行内框顶端到最低行内款底端的距离,且各行框顶端挨着上一行框的底端;

框属性：

padding、border、margin的top&bottom都不影响行高（行框高度）, 其left&right都会应用到元素的开始结尾;

行内元素的边框边界由font-size控制而非line-height;

行内替换元素：根据元素的标签属性来决定其显示的具体内容的元素，如 & . 其位于基线(vertical-align:bashline)上, 替换元素的基线是正常流中最后一个行框的基线，除非元素内容为空或者本身的overflow属性值不是visible，这种情况下基线是marigin底边缘.

vertical-align

可选值：

关键字值： baseline|sub|super|text-top|text-bottom|middle|top|bottom

长度值：??em|??px

百分比值：?% (vertical-align的百分比相对于line-height进行计算)

全局值：inherit|initial|unset

默认值：baseline

关系

对于内联元素各种想得通或者想不通的行为表现，基本上都可以用vertical-align和line-height来解释，以及进行行为矫正

vertical-align的百分比相对于line-height进行计算

学习演示地址

3.请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？

Flex布局用于简洁、完整、响应式地实现各种页面布局，给盒模型提供最大的灵活性. 采用Flex布局的元素称为Flex容器(flex container), 其所有子元素自动成为容器成员即Flex项目(flex item). 容器默认存在两根轴，水平的主轴(main axis)和交叉轴(cross axis),Flex项目默认沿主轴排列.

适用场景：

网格布局：设置flex

百分比布局：先设置flex:1, 再设置flex: 0 0 %

圣杯布局: 该填满的用flex:1

输入框布局：一侧定长，其他flex:1填满

悬挂式布局：一侧定长，其他flex:1填满

固定底栏：方向column，定高

流式布局: 参考任务一

4.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别 参考：Web品质