文章目录
一、浮动的简介
a. 通过浮动可以使一个元素向其父元素的左侧或右侧移动
b. 使用 float 属性来设置于元素的浮动
可选值：
none 默认值 ，元素不浮动
left 元素向左浮动
right 元素向右浮动
c. 注意，元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，
所以元素下边的还在文档流中的元素会自动向上移动
d.浮动的特点：
1、浮动元素会完全脱离文档流，不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动，
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
e.浮动的其他特点
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围， 所以我们可以利用浮动来设置文字环绕图片的效果
- 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
f.脱离文档流的特点：
块元素：
1、块元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
脱离文档流以后，不需要再区分块和行内了
- 简单总结：
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，
通过浮动可以制作一些水平方向的布局
二、网页的布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
内容区域
内容区域一般有三种形式:
1 列：一般用于移动端
2 列：一般用于平板设备
3 列：一般用于 PC 桌面设备
代码演示：
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
header, main, footer{
width: 1000px;
margin: 0 auto;
}
/* 设置头部 */
header{
height: 150px;
background-color: silver;
}
/* 设置主体 */
main{
height: 500px;
background-color: #bfa;
margin: 10px auto;
}
nav, article, aside{
float: left;
height: 100%;
}
/* 设置左侧的导航 */
nav{
width: 200px;
background-color: yellow;
}
/* 设置中间的内容 */
article{
width: 580px;
background-color: orange;
margin: 0 10px;
}
/* 设置右侧的内容 */
aside{
width: 200px;
background-color: pink;
}
/* 设置底部 */
footer{
height: 150px;
background-color: tomato;
}
</style>
</head>
<body>
<!-- 创建头部 -->
<header></header>
<!-- 创建网页的主体 -->
<main>
<!-- 左侧导航 -->
<nav></nav>
<!-- 中间的内容 -->
<article></article>
<!-- 右边的边栏 -->
<aside></aside>
</main>
<!-- 网页的底部 -->
<footer></footer>
</body>
</html>
运行结果：
三、高度塌陷问题
1.高度塌陷的问题：
在浮动布局中，父元素的高度默认是被子元素撑开的，
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
子元素未浮动：
子元素浮动后：
BFC(Block Formatting Context) 块级格式化环境
-
BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域 -
元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素 -
可以通过一些特殊方式来开启元素的BFC：
1、设置元素的浮动（不推荐）
2、将元素设置为行内块元素（不推荐）
3、将元素的overflow设置为一个非visible的值
- 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素
四、 clear和clearfix
1、clear
-
作用：清除浮动元素对当前元素所产生的影响
- 可选值：
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧 -
原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，
以使其位置不受其他元素的影响
部分代码：
div {
clear: left;
}
例子：
2、解决高度塌陷的最终方法
<style>
<!--在最底层容器最后设置一个after加上clear：both-->
.box1::after{
content: '';
display: block;
clear: both;
}
</style>
3、clearfix
clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
模板：
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
五、定位
1、定位简介
- 定位（position）
- 定位是一种更加高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 使用position属性来设置定位
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
2、相对定位
- 当元素的position属性值设置为relative时则开启了元素的相对定位
- 相对定位的特点：
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块，行内还是行内
position: relative;
3、 偏移量（offset）
1.当元素开启了定位以后，可以通过偏移量来设置元素的位置
2.top - 定位元素和定位位置上边的距离
bottom - 定位元素和定位位置下边的距离
定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中一
- top值越大，定位元素越向下移动
- bottom值越大，定位元素越向上移动
3 left - 定位元素和定位位置的左侧距离
right - 定位元素和定位位置的右侧距离
定位元素水平方向的位置由left和right两个属性控制
通常情况下只会使用一个
- left越大元素越靠右
- right越大元素越靠左
left: 100px;
top: -200px;
4、绝对定位(大部分和相对定位一起用)
- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
- 绝对定位的特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的
6.使用了绝对定位元素，父元素未开启定位，参照点是body浏览器视口区域
包含块( containing block ) - 正常情况下：
包含块就是离当前元素最近的祖先块元素
<div> <div></div> </div>
<div><span><em>hello</em></span></div>
绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素，
如果所有的祖先元素都没有开启定位则根元素就是它的包含块
html（根元素、初始包含块）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
/* left: 0;
top: 0; */
bottom: 0;
right: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 400px;
height: 400px;
background-color: tomato;
position: relative;
}
.box5{
width: 300px;
height: 300px;
background-color: aliceblue;
/* position: relative; */
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>
当box4 和5开启相对定位，box2无定位时：
当box4 和box5开启相对定位，box2开启绝对定位时：
当box4 开启相对定位，box5关闭相对定位，box2开启绝对定位时：
当box4 和box5关闭相对定位，box2开启绝对定位时：
5、固定定位：
- 将元素的position属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动
position: fixed;
left: 0;
top: 0;
6、粘滞定位
- 当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致，
不同的是粘滞定位可以在元素到达某个位置时将其固定
position: sticky;
top: 10px;
7、层级
对于开启了定位元素，可以通过z-index属性来指定元素的层级
- z-index需要一个整数作为参数，值越大元素的层级越高
- 元素的层级越高越优先显示
- 如果元素的层级一样，则优先显示靠下的元素
- 祖先的元素的层级再高也不会盖住后代元素
2897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
