日期：2020-10-06
作者：19届WY
标签：HTML文档流，CSS元素的浮动
一、文档流：
- 文档流处在网页的最里层——它表示的是一个页面中的位置
- 我们所创建的元素都默认处在文档流中
- 元素在文档流中的特点
- 块元素
1、块元素在文档流中会独占一行，块元素会自上向下排列
2、块元素在文档流中默认宽度是父元素的100%
3、块元素在文档流中的高度默认被内容撑开 - 内联元素
1、内联元素在文档流中只占自身的大小，会默认从左向右排列
如果一行中不足以容纳所有的内联元素，则换到下一行
继续自左向右。
2、在文档流中，内联元素的宽度和高度默认都被内容撑开 - 当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小
而是会自动修改宽度，以适应内边距
<div style="background-color:#bfa;">a</div>
<div style="width:100px;height:100px;background-color:#ff0;"></div>
<span style="background-color: #FFA500;">我是一个span</span>
<span style="background-color: #FFA500;">我是一个span</span>
二、浮动
- 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，
- 所以我们可以通过浮动来设置文字环绕图片的效果
.box1{
width:100px;
height:100px;
background-color:yellow;
/*box1向左浮动*/
float:left;
}
- 在文档流中，子元素的宽度默认占父元素的全部
- 当元素设置浮动以后，会完全脱离文档流
块元素脱离文档流以后，高度和宽度都被内容撑开 - 开启span的浮动，
内联元素脱离文档流以后会变成块元素
.s1{
float:left;
width:100px;
height:100px;
}
三、简单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*清楚默认样式*/
*{
}
/*设置头部div*/
.header{
/*设置一个宽度*/
width:1000px;
/*设置一个高度*/
height:200px;
/*设置一个背景颜色*/
background-color: #bfa;
/*设置居中*/
margin:0 auto;
}
/*设置一个content*/
.content{
/*设置一个宽度*/
width:1000px;
/*设置一个宽度*/
height:400px;
/*设置一个背景颜色*/
background-color:orange;
/*设置居中*/
margin:0 auto;
}
/*设置中间content中小div的样式*/
.left{
width:200px;
height:100%;
background-color: skyblue;
/*向左浮动*/
float:left;
/*设置水平外边距*/
}
.center{
width:600px;
height:100%;
background-color: purple;
float:left;
margin:0 0px;/*影响整个元素占的位置*/
}
.right{
width:200px;
height:100%;
background-color: pink;
float:left;
}
.footer{
/*设置一个宽度*/
width:1000px;
/*设置一个宽度*/
height:100px;
/*设置一个背景颜色*/
background-color:grey;
/*设置居中*/
margin:10px auto;
}
</style>
</head>
<body>
<!-- 头部div -->
<div class="header"></div>
<!-- 主体内容div -->
<div class="content">
<!--左侧div-->
<div class="left"></div>
<!--中间div-->
<div class="center"></div>
<!--右侧div-->
<div class="right"></div>
</div>
<!-- 底部信息div-->
<div class="footer"></div>
</body>
</html>
这些盒子都是无缝贴合的
2、给中间盒子加一个外边距
.center{
width:600px;
height:100%;
background-color: purple;
float:left;
margin:0 10px;/*影响整个元素占的位置*/
没有考虑好宽度的问题，后面的盒子直接掉下来了
3、考虑宽度的问题
.center{
width:580px;/*这里改小了20*/
height:100%;
background-color: purple;
float:left;
margin:0 10px;/*影响整个元素占的位置*/
}
现在间距是正常的