Holy Grail layout
- The width of the left and right ends is fixed, and the width of the middle center is adaptive.
- Layout method:
1. Nest a div inside the main body
2. Center should be at the front of the structure
3. Centere, left, right, set float
4. Clear float
5. Center width is 100%, left and right width Fixed
6. Left passes the margin-left to a negative value (-100%), and moves to the leftmost side of the center
7. Right passes the margin-left to a negative value (the width of itself), and moves to the rightmost
of the center 8. The content of the center Will be covered by left and right
9. Add a padding to the outermost div. The width of the padding is left, and the width of right is
10. Left and right are positioned relative to each other and move to the corresponding position. The amount of displacement is its own width.
<style>
* {
position: 0;
margin: 0;
}
body {
font-size: 40px;
min-width: 700px;
}
header,
footer {
width: 100%;
height: 50px;
background-color: darkcyan;
text-align: center;
line-height: 50px;
}
.content {
padding: 0 200px;
text-align: center;
line-height: 300px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.center,
.left,
.right {
float: left;
height: 300px;
}
.left {
width: 200px;
background-color: darkgoldenrod;
margin-left: -100%;
position: relative;
left: -200px;
}
.center {
width: 100%;
background-color: darkgreen;
}
.right {
width: 200px;
background-color: darkmagenta;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
<body>
<header>header </header>
<div class="content clearfix">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
Double flying wing layout
- The width of the left and right ends is fixed, and the width of the middle center is adaptive.
- Layout method:
1. Let left, right, and center float
2. Set the margin-left value of left to -100%
3. Set the margin-left of right to a negative value and the value of its own width
4. Add a div to the center The content is written in this div
5. Add a margin to this div, and the left and right margin values are the width of left and right.
<style>
* {
margin: 0;
padding: 0;
}
header,
footer {
width: 100%;
height: 50px;
background-color: darkseagreen;
}
.center {
width: 100%;
background-color: deeppink;
}
.left,
.right,
.center {
float: left;
height: 300px;
}
footer {
clear: both;
}
.left,
.right {
width: 200px;
background-color: darkslateblue;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
.item {
margin: 0 200px;
}
</style>
<body>
<header>header </header>
<div class="center">
<div class="item">item</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<footer>footer </footer>
</body>
Flexible box layout
<style>
* {
margin: 0;
padding: 0;
}
header,
footer {
width: 100%;
height: 50px;
background-color: deeppink;
}
.content {
height: 300px;
display: flex;
background-color: firebrick;
}
.center {
background-color: forestgreen;
flex-grow: 1;
}
.left,
.right {
width: 200px;
background-color: deepskyblue;
}
.left {
order: 1;
}
.center {
order: 2;
}
.right {
order: 3;
}
</style>
<body>
<header>header </header>
<div class="content">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
Mobile layout
-
Mobile terminal layout:
1. The responsive website is relatively small, and the amount of code is not much
. 2. Two sets of code large-scale websites are developed separately -
Viewport:
The width of the layout viewport webpage. The
visual viewport. The area of the website that users can see.
Ideal viewport. Visual viewport = layout viewport.**不同的移动设备因为分辨率，屏幕尺寸等问题，造成视觉视口不同，那么理想视口也会不同。** -
Flow layout (percentage layout)
-
Set the width as a percentage,
-
Standard document flow + float:
width: relative to the ratio of the content width of the parent box.
Height: The ratio of the height relative to the content of the parent box.
padding/margin: The ratio relative to the content width of the parent box.
-
Absolute positioning:
width/padding/margin: relative to the ratio of the width of the positioning box + left and right padding.
Height: The ratio of the height relative to the positioning box + the upper and lower padding.【注】border：不能使用百分数。