Date: 2020-10-06
Author: 19th WY
Tags: HTML document flow, CSS element floating
1. Document flow:
- The document flow is in the innermost layer of the web page-it represents the position in a page
- The elements we create are in the document flow by default
- Features of elements in document flow
- Block element
1. The block element will occupy a line in the document flow, and the block element will be arranged from top to bottom.
2. The default width of the block element in the document flow is 100% of the parent element.
3. The height of the block element in the document flow is by default Content spread - Inline elements
1. Inline elements occupy only their own size in the document flow, and will be arranged from left to right by default.
If one line is not enough to accommodate all inline elements, change to the next line and
continue from left to right.
2. In the document flow, the width and height of inline elements are stretched by the content by default - When the value of the width of the element is auto, the specified inner margin will not affect the size of the visible frame,
but will automatically modify the width to fit the inner margin
<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>
2. Floating
- The floating element will not cover the text, the text will automatically wrap around the floating element,
- So we can set the effect of text surrounding the picture by floating
.box1{
width:100px;
height:100px;
background-color:yellow;
/*box1向左浮动*/
float:left;
}
- In the document flow, the width of the child element accounts for all of the parent element by default
- When the element is set to float, it will be completely separated from the document flow. After the
block element is separated from the document flow, the height and width are supported by the content - Open the floating of the span,
the inline element will become a block element after leaving the document flow
.s1{
float:left;
width:100px;
height:100px;
}
Three, simple layout
<!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>
These boxes fit seamlessly
2. Add a margin to the middle box
.center{
width:600px;
height:100%;
background-color: purple;
float:left;
margin:0 10px;/*影响整个元素占的位置*/
Without considering the width, the box behind fell directly
3. Consider the issue of width
.center{
width:580px;/*这里改小了20*/
height:100%;
background-color: purple;
float:left;
margin:0 10px;/*影响整个元素占的位置*/
}
The spacing is normal now