【前端–JavaScript】知识点（八）—— 给男朋友总结的CSS知识点（二）

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

不知道昨天的css知识点男朋友们记住了多少，今天继续昨天知识点的补充，男朋友们在空闲时间接着回顾哦！

纯css创建三角形的原理

均分原理，把矩形分为四等份，四等份其实是边框，给块级元素设置宽高为0，然后设置边框的宽度，不需要显示的部分的边框为透明色：

.square{
  width:0;
  height:0;
  margin:0 auto; 
  border:6px solid transparent;
  border-top: 6px solid red;  
}
复制代码

display:none与visibility：hidden的区别

display:none：none不显示对应的元素，在文档布局中不分配空间
visibility：hidden：hidden隐藏对应元素，在文档布局中保留原来的空间

position跟display、overflow、float这些特性相互叠加的结果

position：absolute/fixed优先级最高，这时候的float是不起作用的，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

BFC规范的理解

BFC：块式上下文（block formatting context）;
BFC规定了内部的Block Box布局，定位方案：

1. 内部的Box会在垂直方向上一个接一个放置。
2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
3. 每个元素的margin box 的左边，与包含块border box的左边相接触。
4. BFC的区域不会与float box重叠。
5. BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 计算BFC的高度时，浮动元素也会参与计算。

触发BFC机制条件：（满足之一即可）

1. 根元素，即html
2. float的值不为none（默认）
3. overflow的值不为visible（默认）
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed

浮动带来的问题，清除浮动的方式

浮动带来的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1. 父级div定义height
2. 最后一个浮动元素后加空div标签 并添加样式clear:both。
3. 包含浮动元素的父标签添加样式overflow为hidden或auto。
4. 父级div定义zoom

css预处理器

CSS预处理器是用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。可以让CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等。

比如说：Sass（ 基于Ruby写的  ）、LESS（基于Node写的）、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。

预处理器能力

1. 嵌套 反映层级和约束 

2. 变量和计算 减少重复代码 

3. Extend和Mixin 代码片段复用 

4. 循环 适用于复杂有规律的样式 

5. import CSS文件模块化

CSS优化、提高性能的方法

1. 避免过度约束
2. 避免后代选择符
3. 避免链式选择符
4. 使用紧凑的语法
5. 避免不必要的命名空间
6. 避免不必要的重复
7. 尽量语义化类名
8. 避免！important，可以选择其他选择器
9. 尽可能的精简规则，合并不同类里的重复规则

margin和padding的使用场景

margin：

1. 需要在border外侧添加空白
2. 空白处不需要背景色
3. 上下相连的两个盒子之间的空白，需要相互抵消时。

padding：

1. 需要在border内侧添加空白
2. 空白处需要背景颜色
3. 上下相连的两个盒子的空白，希望为两者之和。

兼容性问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

响应式设计的原理

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做相应处理，页面头部必须有meta声明的viewport。

::before 和 :after中双冒号和单冒号的区别以及伪元素的作用

• 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

• ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。

对line-height的理解

行高是指一行文字的高度，具体来说是两行文字之前基线的距离，CSS中起高度作用的是height和line-height，没有定义height属性，那起表现作用的一定是line-height。

• 单行文本垂直居中：把line-height值设置为height一样大小
• 单行文字的垂直居中，其实也可以把height删除。
• 多行文本垂直居中：需要设置display属性为inline-block。