日期：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
;
float:left
;
}
在文档流中，子元素的宽度默认占父元素的全部当元素设置浮动以后，会完全脱离文档流 块元素脱离文档流以后，高度和宽度都被内容撑开开启span的浮动， 内联元素脱离文档流以后会变成块元素
.s1{
float:left
;
width:100px
;
height:100px
;
}
三、简单布局
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8">
<title></title>
<style type=
"text/css">
*{
}
.header{
width:1000px
;
height:200px
;
background-color: #bfa
;
margin:0 auto
;
}
.content{
width:1000px
;
height:400px
;
background-color:orange
;
margin:0 auto
;
}
.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
;
height:100%
;
background-color: purple
;
float:left
;
margin:0 10px
;
}
现在间距是正常的
