一，布局网页

1.1，标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如: 块元素独占一行，行内元素可以一行显示多个。

但是在实际开发中，一般通过浮动或者 Flex 来布局而不使用默认布局的。

1.2 浮动

浮动的作用：让块元素水平排列。

属性名：float

属性值：

left：左对齐
right：右对齐

浮点之后的的元素特点：

顶对齐
具备行内块显示模式
脱标现象：浮动之后的元素会脱离标准流，意思就是在浏览器中认为浮动的元素不存在。

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度(可能导致页面布局错乱)
解决方法：清除浮动( 清除浮动带来的影响）

清除浮动方法：

额外标签法：在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

单伪元素法：

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

双伪元素法 (推荐)

.clearfix::before,
.clearfix:;after{
    content: "";
    display: table;
}
.clearfix::after{
    clear:both;
}

父元素添加 CSS 属性overflow:hidden

1.3 Flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力.
Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活

1.3.1 Flex组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器（这个设置了display:flex的父容器)
弹性盒子(父容器的子容器)
主轴：默认在水平方向，弹性盒子默认沿主轴方向排列。
侧轴/交叉轴：默认在垂直方向

1.3.2 主轴与侧轴对齐方式

主轴对齐方式：

属性名：justify-content
属性值：

侧轴对齐方式

属性名：
- align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
- align-self：单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
属性值：

1.3.3 修改主轴方向

修改主轴方向，侧轴会自动修改。

属性名：flex-direction

属性值：

1.3.4 弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。（主轴在水平方向就是控制宽度，垂直就是高度）

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

在默认情况下，主轴方向靠内容撑开，侧轴默认拉伸。

1.3.5 弹性换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

属性名：flex-warp

属性值：

warp：换行
nowarp：不换行(默认)

1.3.5 对齐方式

属性名: align-content

属性值：

这个是对多行弹性盒子生效的，即需要配合弹性换行属性才能生效。

注意点，flex:1 不一定都生效，在浏览器的 input 元素默认宽度优先级高于 flex:1，故要想 flex:1 生效就需要把宽度重置为 width:0 即可

二，定位

作用：灵活的改变盒子在网页中的位置。主要是用来实现将多个标签压在一起显示。

实现：

定位模式position
边偏移：设置盒子的位置。
- left：右对齐，如果文字多了，向左撑开。
- right：左对齐，如果文字多了，向右撑开。
- top
- bottom

2.1 相对定位

使用属性：position: relative就是代表使用相对定位。

相对定位改变位置的参照物是自己原来的位置。
相对定位不脱标，改变之后依旧占据着原来位置。
标签显示模式是不会更改。

2.2 绝对定位

使用属性：position: absolute

使用场景：子级绝对定位，父级相对定位 (子绝父相)

下图中展会活动就是子标签，通过子绝父相的设置来实现悬浮到父标签上方！

特点：

脱标，不占位
绝对定位的位置是**参照有相对定位属性的父级（最近的）**来设置的。如果父级不存在相对定位那么就默认参照浏览器最大的标签body来设置。
显示模式会改变成块级

正常编写中都是通过绝对定位和相对定位配合使用，不会单独使用。

2.3 定位居中

实现如下图效果采用定位居中方式：

实现步骤：

子标签采用绝对定位
水平垂直边偏移为50%
子级向左上移动自身尺寸的一半。
- 左，上的外边距为-尺寸的一半(可以用margin-left和margin-top或者下面这个属性)
- transform:translate(-50%,-50%)

2.4 固定定位

使用场景：元素的位置在网页滚动时不会改变。

属性：position: fixed，一般用作网页搜索框，侧边栏。

特点：

托标，不占位
改变位置的参照物是浏览器窗口。
显示模式变成了行内块显示模式。
即宽度靠内容撑开！

2.5 堆叠层级 z-index

当多个 div 盒子都使用了定位，并且定位到了同一个位置就需要使用这个属性来决定显示哪个盒子了。

默认效果: 按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性：z-index

属性值：取值是整数，默认是 0，取值越大显示顺序越靠上。

三，CSS精灵

作用：实现网页里面一些小图。

CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再
background-position 精确的定位出背景图片的位置

优点: 减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同。
设置盒子背景图为精灵图
添加background-position属性，改变背景图位置。
1. 使用PxCooK测量小图片左上角坐标
2. 取负数坐标为background-position属性值（向左上移动图片位置）（即指定图片左上角的坐标取负值）

原理解释，将多张小图合并为一张大图，然后通过设置背景属性，背景位置，让盒子只显示一个背景，其他的图片由于盒子大小无法显示。这样就能只请求一次就能获取多张图片。

如上图，改变背景位置来显示指定的小图。

四，字体图标

字体图标如下图：

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点

灵活性：灵活地修改样式，例如:尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用

iconfont 图标库：https://www.iconfont.cn/

下载完后将文件夹改名然后放入 web 指定目录下调用即可。

使用字体图标

引用字体样式表iconfont.css
标签使用字体图标类名
1. iconfont：字体图标基本样式（字体名，字体大小等）
2. icon-xxx：图标对应类名
具体可以看demo里面有教

上传自定义字体图标到我们下载的字体图标库

作用：项目特有的图标上传到 iconfont 图标库https://www.iconfont.cn/，生成字体

生成后再项目下载即可。

CSS布局