Day6-CSS4：伪元素，浮动，定位，字体图标

伪元素

在html骨架中，并没有通过html标签去实现，而是通过css模拟出来的标签效果。

作用：一般用在页面中的非主体部分，某些情况下可以简化代码，

区别：

普通元素：通过html标签生成

伪元素：通过css模拟出来的标签效果

本质区别：是否在html中创建了新标签

html5语法—— ::before在父元素位置的最前面添加一个伪元素

::after 在父元素位置的最后面添加一个伪元素

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

注意点：

1. 必须设置content属性才能生效

2. 伪元素默认是行内元素

浮动

简介：布局方式，漂浮元素，块元素水平排布

作用：早起用于图文混排，现在主要用于页面布局

语法
    float
        right
        left
        none（默认）

特点

1. 浮动元素会脱标，脱离标准流开始浮动，在标准流中不占位置，相当于从地面飘向天空

2. 浮动元素比标准流级别高，可以覆盖标准流中的元素

3. 下一个浮动元素，会在上一个浮动元素的后面进行左右浮动（实现块元素水平排布

4. 浮动元素会受上面元素边界的影响

5. 浮动元素有特殊的显示效果

   对于行级元素：浮动之后可以设置宽高，相当于变成了块级元素，在将来布局的时候不需要再加上display: block;

   对于块级元素：浮动之后就不会独占一行，一行可以显示多个，并且可以实现水平排布

总结

不管是行级元素还是块级元素，浮动之后都当做块级元素来处理（设置宽高）

操作

c1不浮动，c2浮动

现象

c2并没有飘到和c1同一行

原因

c1是块元素，在标准流中独占一行。浮动元素会受上面元素边界的影响，c2无法飘到和c1同一行

解决

c1设置成行内块

清除浮动

父元素在标准流中的高度是由子元素撑起来的，子元素浮动会脱标，没法撑开父元素高度。会影响后面元素的布局，需要清除浮动

目的

为了让父元素有高度，不影响后面元素的布局

解决方式

1. 给父设置高度

2. 额外标签法：做法——给父元素内容最后添加一个块元素；给这块元素设置属性clear: both;清除左右两边浮动的影响

3. 单伪元素清除法 做法 使用伪元素替代额外标签 不影响html结构 注意 伪元素需要写content 需要写display：block 伪元素默认行级，需要转成块 再加clear：both

将清除浮动的代码抽成一个公共类clearfix，清除浮动是只需要添加该类，提高了通用性

4.双伪元素清除法 前面写一个伪元素，分隔父子元素的margin-top，解决塌陷问题 后面伪元素，用于清除浮动 优点 比单伪元素新增了解决margin塌陷的问题

定位

概念：可以让元素自由摆放在页面中的任意位置（做叠加效果）

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

应用场景

1. 盒子之间的层叠效果，因为定位之后，元素的层级是最高的，可以叠加在其他盒子上面

2. 可以让盒子固定在屏幕的某一位置上

使用

1. 设置定位的方式：position属性，相对定位或绝对定位

2. 设置偏移值：在水平和垂直方向就近各取一个，

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

相对定位

1. 没有脱标，占据空间

2. 参考原点，之前在标准流中左上角（相对于之前的位置进行移动（自恋型

语法：position：relative

使用

1. 用于小范围的移动

2. 子绝父相（子元素在父元素的任意位置上移动）

绝对定位

1. 脱标，不占位置

2. 参照的原点：最近有定位的祖先元素，父元素没有定位就一层层上溯，都没有就参照body左上角（拼爹型

语法：position：absolute

使用：子绝父相（父元素相对定位，使子元素按父元素原点定位）

子绝父相

一种跟定位相关的布局技巧。子元素绝对定位，父元素相对定位

作用，可以让子元素相对于父元素进行自由移动。

固定定位

相对于浏览器进行的定位（死心眼型）

语法：position：fixed

使用固定定位将img固定在右下角

特点

1.脱标，不占位置

2.参照原点：body左上角

可以让盒子固定在屏幕的某一位置

层级关系

不同布局之间的层级关系

标准流<浮动<定位

定位优先级最高，可以叠加在其他元素之上。

不同定位之间的层级关系

相对定位，绝对定位，固定定位之间的优先级是相同的，写在最后的元素层级最高

z-index：设置优先级，数字越大优先级越高。这样就不需要修改html结构

Transform

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform:位移属性， translateX沿x轴以东，50%就是相对于自身宽度

transform: translate(-50%,-50%); 定义2d的动态水平居中，第一个参数代表了x轴方向，第二个参数代表y轴方向

字体图标

本质是一个字体，可以通过css样式直接控制属性，非常的灵活。

iconfont展示

阿里巴巴提供的字体库，使用之前需要先下载字体库，再引入，最后再调用对应类名去展示。

font-class 引用

---

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

• 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。

• 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

font-awesome展示

网址

不需要下载，可以直接引入网址，再调用对应的类名去展示

引入链接

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.1/css/all.css" rel="stylesheet">