初识浮动、定位、伪类、伪元素

一、浮动

1.浮动的定义

浮动可以改变标签默认的排列顺序，使盒子横向排列。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘或另一个浮动框的边缘。

语法结构：{float: 属性值;}
其中属性值有none（元素不浮动）、left（元素向左浮动）、right（元素想有浮动）

2.浮动的特性

1. 浮动元素会脱离标准流（脱标）

即浮动元素会脱离标准流的控制（浮）移动到指定位置（动），且浮动的盒子不再保留原先的位置。

标准流：也称普通流、文档流。
其标签是按照规定好的默认方式排列的，如块级元素会独占一行，从上到下排列；行内元素按照从左到右排列，碰到父元素边缘则自动换行。

2. 浮动的元素会在一行内显示且元素顶部对齐（盒子上沿对齐）

3. 浮动的元素具有行内块元素的特性

在这之前我们用display:inline-block属性转换为行内块元素

4.图片文字排列在一行（文字会围绕浮动元素）

PS:
（1）盒子之间不会存在空隙
（2）如果块级盒子没有设置宽度，默认宽度和父级一样宽；添加浮动后，其大小根据内容来决定
（3）若父级宽度装不下浮动的盒子，多出的盒子会另起一行对齐

3.浮动布局

（1）浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

（2）一个元素浮动，其他兄弟元素也要浮动

浮动的盒子只会影响后面的标准流，不会影响前面的标准流

4.清除浮动

（1）为什么清除浮动

父级盒子在很多情况下，不方便给高度（比如里面的小盒子很多），但是子盒子浮动不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

（2）清除浮动的本质

清除浮动元素脱离标准流造成的影响


清除浮动之后，父级根据浮动的子盒子自动监测高度；父级有了高度，就不会影响下面的标准流

（3）语法

{clear:属性值;}

属性值有left（清除左浮动的影响）、right（清除右浮动的影响）、both（同时清除左右两边的影响）

（4）清除浮动的方法

如：

1.额外标签法（隔墙法）

在浮动的元素末尾添加一个空的标签（盒子）
新增的空标签必须是块级元素

2. 父级添加 overflow

语法：{overflow：hidden/auto/scroll}

3. 父级:after 伪元素法

相当于在有浮动元素的父级盒子后面添加一个新盒子clearfix

4. 父级双伪元素清除浮动

5.网页布局

（1）传统网页布局的三种方式

标准流、浮动、定位

标准流：让盒子上下排列或左右排列，垂直的块级盒子用标准流布局

浮动：可让多个块级元素在一行或左右对齐盒子，多个块级盒子水平显示就用浮动布局

定位：可让多个盒子前后叠压显示，元素在某个盒子内自由移动就用定位布局

（2）网页布局准则

多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动。

先设置盒子大小（宽度高度），再设置盒子的位置（只要是通栏的盒子（和浏览器一样宽），就不需要指定宽度）

（3）常见网页布局

二、定位

1.定位的定义

定位可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置
定位也是在摆放盒子，按照定位的方式移动盒子

2.定位的组成

定位模式+边偏移

定位模式：指定一个盒子在文档中的定位方式
属性：position
属性值
边偏移：决定了定位的盒子移动的最终位置（这些属性只能用于边偏移）

3.定位的分类

（1）静态定位static

静态定义是元素的默认定位方式，即无定位

语法：{position:static;}

PS:静态定位时按照标准流特性摆放位置的，它没有边偏移

（2）相对定位relative

相对定位是元素在移动位置的时候，相对于它原来的位置而言

语法：{position:relative}

PS:

• 移动位置的时候的参照点之自己原来的位置
• 不脱标，继续保留原来的位置
• 盒子在左上边，参照点为盒子的左上角；盒子在右上边，参照点为盒子的右上角；同理其他，如右上角：right：0；top：0;

（3）绝对定位absolute

绝对定位是元素在移动位置的时候，相对于它祖先元素而言

语法：{position:absolute}

PS:

• 若没有祖先元素或者祖先元素没有定位，则以浏览器为定位
• 如果祖先元素有定位，参考点是最近一级的带有定位的父元素
• 脱标，不再占有原来的位置

绝对定位的盒子的居中算法

加了绝对定位的盒子不能通过margin:0 auto实现水平居中

实现水平垂直居中：
（1）left：50%；即让盒子的左侧移动到父级元素的水平中心位置
（2）margin-left:-100px；即让盒子向左移动自身宽度的一半

“子绝父相”

• 子级是绝对定位，父级用相对定位
• 子级不需要占有位置，所以要脱标，是绝对定位
  -父级需要占有位置，所以不脱标，是相对定位

（4）固定定位fixed

固定定位是元素固定于浏览器可视区的位置，主要用于在浏览器页面滚动时元素的位置不会改变

语法：{position:fixed}

PS:

• 以浏览器的可视窗口为参照点移动元素
• 与父元素没有关系，不随滚动条滚动
• 脱标，不再占有原来的位置

固定定位小技巧：固定在版心右侧位置

（1）让固定的盒子left：50%；即让盒子移动到浏览器可视区（版心）一半的位置
（2）让固定的盒子margin-left：版心宽度一半的距离；即可让固定定位的盒子贴着版心右侧对齐

（5）粘性定位sticky

粘性定位是相对定位和固定定位对的混合

语法：{position:sticky；top：10px；}

PS:

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 不脱标，占有原来的位置（相对定位的特点）
• 必须添加top、left、right、bottom其中一个才有效

PS：定位考虑两点
（1）是否占有位置（即是否脱标）
（2）以什么为基准点移动位置

4.定位的叠放次序：z-index

在定位布局时，可能会出现盒子重叠的问题，所以用z-index控制盒子的前后次序

语法：{z-index：1;}

PS:

• 数值可以是正整数、负整数、0，默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位，只有定位的盒子才有z-index属性

5.定位的特殊特性

（1）绝对定位和固定定位和浮动类似

行内元素添加绝对定位或者固定定位，可直接设置高度和宽度
块级元素添加绝对定位或者固定定位，如果未给宽度或高度，默认大小是内容的大小

（2）浮动元素、绝对定位（固定定位）元素的都不回出发外边距合并的问题


（3）浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字（图片），绝对定位（固定定位）会完全压住盒子

三、伪类以及伪元素

1.伪类的定义

伪类用于指定元素的特定状态，表示不能用简单选择器表示的信息。

常见伪类

2.伪元素的定义

CSS 伪元素用于向某些选择器设置特殊效果。

常见伪元素：

3.二者区别

伪元素使用双冒号（::）
伪类使用单个冒号（:）

伪类的效果可以通过添加实际的类来实现

伪元素的效果可以通过添加实际的元素来实现
所以它们的本质区别就是是否抽象创造了新元素

四、目前可设置元素高度宽度的方式

块级元素可直接设置；
行内元素：

1、display：block；或者display：inline-block;
2、如果行内元素有了浮动，也可以直接设置宽度高度
3、绝对定位和固定定位的元素也可以直接设置宽度高度