css中所谓的方法 _ 人生当中当中的第一次，总结

css所谓的一些乱七八糟的方法

一、 元素不可见

	- opacity：0；
		 -- 将元素透明度设置为0，然后我们的肉眼就看不见了，很多时候都会有这样的骚操作。
		 -- 可以触发点击事件。

---

	- transform：scale(0)；
		 -- 元素缩小之后依旧会占有原始空间，不会影响布局。
		 -- 不可以触发点击事件（太小了，点不到）。

---

	- display:none;
		 -- 元素不会占有原始空间，也就是说，页面会重新布局。
		 -- 不可以触发点击事件。

---

	- 设置盒模型相关属性(margin、 border、 padding、 width、 height)为 0，并且设置overflow：hidden；
		 -- 元素不会占有原始空间， 页面会重新布局。
		 -- 不可以触发点击事件。

---

	- visibility：hidden；
		 -- 元素会占有原始空间，不会影响布局。
		 -- 不可以触发点击事件。

---

还有一些鬼头刀把的操作：比如absolute之后移出屏幕外面、z-index负到不能再负…

---

二、 元素居中（水平垂直）

1. 使用flex

	father{
		display:flex;
		justify-content:center;
		align-items:center;
	}

2. 使用css3 transform 属性

	father{
		display:relative;
	}
	child{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
	}

3. 使用display:table-cell; / 使用display:inline-block;

	father{
		display:tabel-cell;
		text-align:center;
		vertical-align:middle;
	}
	child{
		display:inline-block;
		vertical-align:middle;
	}

4. 启用position:absolute;

	father{
		position:relation; /* 使用 '父相子绝' */
	}
	child{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: 0;
	}

---

三、 清除浮动方式

1. 给父元素定义高宽;
   - 优点：代码简洁，易于理解；
   - 缺点：高度固定，当需要高度自适应时，不能满足需求。
2. 使用空元素:
   - 原理：在浮动元素之前添加 (< div style=“clear:both;”></ div>);
   - 优点：浏览器支持度比较高；
   - 缺点：html界面多空标签，不便于理解。
3. 给父元素浮动：
   - 原理：给父元素添加浮动之后，也就给父元素开启了 ‘BFC’ ；
   - 优点：没有想出哪里有…
   - 缺点：给父元素开启float之后，又会产生新的浮动问题（解决方法：从根元素的第一个子元素开始浮动，可以理解几乎所有标签都浮动了…）。
4. 给父元素display:table
   - 原理：
   - 优点：结构语义话完成正确，代码量极少；
   - 缺点：会改变盒模型结构，带出一些不确定影响，不推荐使用。
5. 给父元素添加overflow：hidden / auto
   - 原理：使用之后，开启 BFC （在 IE6 中还需要开启haslayout ‘*zoom：1’）;(使用 “*属性名” 表示在IE6、 IE7 以上生效)；
   - 优点：代码简洁直观， 结构语义明确。
   - 缺点：溢出元素隐藏， 不便于理解：“overflow是为溢出隐藏使用”。
6. 父元素 - 伪元素清除法（IE8以上才支持伪元素、IE8及以下需要使用"zoom:1;"触发haslayout）(结构样式分离)
   - 原理：首先，在使用伪元素之前得有 “结构和样式分离” 的概念；
   - HTML是一个完整的文档，也就是说，在没有任何样式表的修饰下，单独查看HTML文档也是能看懂的。
   - 使用样式表就是为了让HTML在浏览器中更加美观，更加有观赏性。
   - 也就是说 “::before” 与 “::after” 的产生是为了美化界面。

 /* - 单伪元素清除法 - */
.clearfix:after{
    content:'.';
    display:table;
    height:0;
    visibility: hidden;
    clear:both;
}
.clearfix {*zoom:1;}

/* - 双伪元素清除法 -*/
.clearfix:before, .clearfix:after{
	content:"";
	display: table;
}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
/* - 说实话，这个双伪元素清除法我也不知道好处到底在哪？- */
/* --- 难道是因为在头部添加了个table，然后元素不会浮动出去？ --- */

---

四、 BFC

BFC（Block Formatting context）“块级格式上下文”
定义：他是一个单独的渲染区域

	- 在界面上会呈现为一块独立的容器，无论容器内部如何布局，都不会对容器外部布局产生影响。

1. 布局规则：
   - 内部 Box 在竖直方向上一个接一个的放置；
   - Box 垂直方向的距离由margin决定；
   - 属于同一个BFC的两个相邻的Box，在垂直方向上的margin会发生重叠（解决办法，只给一个Box设置margin）；
   - BFC区域不会与float元素产生重叠；
   - 浮动元素会参与BFC的高度计算。

2. 触发BFC：
   - 根元素（话说，根元素能触发触发BFC我知道，但是还能设置不成？）
   - 浮动元素：float不为none的值；
   - 开启定位：position不为static和relatIve的值；
   - display：为inline-block、 一系列带有table的模型(table-xxx)、 flex、 inline-flex；
   - overflow：不为visible以外的值。

---

五、 box-sizing(怪异盒模型)

该属性有三个可选值
- content-box: 标准盒模型，width = content-width；
- border-box: 怪异盒模型， width = content-width + padding-width + margin-box；
ps：之前整理资料的时候我还发现有人写什么padding-box，结果一打开编译器，发现提示没有这，我还以为编译器坏了！！！！
然后吓得我赶紧打开MDN，然后…呵呵。。。

