1.css布局的三种机制
网页布局的核心就是用css来排放盒子的位置
css提供了3中机制用来设置盒子的摆放位置,分别普通流(标准流),浮动流和定位流;
- 普通流
块级元素独占一行,从上往下顺序排列
行内元素会按照从左到右的顺序顺序排列,碰到父元素的边缘自动换行 - 浮动流
让盒子从普通流种漂浮起来,主要作用是让多个块级元素同行显示 - 定位流
将盒子定义在浏览器可视区域的任意位置
2.浮动流
-
为什么需要学习浮动?
块级元素同行显示,如果使用display:inline-block进行同行存在一个bug,bug就是会有空格间隙
而浮动主要作用是让多个块级元素同行显示 -
浮动的作用
1.让多个块级元素同行显示
2.可以实现盒子的左右对齐
3.最早浮动使用来控制图片的,实现文字绕排效果
(前面不理解看后面有说明) -
语法
float: left right none;// 浮 漏 特
- 浮动口诀之 浮 漏
漂浮在普通流的上面 脱离文档流,俗称脱标
.box1{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
}
总结:只要有盒子设置了浮动则脱离文档流,不占原本标准流的位置
-
浮动口诀之 特
浮动有个特性:改变元素的属性display
任何元素都可以浮动,只要被浮动了的元素则直接变成行内块元素 -
浮动的应用
- 浮动元素和父元素的关系
- 子盒子的浮动参照父元素对齐
- 不会超过父元素的边框,也不会超过父元素的内边距
- 浮动元素与兄弟元素的关系
当前盒子为浮动盒子
在一个父盒子中,如果前一个兄弟盒子是
1.浮动的,那么当前盒子会与前一个盒子顶部对齐,跟着前一个兄弟盒子浮动(float值一样的)
2.是普通流的,那么当前盒子会在前一个盒子的下方
-
清除浮动
- 为什么需要清楚浮动?
因为父盒子在很多情况下不方便给高度,但是滋贺子浮动后就不占位置,则父元素的高度就会成为0,就影响了下面的标准流盒子的位置 - 清除浮动
clear : left right both;
方法:
1.额外标签法:在浮动元素的末尾也就是同级,添加一个空的块级元素,给这个元素设置清除浮动的css样式即可
优点:通俗易懂,书写方便
缺点:添加了许多无意义的标签,结构化差
2.在浮动元素的父元素上添加overflow即可,至于overflow的值都可以
优点:代码简洁,不存在无意义标签
缺点:专人专事
3.伪元素法(常用)
::after 在标签的最后添加一个子元素
::before 在标签的最前面添加一个子元素 - 为什么需要清楚浮动?
浮动带来的三个问题
1.被浮动元素所覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
2.子元素和父元素重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: aquamarine;
}
/* .clearfix::before{
content: '';
display: table;
} */
.div2{
/*
子元素和父元素外边距重叠 同时下移
*/
margin-top: 100px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="div1 clearfix">
<div class="div2"></div>
</div>
</body>
</html>
3.父元素里面有个浮动子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
border: 10px solid yellowgreen;
}
.div2{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
以上问题解决方案(解决高度塌陷)一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
BFC(Block Formatting Context)块级格式化环境
-BFc是一个css中的一个隐含的属性,可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
-元素开启BFC后的特点:
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
- 可以通过一些特殊方式来开启元素的BFC:
1、设置元素的浮动(不推荐)
2、将元素设置为行内块元素(不推荐)
3、将元素的overflow设置为一个非visible的值
-常用的方式为元素设置 overflor:hidden 开启其BFC以使其可以包含浮动元素
*/
.div1 {
border: 20px solid red;
/*
1、设置元素的浮动(不推荐)
副作用:下面的会上移
*/
/* float: left; */
/*
2、将元素设置为行内块元素(不推荐)
副作用:宽度会缺失
*/
/* display: inline-block; */
/*
3、将元素的overflow设置为一个非visible的值
有副作用但很小
*/
overflow: hidden;
}
.div2 {
width: 100px;
height: 100px;
background-color: aqua;
/*
高度塌陷的问题:
在浮动布局中,父元素的高度默认是被子元素撑开的,
当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的
高度,导致父元素的高度丢失
父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理
*/
/*
float: left;
这样就发生了高度塌陷
*/
float: left;
}
.div3 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div3"></div>
</body>
</html>
以上问题解决方案(解决高度塌陷)二——clear:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.div2{
width: 100px;
height: 200px;
background-color: red;
float: right;
}
.div3{
width: 100px;
height: 100px;
background-color: yellowgreen;
/*
由于box1的浮动,导致box3位置上移
也就是box3收到了box1浮动的影响,位置发生了改变
如果我们不希望某个元素因为其他元素浮动的影响而改变位置,
可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear
-作用:洁除浮动元素对当前元素所产生的影响
-可选值:
left清除左侧浮动元素对当前元素的影响
right清除右侧浮动元素对当前元素的影响
both清除两侧中最大影响的那侧
原理:
设置清除浮动以后,浏览器会自动为元素添加一个上
外边距,以使其位置不受其他元素的影响
*/
clear: both;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
以上问题解决方案(解决高度塌陷)三——伪类:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
border: 20px solid red;
/* overflow: hidden; */
/* display: table; */
}
.div2{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.div3{
width: 100px;
height: 100px;
background-color: yellow;
/* clear: both; */
}
.div1::after{
content: '';
display: table;
clear: both;
}
/* 这个可以同时解决高度塌陷和外边距重叠 */
.clearfix::after,.clearfix::before{
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="div1 ">
<div class="div2"></div>
<!-- <div class="div3"></div> -->
</div>
</body>
</html>
2. 拓展知识点
-
列表样式 list-style: none;
-
精灵图(雪碧图)
就是一张图片上面有很多的小图片
作用;优化网站的加载速度,提高用户体验
background-position 去获取位置 -
icon字体图标
本质是文字