圣杯布局
- 左右两端宽度固定，中间center宽度自适应。
- 布局方法：
1、在主体内部外嵌套一个div
2、center在结构里面要靠前
3、centere,left,right，设置浮动
4、清除浮动
5、center的宽度为100%，left，right的宽度固定
6、left通过margin-left为负值（-100%），移动到center的最左边
7、right通过margin-left为负值（自身的宽度），移动到center的最右边
8、center的内容会被left，right遮盖
9、最外层的div添加一个padding，padding的宽度为left，right的宽度
10、left，right相对定位，移动到相应的位置，位移的量为自身的宽度。
<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>
双飞翼布局
- 左右两端宽度固定，中间center宽度自适应。
- 布局方法：
1、让left，right，center浮动
2、设置left的margin-left值为-100%
3、设置right的margin-left为负值，值为自身宽度
4、在center中添加一个div 将内容写在这个div中
5、为这个div添加一个margin，左右margin值为left，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>
弹性盒子布局
<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>
移动端布局
-
移动端布局：
1.响应式 网站比较小，代码量不多
2.分别开发两套代码 大型网站 -
视口：
布局视口 网页的宽度
视觉视口 用户可以看到的网站的区域
理想视口 视觉视口=布局视口**不同的移动设备因为分辨率，屏幕尺寸等问题，造成视觉视口不同，那么理想视口也会不同。** -
流式布局（百分比布局）
-
设置宽度为百分比，
-
标准文档流+浮动：
宽：相对于父盒子内容宽度的比值。
高：相对于父盒子内容高度的比值。
padding/margin：相对于父盒子内容宽度的比值。
-
绝对定位：
宽/padding/margin：相对于定位盒子的宽+左右padding的比值。
高：相对于定位盒子的高+上下padding的比值。【注】border：不能使用百分数。