第四周浮动、定位、伪类、伪元素

三种定位方式

定位方式分为文档流（默认），浮动定位，层定位三种

文档流

文档流定位，指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。这里还要讲讲行内元素inline和块级元素block，其实还有行内块级元素inline-block。三种元素可以通过display属性相互转换。

行内元素

行内元素：显然，这种元素存在于一行内，且能与别的行内元素共同享有一行。常见的行内元素有：span、input、a、em、strong、b、br、img、select、button等。

那么行内元素拥有的特点如下：
1.每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。
2.行内元素设置width, height无效（此处有坑，请往下看），宽度随元素的内容而变化。
3.行内水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

块级元素

块级元素：顾名思义，这个元素是“一块”，那么作为一个块，它就应该有自己的宽度和高度。而且它比较霸道，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外），一般作为容器使用，常见的块级元素有：from、select、 textarea、h1-h6 、table 、button 、hr 、p 、ol 、ul等。

结合以上内容，块级元素拥有以下特点：
1.每个块级元素都是独自占一行。
2.元素的高度、宽度、行高和边距都是可以设置的。　　
3.元素的宽度如果不设置的话，默认为父元素的宽度。

行内块级元素

行内块级元素具有行内元素和块级元素的一部分特性，不单独占一行，width，height等可以设置，常见有img，input。

浮动定位

浮动float有三种取值
（1）float：left；左浮动

（2）float：right；右浮动

（3）float：none；无浮动

任何元素都可以使用浮动，无论是块级元素div、ul等等，还是行内元素都可以浮动，任何被声明float的元素都会自动被设置成块元素，有了块级元素的各种特点，可以设置宽高，可以设置内外边距。

但是很重要的一个点就是：float浮动用于布局，可以很轻松的达到靠左靠右的效果，但是，当使用完float浮动之后，一定要记住清除浮动，要不然很可能会造成高度坍塌。
浮动后盒子的位置
（1）左浮动的盒子向上向左排列；

（2）右浮动的盒子向上向右排列；

（3）浮动盒子的顶边不得高于上一个盒子的顶边；

（4）若剩余空间无法放下浮动的盒子，则该盒子向下移动，直至具备足够的空间可以容纳盒子，然后再向左或向右移动。

层定位

层定位的posiiton属性有以下取值
1，static(默认)
当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。

一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。

left,top属性对static没有效果，static是靠margin这些定位的。

2，relative(相对定位)
在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。

有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

3，absolute(绝对定位)
如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。

如果没有父元素，位置是相对于body来进行的。

绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。
4, fixed(固定定位)
我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”，那么如果我想让一个元素定位的参照物总是整个文档(viewport)，怎么办呢？

答案是使用fixed定位，fixed定位的参照物总是当前的文档。利用fixed定位，我们很容易让一个div定位在浏览器文档的左上，右上等方位。

伪类，伪元素

伪类指给当前整个 html 代码已经存在的元素（标签）模拟添加一个类样式来实现一种效果
伪类的好处
我们类写法需要当前 p 元素去调用这个样式，而使用伪类则不需要这样写
伪类分别是first-child伪类、超链接伪类、其他伪类。
first-child伪类定义：first-child 伪类来选择父元素的第一个子元素

语法：子元素（选择器）+ ：（分号）+ first-child + {定义的样式（字体颜色，字体大小…）}

首先一定要第一个子元素，之后还要判断是不是我们相同的子元素选择器
超链接伪类
在支持 CSS 的浏览器中，用超链接伪类实现链接的不同状态以不同的方式显示，例如设置超链接未被访问时的颜色、已访问时的颜色、鼠标滑过时的颜色、选中后的颜色。未访问颜色的设置使用 link 伪类、已访问使用visited、鼠标滑过使用hover、已选中使用active。
其他伪类
基本格式相同
ul li first-child{}
伪元素
伪元素就是指模拟一个元素来实现某种效果
基本格式：
标签::伪元素，随后即可对对应的样式进行生效
伪元素可以使用 first-line（第一行）、before（在什么之前）、after（在什么之后）等