伪类：after{clear:both};溢出方法：设置

溢出：隐藏；CSS通配符观点：查询多&匹配效率低，会影响性能，但对可维护性影响不大&容易造成样式冲突，应该把所有需要设置的元素放在一起设置。推荐使用css重置文件necolas/normalize.cssjgthms/minireset.css选择器性能优化参考：网站CSS选择器性能讨论样式系统从最右边的选择器开始向左移动。只要左边有选择器，它就会继续向左移动。CSS选择器效率排序（快到慢）：id选择器（#myid）类选择器（.myclassname）标签选择器（div,h1,p）相邻选择器（h1+p）子选择器（ulCSSOM树，DOM+CSSOM树->渲染树）3）布局渲染树：确定每个节点在屏幕上的确切坐标4）绘制渲染树：遍历渲染树，使用UI后端层绘制每个node提示：以上过程是一步步完成的，渲染引擎为了更好的用户体验会尽早渲染内容，即边解析边显示。渲染优化知识点关键渲染路径：与用户当前操作相关的内容，即用户打开网页时首屏的显示。具体来说，浏览器就是接收并处理HTML&CSS&JS等资源，渲染出Page。理解的目的是为了优化。优化需要解决具体问题，比如保证首屏内容最快显示。可以推出PWA，是渐进式页面渲染，可以推送到资源拆分，场景策略等。CSS&JS加载：TipCSS会阻塞渲染，直到CSSOM构建好穿插在HT中ML中的script标签会阻塞HTML解析JSdefer&async对inline-script无效defer用于延迟引入，不阻塞HTML解析。整个文档解析完成后，执行deferJS，最后触发DOMContentLoaded事件。async用于异步导入js，如果已经加载，则开始执行，但执行顺序不定。优化方法：优先引入CSS，JS尽量少影响DOM的构建。实际项目中，JS往往放在文档底部之前（非框架文件）3.背景学习定义：用于定义HTML元素的背景。属性：background-color：背景色设置方式：十六进制：#ff0000RGB:rgb(255,0,0)颜色名称：redRGBA(???)transparent：transparentinherit：继承父元素的背景色background-image：Backgroundimage(defaulttilerepeat)设置方法：url('[path]')background-repeat:Horizo??ntaltile:repeat-xVerticaltile:repeat-ydoesnottile:no-repeatbackground-attachment:是否随页面滚动滚动：跟随页面滚动fixed：跟随进度条positioninherit：继承自父元素background-position：设置背景图片的起始位置（Firefox和Opera需要先设置为fixed才能正常工作）设置方法：top|center|bottom(vertical)left|center|right(horizo??ntal)x%(horizo??ntal)y%(vertical)xpos(horizo??ntal)ypos(vertical)background-origin:relative位置值:padding-box|border-box|content-boxbackground-size:背景图片尺寸值:length(width,height)|percentage(width,height)|cover(保持纵横比和比例完全覆盖背景定位区域最大尺寸)|contain(保持纵横比和比例为适合背景定位区域的最大尺寸，即只满足比例缩放在短方向）三、深度思考1、css可以画出哪些常见的异形？参考：WonderfulCSSshapes(CSS图形)TheShapesofCSS梯形、三角形、六边形、圆形、心形，五角星...SharpsDemodemo2.vertical-align和line-height怎么理解？参考：深入理解line-height和vertical-alignCSS深入理解vertical-align和line-height的友情line-height：行高。只影响内联元素和内容。可选值：<长度>|<百分比>||normal|inherit默认值：normal（一般为font-size的1.2倍）contentarea：行内文本，font-size决定其高度；inlinebox：等于行间距（上半部分）+内容区域+行间距（下半部分），line-height决定了它的高度；当font-size>line-height时，行内框小于内容区域；linebox：该行中最高inlinebox的顶部到最低inlinebox底部的距离，每个linebox的顶部紧挨着上一行box的底部；box属性：top&bottomofpadding、border、margin不影响行高（lineboxheight），其left&right会作用于元素的首尾；内联元素的border边界由font-size控制，而不是line-height；行内替换元素：根据元素的label属性决定其显示具体内容的元素，如&。它位于基线（vertical-align:bashline）上，取代元素的基线是正常流中最后一个linebox的基线，除非元素的内容为空或者自身的overflow属性值为不可见，在这种情况下，基线是边缘的底部边缘。vertical-align可选值：关键字值：baseline|sub|super|text-top|text-bottom|middle|top|bottom长度值：??em|??px百分比值：?%（vertical-align的百分比是相对于line-height计算的）全局值：inherit|initial|unsetdefaultvalue:baselinerelationship对于行内元素能搞定或不能搞定的各种行为，基本上都可以用vertical-align和line-height来解释，而行为矫正vertical-align的百分比是相对的到行-h八进行计算学习示范地址3.请解释一下CSS3的Flexbox（灵活盒布局模型）及其适用场景？Flex布局用于以简洁、完整和响应式的方式实现各种页面布局，为盒子模型提供最大的灵活性。使用Flex布局的元素称为Flex容器，其所有子元素自动成为容器成员，即FlexItem（弹性项目）。容器默认有两个轴，主轴和交叉轴。默认情况下，弹性项目沿主轴排列。适用场景：网格布局：设置flex百分比布局：先设置flex:1，再设置flex:00%圣杯布局：使用flex:1输入框布局填充：一侧固定长度，其他flex:1填充悬挂布局：一侧固定长度，其他flex:1填充全固定底栏：方向栏，固定高度流式布局：参考任务14.title和h1、b和strong、i和em、img的区别是什么alt和title，src和href参考：WebQuality