Web page is essentially the location between blocks, blocks next to blocks, blocks nested blocks, blocks stacked blocks.
Three relationships: adjacent, nested, and overlapping.
Here are some common ways of web page layout
1. One column layout:
Generally, it is a fixed width and height. Set Margin: 0 Auto to center horizontally, which is used to display the prominent title of the interface;
.main{ width: 200px; height: 100px; background-color: grey; margin: 0 auto; }
<div></div>
2. Two column layout:
Speaking of two column layout, the most common is to use float To achieve. The disadvantage of floating layout is that floating will cause text wrapping and other effects, and it needs to be timely Clear float.
Set left left float, or left and right float (this is to determine the width of the parent element)
If the parent element does not have a height set, you need to set overflow:hidden to clear the impact of floating
Clear: both; clear: both; clear: both;
<div> <div>left</div> <div>right</div> </div>
.main{ width: 400px; background: red; overflow: hidden; } .left{ background: yellow; float: left; } .right{ background: green; float: left; }
3. Three column layout:
Two side fixed width middle adaption
First, set the width of the parent element. You can set the float left and right. Then set margin in the middle to adjust the spacing. You can also set them to float to the left, set margin, and adjust the spacing. Also pay attention to clear the influence of floating!
<div> <div>left</div> <div>middle</div> <div>right</div> </div>
.main{ width: 100%; background: red; overflow: hidden; } .left{ background: yellow; float: left; width: 100px; } .middle{ background: rosybrown; float: left; width: cacl(100%-200px); } .right{ background: green; float: right; width: 100px%; }
Or set the relative attribute for the parent element, and then set the absolute attribute for the child element, and then locate and adjust the spacing separately.
<div style="background-color: lightgrey;"> <div style="background-color: lightblue;"> <p>left</p> </div> <div style="background-color: pink;"> <p>center</p> <p>center</p> </div> <div style="background-color: lightgreen;"> <p>right</p> </div> </div>
<style> p{margin: 0;} .parent{position: relative;height:40px;} .left,.right,.center{position: absolute;} .left{left: 0;width:100px;} .right{right: 0;width: 100px;} .center{left: 120px; right: 120px;} </style>
4. Mixed layout:
On the basis of one column layout, the top part and the foot part are retained, and the main part in the middle is transformed into two or three column layout. The small modules can be divided into the same level by level.
<div></div> <div> <div>left</div> <div>right</div> </div> <div></div>
.top{ height: 100px; background: teal; } .footer{ height: 100px; background: wheat; } .main{ width: 100%; background: red; overflow: hidden; } .left{ background: yellow; float: left; width: 50%; } .right{ background: green; float: right; width: 50%; }
5. Expansion (such as equal distribution office, etc.)
<div> <div></div> <div></div> <div></div> <div></div> </div>
body{margin: 0;} .parent{ border: 1px solid red; overflow: hidden; margin-right: -10px; } .child { width: calc(25% - 10px); height: 100px; background: green; float: left; margin-right: 10px; }