文章目录
- 布局方式
-
-
- 1. 普通文档流
- 2. 浮动布局
-
- 1）属性
- 2）取值
- 3）特点
- 4）常见问题
- 5）解决（清除浮动）
- 3. 定位布局
-
- 1）属性
- 2）取值
- 3）偏移属性
- 4）分类
- 5）堆叠次序
-
布局方式
1. 普通文档流
默认布局方式，按照代码书写顺序及标签类型从上到下，从左到右依次显示。
2. 浮动布局
主要用于设置块元素的水平排列
1）属性
float
2）取值
可取 left 或 right，设置元素向左浮动或向右浮动
float:left/right;
clear:left/right/both
3）特点
- 元素设置浮动会从原始位置脱流，向左或向右依次停靠在其他元素边缘，在文档中不再占位
- 元素设置浮动，就具有块元素的特征，可以手动调整宽高
- “文字环绕”：浮动元素遮挡正常元素的位置，无法遮挡正常内容的显示，内容围绕在浮动元素周围显示
4）常见问题
子元素全部设置浮动，导致父元素高度为0，影响父元素背景色和背景图片展示,影响页面布局
5）解决（清除浮动）
- 对于内容固定的元素，如果子元素都浮动，可以给父元素固定高度(例:导航栏)
- 在父元素的末尾添加空的块元素。设置 clear:both; 清除浮动
- 为父元素设置 overflow:hidden; 解决高度为0
- 使用CSS的:after伪元素，通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。
.clear::after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
3. 定位布局
结合偏移属性调整元素的显示位置
1）属性
position
2）取值
可取relative（相对定位）/ absolute（绝对定位）/ fixed（固定定位）/sticky（粘性定位）
postion:relative/absolute/fixed
3）偏移属性
设置定位的元素可以使用偏移属性调整距离参照物的位置
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
4）分类
-
relative
元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
-
absolute
1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高
使用绝对定位 : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移
-
fixed
1. 参照窗口进行定位,不跟随网页滚动而滚动
2. 脱离文档流
-
sticky
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
5）堆叠次序
元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：
- 属性 : z-index
- 取值 : 无单位的数值,数值越大，越靠上
- 堆叠：
- 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
- 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上