【前端--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。