1. CSS layout model
Knowing the basic concept of the CSS box model and the type of box model, we can delve into the basic model of web page layout. Like the box model, the layout model is the most basic and core concept of CSS. But the layout model is based on the box model, and it is different from the CSS layout style or CSS layout template we often say. If the layout model is this, then the CSS layout template is the end, is the external form of expression.
CSS contains 3 basic layout models, summarized in English as: Flow, Layer and Float.
In a web page, there are three layout models for elements:
- Flow model (Flow)
- Floating model (Float)
- Layer model (Layer)
What exactly are the three layout models? The following sections will introduce you in detail.
2. Flow model (1)
Let me talk about the flow model first. Flow is the default web page layout mode. In other words, the HTML page elements in the default state of the page are distributed according to the flow model.
The flow layout model has two typical characteristics:
The first point is that the block elements will be vertically extended in order from top to bottom within the containing element, because in the default state, the width of the block elements is 100%. In fact, block elements occupy positions in rows. For example, the width of the three block element tags (div, h1, p) in the code editor on the right is displayed as 100%.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
</style>
</head>
<body>
<div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>
3. Flow model (2)
Second, under the flow model, inline elements are displayed horizontally from left to right within the contained element. (Inline elements may not be so domineering and exclusive as a block element)
The inline element labels a, span, em, and strong in the code editor on the right are all inline elements.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
</style>
</head>
<body>
<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
<strong>强调</strong>
</body>
</html>
4. Floating model
Block elements are so domineering that they are all on their own line. What if we want two block elements to be displayed side by side? Don't worry, set the element float to achieve this desire.
Any element cannot be floated by default, but it can be defined as floating using CSS. Elements such as div, p, table, img, etc. can be defined as floating. The following code can display two div elements in a row.
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
Effect picture:
Of course, you can also set two elements to float at the same time, and you can also display one line.
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
Effect picture:
Another friend asked, can you set up two elements, one left and one right, to realize one line display? of course can:
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
Effect picture:
5. Layer model
What is a layer layout model? The layer layout model is like the very popular layer editing function in the image software PhotoShop. Each layer can be precisely positioned, but in the field of web design, due to the activity of the size of the web page, the layer layout has not been popular. However, it is convenient to use the layer layout locally on the web page. Let's learn about the layer layout in html.
How to make html elements accurately positioned in a webpage, just like the layers in the image software PhotoShop, can be accurately positioned for each layer. CSS defines a set of positioning properties to support the layer layout model.
The layer model has three forms:
-
Position: absolute
-
Relative positioning (position: relative)
-
Position: fixed
6. Layer model-absolute positioning
If you want to set for the element layer model of absolute positioning, you need to set position: absolute (expressed absolute positioning) , the role of this statement will be dragged out of the elements from the document flow, and then use the left、right、top、bottomproperty relative to its closest with a location attribute The parent contains the block for absolute positioning. If there is no such containing block, it is relative to the body element, ie relative to the browser window.
For example, the following code can move the div element to the right by 100px relative to the browser window and down by 50px.
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
The effect is as follows:
7. Layer model-relative positioning
If you want to set the relative positioning of the layer model for the element, you need to set position:relative（表示相对定位）it, which left、right、top、bottomdetermines the offset position of the element in the normal document flow through the attribute. The process of relative positioning is to first static(float)generate an element in a way (and the element floats like a layer), and then move relative to the previous position, the direction and amplitude of the movement are determined by the left, right, top, bottom attributes, before the offset Remains intact.
The following code implements moving down 50px relative to the previous position and moving 100px to the right;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
Effect diagram:
What is “偏移前的位置保留不动”it called ?
You can do an experiment, divadd a spanlabel after the 19 lines of the code editor on the right , and spanwrite some text in the label. The following code:
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
Effect picture:
It can be clearly seen from the effect picture that although the div element is offset from the previous position, the previous position of the div element is still retained, so the following span element is displayed at the previous position of the div element Behind.
8. Layer model-fixed positioning
fixed: indicates fixed positioning, similar to the absolutepositioning type, but its relative movement coordinate is the view (webpage window on the screen) itself. Since the view itself is fixed, it will not change with the scroll bar of the browser window, unless you move the position of the browser window on the screen or change the display size of the browser window, so the fixed positioning element will always be located A certain position of the view in the browser window will not be affected by the document flow, which background-attachment:fixed;is the same as the attribute function. The following code can move 100px to the right and 50px down relative to the browser view. And the position is fixed when dragging the scroll bar.
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本。</p>
....
Effect picture:
9. Relative combined with Absolute
The friends have learned the absolute positioning method in 6 sections: after using the positioning of the position:absoluteset element relative to the browser (body) , have you thought about whether it can be positioned relative to other elements? The answer is yes, of course. Use position:relativeto help, but the following specifications must be followed:
1. The reference positioning element must be the predecessor element of the relative positioning element:
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
It can be seen from the above code that box1 is the parent element of box2 (the parent element is of course also the predecessor element).
2. The referenced elements must be added to position: relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3. Positioning element added position: absolute, you can use top, bottom, left, right to offset positioning.
#box2{
position:absolute;
top:20px;
left:30px;
}
In this way, box2 can be positioned relative to the parent element box1 (note that the reference object may not be a browser, but can be set freely).
