2024年6月20日实训总结

今天我们学习了两个新内容,主要还是对整个html的总结和案例作业的练习讲解

3.7 定位的扩展

3.7.1 绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了。

定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50%,top50%父盒子的一半大小。

2. 然后外边距退回自己宽度及高度的一半值就可以了 。

3.8.2 叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

2. 如果取值相同，则根据书写顺序，后来居上。

3. 后面数字一定不能加单位。

4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）

4. 网页布局总结

一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。

4.1 标准流

元素原本的排列方式，可以让盒子上下排列或者左右排列的。

4.2 浮动

可以让多个块级元素一行显示或者 左右对齐盒子，浮动的盒子就是按照顺序左右排列 。

4.3 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。