文章介绍了网页自适应布局的概念，以及实现两列自适应的布局方法。接着详细阐述了圣杯布局和双飞翼布局的实现步骤，这两种布局主要用于解决页面三栏结构中两侧固定、中间自适应的问题。最后讨论了等高布局的两种实现方式，包括伪等高和内容撑开方法，以达到多列元素高度一致的效果。
自适应：
自适应指的是网页可以自己适应不同的设备尺寸，并显示其内容。解决了不同设备提供不同版本页面的问题
两列的自适应
该布局指的是左边固定宽度，右边宽度自适应
1. 设置两个盒子，左边盒子的宽度固定，右边盒子自适应
2. 左边盒子要设置一个绝对定位
3. 在右侧盒子中添加一个子盒子，给子盒子设置外边距，外边距的值为左侧盒子的宽度
样式
<style>
* {
margin: 0;
padding: 0;
}
.left {
width: 200px;
height: 200px;
background-color: blueviolet;
position: absolute;
}
.right {
width: 100%;
height: 200px;
background-color: brown;
}
.box {
height: 200px;
margin-left: 200px;
}
</style>
</head>
结构
<body>
<div class="left">left</div>
<div class="right">
<div class="box">right</div>
</div>
</body>
圣杯布局
对于中间黄色的部分
1、将三者全部float，在加上position:relative，
2、中间部分宽度是100%沾满
3、如果中间沾满了，所以要把left拉到左边，使用margin-left:-100%
4、这个时候左边的回来了，会覆盖中间100%的部分，要把覆盖的那部分在拉出来，使用内边距腾出来就可以了
5、中间部分拉回来了，左边会跟着过来，就要对左边使用相对定位，left:-300px,同样的道理，也要还原右边
6、 为了高度保持一致，可以使用最小高度 min-height
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 700px;
}
.header,
.footer {
background-color: #bbb;
border: 1px solid seagreen;
text-align: center;
}
.middle,
.left,
.right {
float: left;
min-height: 150px;
}
.container {
overflow: hidden;
padding: 0 200px 0 200px;
background-color: white;
}
.left {
position: relative;
margin-left: -100%;
left: -200px;
width: 200px;
background-color: red;
}
.right {
margin-right: -100%;
position: relative;
width: 200px;
background-color: blueviolet;
}
.middle {
width: 100%;
background-color: black;
}
</style>
</head>
<body>
<div class="header">
<h1>header</h1>
</div>
<div class="container">
<div class="middle">
<h2>middle</h2>
<p>middle content</p>
</div>
<div class="left">
<h2>left</h2>
<p>left content</p>
</div>
<div class="right">
<h2>right</h2>
<p>right content</p>
</div>
</div>
<div class="footer">
<h3>footer</h3>
</div>
</body>
双飞翼
1、html代码中，main放在最前面，然后是left 和 right
2、main left right 需要浮动 float : left
3、main设置成100%
4、因为mian 是100%宽度，要把left 拉到最左边，使用margin-left:-100% right到最右边，使用margin-left:-200px
5、main'的内容被覆盖了，圣杯布局使用的内边距，除了内边距还可以使用外边距，需要给main添加一个子元素，然后设置 margin: 0 200px 0 200px
6、 main需要正常显示
样式
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 700px;
}
/* 头部和底部 */
.header,
.footer {
width: 100%;
height: 50px;
background-color: #666;
text-align: center;
}
.left,
.main,
.right {
min-height: 130px;
float: left;
}
.footer {
clear: both;
}
.main {
background-color: aqua;
width: 100%;
}
.left {
width: 200px;
background-color: blue;
margin-left: -100%;
}
.right {
width: 200px;
background-color: blueviolet;
margin-left: -200px;
}
.main-inner {
min-height: 130px;
background-color: aliceblue;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
结构
<body>
<div class="header">
<h1>header</h1>
</div>
<div class="main">
<div class="main-inner">
<h1>main</h1>
</div>
</div>
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<h1>right</h1>
</div>
<div class="footer">
<h1>footer</h1>
</div>
</body>
等高布局
方法一：
样式
<style>
*{
margin: 0;
padding: 0;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.wrap{
width: 900px;
margin: 0 auto;
overflow: hidden;
border: 1px solid gold;
}
.left{
float: left;
width: 300px;
background-color: blue;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
.middle{
float: left;
width: 300px;
background-color: rebeccapurple;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
.right{
float: left;
width: 300px;
background-color: red;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
</style>
</head>
结构
<body>
<div class="clearfix wrap">
<div class="left"> 第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列</div>
<div class="middle">第二列第二列第二列第二列第二列第二列</div>
<div class="right">第三列</div>
</div>
</body>
优点：结构简单，兼容所有浏览器
缺点：伪等高，需要合理的控制padding和margin的值
方法二：使用内容撑开
原理：利用内容撑开父元素的特点，给每一列添加相对应的容器，并进行相互嵌套，并在每个容器中添加背景色
注意：有多少列就需要有多少个容器，比如三列 就需要三个容器
样式
<style>
*{
margin: 0;
padding: 0;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.wrap{
width: 900px;
margin: 0 auto;
overflow: hidden;
background-color: blueviolet;
}
.bg1{
background-color: blanchedalmond;
width: 100%;
}
.bg2{
background-color: yellow;
width: 100%;
position: relative;
left: 300px;
}
.bg3{
background-color: violet;
width: 100%;
position: relative;
left: 300px;
}
.bg3{
min-height: 200px;
}
.left{
width: 300px;
float: left;
margin-left: -600px;
}
.center{
width: 300px;
float: left;
margin-left: -300px;
}
.right{
width: 300px;
float: left;
}
</style>
</head>
结构
<body>
<div class="wrap">
<!-- 背景色一 -->
<div class="bg1">
<!-- 背景色二 -->
<div class="bg2">
<!-- 背景色三 -->
<div class="bg3">
<div class="left">
第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列第一列</div>
<div class="center">第二列</div>
<div class="right">第三列</div>
</div>
</div>
</div>
</div>
</div>
</body>
扫一扫
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