---

六、 px、 em、 rem、 vw 以及 wh

	- px: 像素单位，相对于屏幕的分辨率而言；值为固定值，不会因为设备的改变而改变。
	- em: 相对长度单位，根据当前对象的文本大小而给定长度。
	- rem: 相对长度单位，相对于根元素的文本 （font-size）大小给定长度。
	- vw: 相对长度单位， 相对于视窗（初始包含块）的宽度，进行长度的设定。
	- vh: 相对长度单位， 相对于视窗（初始包含块）的高度，进行长度的设定（一般初始包块的高度不足以一次显示整个界面，所以推荐使用vw）。
	- vmax：相对长度单位，相对于视窗（初始包含块）的高度与宽度两个值中，数值较大的那个进行长度的设定。
	- vmin：相对长度单位，相对于视窗（初始包含块）的高度与宽度两个值中，数值较小的那个进行长度的设定。
	*------- rem， vw， vh， vmax， vmin：在IE9以上才开始支持，直到现在的 IE11 也只是不完全支持，一般这两个单位布局都使用到移动端。

---

vw计算实例：
- 列如天杀的UI给了您这样一张设计图

- !!!没有任何标注的!!!
- 然后您得这样使用ps工具
;
- 量出总体(over)设计图的宽，然后在量出你所要设置组件(comp)的宽，
- 然后套公式：`vw = (comp-width 100) / over-width
- 比如 “美食图标” 宽高都为85px：width：85100/750 = 11.33vw；height：85100/750 = 11.33vw；
- 在比如 “字体”，量出来大概为25px； font-size：25100/750 = 3.33vw；

---

七、 外部css引入方式（link - @import）

/* - link： 页面加载的同时，link也会加载 - */
<link rel="stylesheet" style='text/css' href"url" />

/* - @import： 页面加载完成之后， @import才会加载 - */
@charset "utf-8";
@import "url";

---

八、 两个比较无聊的概念（渐进增强、 优雅降级）

1. 渐进增强
   - 一开始具备所有的功能，之后再针对低版本的浏览器进行兼容性调试。
2. 优雅降级
   - 一开始针对所有的浏览器，只有最基础的功能，之后再进行界面的优化以及动画效果的实现。

---

九、 消除inline-block的“奇异的间隙”！！！

产生原因：由于代码换行，产生多余字符（就是一个空格），于是乎inline-block（原block）之间就会产生“灵异的间隙”
- 解决方法 一 ：将元素首尾相接（头连屁股）“” 代价：降低代码可读性
- 解决方法 二 ：margin负值代价：值必须正好等于字形的宽度，(IE5.5/6/7不兼容这玩法)
- 解决方法 三 ：（终极解决方法）：当然是牛逼的不可一世的FLOAT咯。代价：会FLOAT，会ClearFloat（糟了！！！我不会。。。。）。

---

十、 "nth-child"和"nth-of-type"两个孩子的区别

括弧“神说：众生平等”，所以我们都是一样的，所以这里不介绍了，跳过！！！

赠送一次刮奖机会

刮奖区：

nth-child: 例如 p:nth-child(3){} 必须满足两个条件：

1.必须是 p 元素；

2.而且还要是第三个子元素。

nth-of-type: 例如p:nth-of-type(3){} 也必须满足两个条件：

1.先选取所有直接子元素p；

2.之后循序选中第三个。

十一、 关于css中的颜色

1. 关键字：
   • 比如：red、blue、black之类的，打开编译器的代码提示，一般都会有。
2. rgb();
   • r:red, g:green, b:blue; 三原色，比如使用红色字体:color:rgba(255, 0, 0); 黑色是rgb(0，0，0)；
3. rgba():
   • a:alpha; （什么鬼意思哦~）；比rgb()多了一个透明度，取值[0, 1]; rgba(255, 0, 0, 0.5);
4. hsl():
   • H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
   • S：Saturation(饱和度)。取值为：0.0% - 100.0%
   • L：Lightness(亮度)。取值为：0.0% - 100.0%

原谅我不举（例子），不会用，rgba()真好

5. hsla():
   • 参照rgba()理解吧。
6. transparent
   • 纯粹的全透明 —— 特指颜色

---

十二、 实现hover时，给元素添加图片、或更换图片

	.element:hover:after{
		content:url(图片路径);
		/* 但是这样设置的话，无法设置图片的样式，所以可能会影响布局！！！！！ */
		display:block;
	}
	
	/* 所以建议使用本天才刚刚所想的办法 */
	.div2:hover:after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: url() no-repeat;
		background-size: 100% 100%;
	}
	/* 这样只用控制父元素的宽高，就可以直接控制图片大小了，或者直接设置after的大小也行 */

注意：在使用after、before时，一定要设置content、 display！！！！

content：该方法引入的文本无法被选中，无法被屏幕阅读器抓住，特别是！！！ 无法被搜索引擎抓取 ！！！

但是有很多比较有意思的玩意:

<style>
.demo:before{ content: "“"; }
.demo:after{ content: "”"; }
</style>
<div class="demo">调用引号字符</div>

还有什么计数器，原谅我使用之后没有结果：给出百度关键字 counter

附上大佬实例网址：计数器

---

以上只写出了对于我自己的一些不是太熟悉的东西，有错有不足，忘告知。
恬不知耻的附上原md文件的连接