1. Three ways of traditional web page layout
The essence of web page layout: use CSS to place boxes and place the boxes in corresponding positions.
CSS provides three traditional layout methods (simply put, how boxes are arranged).
(1) Ordinary stream (standard stream)
(2) Floating
(3) Positioning
This only refers to the traditional layout. In fact, there are some special and advanced layout methods.
2. Standard stream (ordinary stream/document stream)
The so-called standard flow: tags are arranged in a prescribed default way.
(1) Block-level elements will occupy an exclusive line and are arranged in order from top to bottom.
(2) Inline elements will be arranged in order from left to right, and will automatically wrap when they hit the edge of the parent element.
The above are all standard flow layouts. What we studied earlier is the standard flow. The standard flow is the most basic layout method.
These three layout methods are all used to place boxes. When the boxes are placed in the appropriate position, the layout is naturally completed.
Note: In actual development, a page basically contains these three layout methods (the mobile terminal will learn new layout methods later).
3. Why is floating needed?
Question: Can we easily achieve the following effects using standard streams?
1. How to arrange multiple block-level boxes (divs) in a row horizontally?
Although converting to inline block elements can achieve a row of display, there will be a large white space between them, which is difficult to control.
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>There is a gap in the middle of the inline block</title><style>div{width:150px;height:200px;background-color:#d87093;display:inline-block;}</style></head><body>< div>1</div><div>2</div><div>3</div></body></html>Running results:
2. How to align two boxes left and right?
There are many layout effects that cannot be completed by standard flow. At this time, floating can be used to complete the layout. Because floating can change the default arrangement of element labels.
The most typical application of floats: allowing multiple block-level elements to be displayed in a row.
The first rule of web page layout: multiple block-level elements arranged vertically look for standard flow, multiple block-level elements arranged horizontally look for float!
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Multiple block-level elements are arranged horizontally and floated</title><style>div{float:left;width:150px;height:200px;background-color:#d87093;}</style></head><body ><div>1</div><div>2</div><div>3</div></body></html>Running results:
4. What is floating?
The float property is used to create a floated box, moving it aside until the left or right edge touches the edge of the containing block or another floated box.
grammar:
Selector {float: attribute value;}Example:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Document</title><style>/*Floating labels are top-aligned*//*Floating: arranged in one line, width and height take effect--floated labels have the characteristics of inline blocks*/.one{width:100px;height :100px;background-color:pink;float:left;margin-top:50px;}.two{width:200px;height:200px;background-color:skyblue;float:left;/*Because there is floating, it cannot take effect- The box cannot be centered horizontally*/margin:0auto;}.three{width:300px;height:300px;background-color:orange;}</style></head><body><div>one</div><div >two</div><div>three</div></body></html>Running results:
