css一些重要知识点

学习css差不多已经有一个月了，在这段时间里我真真正正的学到了许多的东西，从最开始的一些文本属性，到最后的媒体查询以及响应式布局等知识，自己的收获是非常多的，这里我把自己觉得重要的一些东西总结下来，同时自己也能再过一遍知识点。

外部样式表

创建外部样式表有两种方法，一种是
<link rel="stylesheet" type="text/css" href="css/style.css"/>
另外一种方式是
<style type="text/css">
@import url(css/style.css);
<style>
这两种方法虽然都能创建外部样式表，但是这两种方法的区别还是很大的：

1. 本质的差别：link属于xhtml的标签，而@import完全是css提供的一种方式。
2. 加载顺序的差别：当一个页面被加载的时候，link引用的css同时被加载，而@import引用的css会在页面全部被下载完再被加载，所以有时候在浏览@import引用加载css的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
3. 兼容性的差别：@import是css2.1提出来的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4. 使用dom控制样式的差别：当使用javascript控制dom去改变样式时，只能使用link标签，应为@import不是dom可以控制的。

浮动单独使用注意事项

1. 两个div，前一个浮动了，后一个没有浮动，那么前一个会覆盖掉后一个。
2. 两个div，第一个没有浮动，第二个浮动了，这时候位置不改变。
3. 一个元素设置了浮动，就不区分元素类型了。
4. 两个浮动的元素，在宽不够时，依旧会换行排列。

清除浮动

清除浮动的方法在这里介绍三种：
1. 添加空盒子，在浮动的元素（同级元素）后面添加一个空的div，并且定义一个类名如class=“clear”，赋给空的div。语法：.clear{clear:both;}
2. overflow:hidden;定义一个类名，如class=”clear” 给浮动元素的父元素。语法：.clear{overflow:hidden;}
3. 万能清除法：定义一个类名，如class=”clear” 给浮动元素的父元素。

 clear::after{content:"";display:bolck;clear:both;visibility:hidden;height:0;}
 clear{zoom:1;}

元素垂直居中

方法一：
text-align:center;可以让行内块元素水平居中。注意点：行内块元素使用margin：0 auto;是不能水平居中的

1.给需要居中的元素的父元素（容器）添加属性text-align:center;

2.将需要居中的元素转成行内块元素（display:inline-block;），并给其添加属性vertical-align:middle;

3.在需要居中的元素同级下添加元素span ，并对span添加属性：width:0; height:100%; display:inline-block; vertical-align:middle;

4.在垂直居中的情况下可以在其父元素的头部/中部/尾部垂直居中

方法二：
运用定位使元素垂直居中

1.给需要居中的元素的父元素设置相对定位（position:relative;）

2.给需要居中的元素设置绝对定位及相关属性（position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;）

方法三：
运用定位使元素垂直居中

1.给需要居中的元素的父元素设置相对定位（position:relative;）

2.给需要居中的元素设置绝对定位（position:absolute;），再对其设置其他属性
（1）设置left:50%; top:50%;时，需要将其向相同方向设置缩进其宽高的
一半（margin-left:-宽/2; margin-top:-高/2;）
（2）设置right:50%; bottom:50%;时，需要将其向相同方向设置缩进其宽高的
一半（margin-right:-宽/2; margin-bottom:-高/2;）
（3）设置right:50%; top:50%;时，需要将其向相同方向设置缩进其宽高的
一半（margin-right:-宽/2; margin-top:-高/2;）
（4）设置left:50%; bottom:50%;时，需要将其向相同方向设置缩进其宽高的
一半（margin-left:-宽/2; margin-bottom:-高/2;）
方法四：
运用弹性盒布局
直接给父元素设置 display:flex;
justify-content:center;
align-items:center;