网页布局本质是用css来摆放盒子,把盒子摆放到相应的位置,css提供了三种传统布局方式(简单来说,就是盒子如何进行排列顺序)
1. 普通流(标准流)
2.浮动
3.定位
1.2 标准流(普通流或者叫文档流)
1.块元素:div,hr,p,h1-h6,ul,ol,li,dl,form,tabl
2.行内元素(内联元素):会按照顺序会从左往右依次排序,碰到父元素的边缘则自动换行,常用标签有:span,a,i,em等
以上都是标准流布局就是按照标签规定好的顺序进行排列
<!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>
</head>
<body>
<p>标准流就是根据标签默认方式排列</p>
<p>标准流就是根据标签默认方式排列</p>
<p>标准流就是根据标签默认方式排列</p>
<p>标准流就是根据标签默认方式排列</p>
<p>标准流就是根据标签默认方式排列</p>
<p>标准流就是根据标签默认方式排列</p>
<img src="" alt="">
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<a href="">标准流</a>
<span>浮动</span>
<em>定位</em>
<em>定位</em>
<em>定位</em>
<em>定位</em>
<em>定位</em>
<em>定位</em>
</body>
</html>
为什么需要浮动?
我们是否能用标准流很容易实现如下效果?
答:比较难,虽然转换行内块元素可以实现,但他们之间会有较大的空隙
提问2
如何实现两个盒子左右对齐
总结:很多布局效果,标准流是无法完成的,所以需要利用浮动来完成布局,因为浮动可以改变元素标签的默认排列方式
float 属性用于创建浮动框,将其移动到另一边,直到左边的边缘或右边边缘或另一个浮动框的边缘
语法:
选择器 {
float:属性值;
}
以下为float的属性重点记住前三个,这是开发中最常用的
加了浮动之后的元素,会具有很多特性
1.浮动元素会脱离标准流(脱标)
2.浮动元素会在一排显示并且元素顶部对齐
3.浮动元素具有行内块元素的特性
2.设置了浮动的元素的重要特征
1.脱离标准普通流的控制,移动到指定位置简称脱标
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>
.box {
width: 500px;
height: 500px;
background-color: red;
}
.left,
.right {
width: 100px;
height: 100px;
} /*公共属性*/
.left {
float: left;
background-color: black;
}
.right {
float: left;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
浮动元素具有行内块特性
1.如果盒子没有设置宽度,默认宽度是和父级一样宽的,但是添加浮动后他的大小根据内容决定 如下图所示
2.浮动的盒子中间是没有空隙的(上面已经展示过了不做展示)
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> .box { width: 500px; height: 500px; background-color: pink; } p { background-color: red; } </style> </head> <body> <div class="box"> <p>添加浮动后他的大小由内容决定</p> </div> </body> </html>
此时p的宽度默认和他的父亲一样宽,接下来我们给p标签加上浮动,来让我们看下效果
行内元素设置浮动后可以改变宽高,具有行内块特性
<!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>
.box {
width: 500px;
height: 500px;
background-color: pink;
}
span {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span>hello world</span>
</div>
</body>
</html>
上面,即使给span标签设置宽高也不起作用,因为他是行内元素,不能设置宽高,让我看下变成浮动后的span标签有什么变化
<!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>
.box {
width: 500px;
height: 500px;
background-color: pink;
}
span {
/* 设置向左浮动 */
float: left;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span>hello world</span>
</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>
.box {
width: 500px;
height: 500px;
background-color: blue;
}
.no1,
.no2,
.no3
{
width: 100px;
height: 100px;
}
.no1 {
background-color: red;
}
.no2 {
background-color: aliceblue;
}
.no3 {
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">
<div class="no1"></div>
<div class="no2"></div>
<div class="no3"></div>
<div class="no4"></div>
</div>
</body>
</html>
以上代码块没有设置浮动
d
<!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> .box { width: 500px; height: 500px; background-color: blue; } .no1, .no2, .no3 { width: 100px; height: 100px; } .no1 { background-color: red; } .no2 { float: left; background-color: aliceblue; } .no3 { background-color: aqua; } </style> </head> <body> <div class="box"> <div class="no1"></div> <div class="no2"></div> <div class="no3"></div> <div class="no4"></div> </div> </body> </html>
给no2设置向左浮动,我们会发现,no2浮动后虽然脱离了标准流,但还是在原来位置?这是为什么呢,因为no1是标准流,标准流是独占一行,所以no2才会原地漂浮
以上就是我关于浮动的讲解,希望能帮到初学者朋友们