CSS一些概念知识及参考连接

时间 2019-12-11

标签 css 一些概念知识参考连接栏目 CSS 繁體版

原文原文链接

一、为何浏览器解析 css 选择器是从右到左的

参考：https://github.com/zwwill/blog/issues/2css

二、伪元素和伪类的单冒号和双冒号

参考：https://www.jianshu.com/p/ebb86a086a87 html

三、重排和重绘

当渲染树中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而发生改变时，浏览器会使渲染树中受到影响的部分失效，并从新构造这部分渲染树，这就是重排。完成重排后，浏览器会从新绘制受影响的部分到屏幕中，该过程被称为重绘。git

重排一定会引起重绘，但重绘不必定会引起重排。github

参考：https://www.cnblogs.com/zichi/p/4720000.html、http://www.javashuo.com/article/p-hiifunrc-kp.htmlweb

四、JS操做动画和css动画的区别

参考：https://blog.csdn.net/qinlulucsdn/article/details/80664183、https://www.cnblogs.com/simba-lkj/p/6139066.html编程

五、CSS选择器优先级

!important > 行内样式 > ID选择器 > 类 = 伪类 = 属性选择器 > 标签 = 伪元素 > 通配符 > 继承浏览器

为何CSS是从右到左解析的，参考：http://www.cnblogs.com/zhaodongyu/p/3341080.htmlsass

六、BFC布局规则

块格式化上下文（Block Formatting Context，简称BFC），能够理解为块级元素中的块级子元素的布局规则。只有块级子元素参与。性能优化

6.一、BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每一个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

属于同一个BFC内的块级元素的布局符合 BFC 布局规则，BFC 元素内的块级子元素也能够是一个 BFC，该子元素仍是会符合BFC父元素的布局规则，但该子元素里面的子元素即子子元素就和外面的BFC的子元素不属于同一个BFC了。less

下面的第一个P元素和第二个P元素不属于同一个 BFC 内：

<body>
  <p>Haha</p>
  <div class="wrap">
     <p>Hehe</p>
  </div>
</body>

.wrap {
    overflow: hidden;
}

6.二、拥有BFC的元素

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

6.三、BFC的做用

6.3.一、实现自适应两栏布局

利用BFC布局规则第四条：BFC的区域不会与float box重叠。能够实现自适应两栏布局

6.3.二、清除内部浮动

根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算

6.3.三、防止垂直 margin 重叠

根据BFC布局规则第二条：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。经过使两个块级元素在不一样的 BFC 内能够解决margin 重叠的问题。

详情参考：https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

七、浏览器前缀

参考：https://blog.csdn.net/jlj_cs/article/details/44204863

八、css性能优化

8.一、慎重选择高消耗的样式

高消耗属性在绘制前须要浏览器进行大量计算，好比：box-shadows、border-radius、transparency、transforms、CSS filters（性能杀手）

8.二、避免频繁重排

当发生重排的时候，浏览器须要从新计算布局位置与大小，常见的重排元素：width、height、padding、margin、display、border-width、position、top、left、right、bottom、

8.三、不泛滥使用float

Float在渲染时计算量比较大，尽可能减小使用。

8.四、合理使用选择器

CSS选择器的匹配是从右向左进行的，因此有些看似很高效的选择器实际对性能消耗很高，好比：

#header>a {font-size: bold}　　　　子选择器，浏览器必须遍历页面中全部的 a 元素而且肯定其父元素的 id 是否为 header 。
#header a {font-size: bold}　　　　后代选择器开销更大，在遍历页面中全部 a 元素后还需向其上级遍历直到根节点。

因此应该合理使用选择器：

保持简单，不要使用嵌套过多过于复杂的选择器。
通配符和属性选择器效率最低，须要匹配的元素最多，尽可能避免使用。
避免使用标签或 class 选择器限制 id 选择器
不要为了追求速度而放弃可读性与可维护性。

8.五、经过CSS继承减小代码量

常见的能够继承的属性好比：color，字体font系列，visibility，文本系列text-indent、text-align等等。

不可继承的好比：position，display，float，background等

8.六、使用link加载样式表，而不是@import方式

使用@import引入CSS会影响浏览器对样式表的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析以后，浏览器才会知道还有另一个css须要下载，这时才去下载，而后下载后开始解析、构建render tree等一系列操做。这就致使浏览器没法并行下载所需的样式文件。

8.七、精简样式文件，删除没用样式

参考：http://baijiahao.baidu.com/s?id=1603253323416106525&wfr=spider&for=pc

九、less 和 sass

9.一、变量

@nice-blue: #5B83AD;
#header { color: @light-blue; }

9.二、混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

9.三、带参数混合

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  .border-radius(4px);
}

9.四、嵌套规则

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

9.五、运算

任何数字、颜色或者变量均可以参与运算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

9.六、命名空间

将一些变量或者混合模块打包封装，更好的组织CSS和属性集的重复使用

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
  }
  .tab { ... }
}
#header a {
  #bundle > .button;
}

9.七、做用域

LESS 中的做用域跟其余编程语言很是相似，首先会从本地查找变量或者混合模块，若是没找到的话会去父级做用域中查找，直到找到为止.

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red  
}