文章目录
前言
布局:所谓的布局,就是指把一个盒子放在合适的位置。
在CSS2.0中,有三大布局:
(1)流式布局:最简单,我的盒子默认的布局.
(2)浮动布局:会难一点,在写PC端网页时,浮动布局还是主流,后面说CSS3时,还会讲一种布局方案,叫flex布局。
(3)层布局:定位
提示:以下是本篇文章正文内容,下面案例可供参考
一、标准文档流
整个html标签,就是一个BFC:块格式化上下文 (Block Formatting Context) (后面再细说BFC),每一个BFC都是彼此独立。
其中html标签形成的BFC,规定了,男盒子需要独占一行,女盒子和人妖盒子需要并排显示,满一行也会自动换行。
默认是从上到下,从左到右进行布局,这就形成一个标准的文档流。
二、三种布局方式
1.流式布局
流式布局按标准文档流进行布局的,也是默认的布局方式,这种布局方案,是最简单的一种布局方案。
**缺点:**功能太弱。
如果只使用流式布局,并不能完成复杂页面的开发。因为复杂页面中有很多的男盒子,需要并排显示。
2.浮动布局
为了让男盒子可以并排显示,此时,就需要使用浮动布局。浮动发明的原因,刚开始是让文字环绕浮动的元素,形成字围效果。
标准文档流规定:
1)男盒子需要独占一行,女盒子和人妖盒子需要并排显示,满一行也会自动换行。
2)默认是从上到下,从左到右进行布局,这就形成一个标准的文档流。
- 如果一个元素浮动了,它会半脱离标准文档流,或者说,标准文档流中的规定,有些就不再适合。
- 如果说,img完全脱离了标准文档流,后面的元素就会向上钻。img会覆盖到文字上面的。测试发现,发现,文字并没有钻到img后面的,说明,这个图片,并没有完全脱离标准文档流。
- 这种情况,叫字围效果。 就是文字围绕浮动的元素。发明浮动时,就是为了实现字围效果。
- 后来,发现,浮动,可以让男盒子并排显示,慢慢地,我们都使用浮动,让男盒子并排显示。
- 脱离标准文档流:(1) 半脱离(2) 完全脱离
(1)字围效果
例:字围效果代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0; padding: 0; }
.box{
width: 400px;
height: 400px;
border: 2px solid red;
}
.box img{
/* 让img浮动起来 */
float: left;
}
</style>
</head>
<body>
<div class="box">
<!-- src指定远程图片 -->
<!-- width="200" 它的高度会等比例缩放 -->
<!-- 人妖标签 -->
<img width="300" src="http://www.xinhuanet.com/photo/2021-03/14/1127209576_16157161876421n.jpg" alt="">
<!-- 男标签 p标签里面的文本满一行会自动换行 -->
<p>3月14日,秧歌队员在山东省惠民县皂户李镇表演。惠民县泥塑历史悠久,农历二月初二有捏泥塑、跑秧歌的传统。当日是农历二月初二,人们在丰富多彩的民俗活动中欢庆传统节日。新华社记者 范长国 摄</p>
</div>
</body>
</html>
字围效果:
(2)圣杯布局
典型的一种布局方式:圣杯布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0; padding: 0; }
.wrapper{
width: 800px;
height