CSS常见知识点1
问题列表：
Q1：重排和重绘？
原文链接：https://blog.csdn.net/qq_27674439/article/details/98957581
浏览器的运行机制：布局
1、构建DOM树（parse）
渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；
2、构建渲染树（construct）
解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树（Rendering Tree/Frame Tree）；
3、布局渲染树（reflow/layout）
从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
4、绘制渲染树（paint/repaint）
遍历渲染树，使用UI后端层来绘制每个节点。
重排重绘
重排（重构/回流/reflow）：布局大小改变
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
重绘（repaint或redraw）：外观属性改变
当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。
关系：
在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
所以，重排必定会引发重绘，但重绘不一定会引发重排。
优化方案：
-
浏览器的优化：
浏览器会维护队列批处理，让多次的回流、重绘变成一次回流重绘。
2、我们的优化：
总结一句话就是：减少对渲染树的操作，合并多次DOM和样式的修改，并减少对style样式的请求。
（1）直接改变元素的className
（2）display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；
（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；
（4）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；
（6）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；
（7）尽量不要使用table布局。
Q2：CSS怎么实现绘制三角形？
将盒子宽高设为0，利用盒子的边框及transparent透明属性，如：
div {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
Q3: 行内元素、块元素
常见行内元素：
<span>、<a>、<label>、<input>、<textarea>、<select>、 <img>、 <strong>、<em>
常见块元素：
<div>、 <p>、<h1>、<form>、<ul> 、<li>
特点：
- 行内元素和其他元素一行展示，不可设置宽高，内容撑开宽度。设置上下padding、margin无效，左右有效
- 块元素独占一行，可设宽高和边距，没有设置宽度是，是父容器的100%。
display可以修改元素属性，常用的display属性值有：
inline行内block块inline-block行内块none不展示，不占位
Q4：盒子模型
盒模型的组成，由里向外 content,padding,border,margin.
- 在标准的盒子模型中，width指content部分的宽度
- 在IE盒子模型中，width表示content+padding+border这三个部分的宽度
box-sizing的使用：
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box
Q5：简单选择器
1、分类
-
标签选择器（又名：元素选择器） div{}
-
类选择器（Class selectors）.box1{}
-
ID 选择器 #selectid {}
-
通用选择器（Universal selector） * {}
-
组合器（Combinators）
a,b A（和/或）B的任意元素.
a b B是A的后代结点
a>b b是a的直接子节点
a+b ab是兄弟节点
2、权重
!important > 行间 1000 >内部>外部样式, ID 100>class 10>元素 1
从左往右逐个等级比较，前一等级相等才往后比
Q6: 块级格式化上下文（BFC）
更多可见：
元素产生BFC的条件：
- float属性不为none（脱离文档流）
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inine-flex
- overflow不为visible
BFC元素所具有的特性
- 在BFC中，盒子从顶端开始垂直地一个接一个地排列。
- 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
- 在BFC中，每一个盒子的左外边距（margin-left）会触碰到容器的左外边缘（border-left），对于从右往左的格式来说，会触碰到右边缘。
- BFC不会与浮动盒子产生交集，而是紧贴浮动元素边缘。
- 计算BFC高度BFC时，自然也会检测浮动的子盒子高度。
应用场景
- 自适应两栏布局
- 清除内部浮动
- 防止垂直margin重叠
Q7： flex弹性布局
基本概念
一种新的响应式布局方案，用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为Flex布局。
容器属性
-
flex-direction row | row-reverse | column | column-reverse;
决定主轴的方向（即项目的排列方向）
-
flex-wrap nowrap | wrap | wrap-reverse（换行，第一行在下方）;
如果一条轴线排不下，如何换行。
-
flex-flow
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
-
justify-content flex-start | flex-end | center | space-between | space-around;
定义了项目在主轴上的对齐方式。
-
align-items flex-start | flex-end | center | baseline | stretch;
定义项目在交叉轴上如何对齐。顶部对齐|底部|中间|文字基线|拉长上下对齐
-
align-content flex-start | flex-end | center | space-between | space-around | stretch;
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
项目属性
- order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
- flex-grow项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- flex flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
- align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
Q8： 伪类，伪元素
用法：https://www.cnblogs.com/lomon6/p/10585885.html
伪类
伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
CSS 伪类用于向某些选择器添加特殊的效果。匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM 树中一父节点的第一个子节点。
常见的伪类：
:link 将样式添加到未被访问过的链接
:visited 将样式添加到访问过的链接
:hover 鼠标悬停
:focus 被选中
:active 被激活，用鼠标点击时，元素增加特效
:first-child第一个子元素
:nth-child() 子类
tr:nth-child(2n+1):nth-child(5n) {
// p匹配能够被5整除的奇数行
}
伪元素
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
伪元素的由两个冒号::开头，然后是伪元素的名称。
匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
常见的伪元素：
::first-letter 向文本的第一个字母添加特殊样式
::first-line 向文本的第一行添加特殊样式
::before 在元素之前添加内容
::after 在元素之后添加内容
特性及其区别
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
- 伪元素本质上是创建了一个有内容的虚拟容器；
- CSS3中伪类和伪元素的语法不同；
- 可以同时使用多个伪类，而只能同时使用一个伪元素；
Q9： bem方法命名规范
BEM（Block: 块, Element: 元素, Modifier: 修饰符）是一种基于组件的Web开发方法，基本思想是将用户界面划分为独立的块。这样即使拿到的UI设计稿在复杂，也可以轻松快速地进行拆分，只需要按照特定格式的命名约定，使得前端代码更易于阅读理解，并且是可扩展的，便于团队协作后期维护。
1、所有单词一律小写
2、单词之间用 - 分隔，命名尽量不要超过三个单词，避免命名过长
3、元素名称（Element）通过 __ 与块名称（Block）分隔
4、修饰符名称（Modifier）通过 – 与块（Block）或元素（Element）名称分隔
Q10： @media媒体查询
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果，@media 媒体类型and （媒体特性）{你的样式}
如：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。
@media screen and (max-width:480px){
.ads {
display:none;
}}
参考：https://www.runoob.com/cssref/css3-pr-mediaquery.html
Q11：bem方法命名规范
BEM（Block: 块, Element: 元素, Modifier: 修饰符）是一种基于组件的Web开发方法，基本思想是将用户界面划分为独立的块。这样即使拿到的UI设计稿在复杂，也可以轻松快速地进行拆分，只需要按照特定格式的命名约定，使得前端代码更易于阅读理解，并且是可扩展的，便于团队协作后期维护。
1、所有单词一律小写
2、单词之间用 - 分隔，命名尽量不要超过三个单词，避免命名过长
3、元素名称（Element）通过 __ 与块名称（Block）分隔
4、修饰符名称（Modifier）通过 – 与块（Block）或元素（Element）名称分隔
2885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
