左边固定宽度 右边自适应布局 两栏自适应
左侧浮动 右侧使用margin-left
<!--左边固定宽度 右边自适应布局 两栏自适应布局 -->
<!DOCTYPE html>
<html>
<head>
<title>自适应布局</title>
<style>
.container {
overflow: hidden;
border: 1px solid red;
}
.left {
float: left;
width: 200px;
height: 150px;
background: green;
}
.right {
margin-left: 200px;
height: 150px;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="left">固定的区域</div>
<div class="right">自适应区域</div>
</div>
</body>
</html>
注意父元素要使用overflow: hidden
第二种 使用双float和calc进行布局
css的代码如下
.outer {
overflow: hidden;
border: 1px solid red;
}
.left {
float: left;
width: 200px;
background: pink;
height: 150px;
}
.right {
float: left;
width: calc(100%-200px);
height: 100px;
background: green;
}
左右两边宽度100 中间自适应布局
第一种解法 使用浮动和margin
需要注意的是 将middle写在最后面 这个可以保证元素在同一行
左右两侧使用浮动 中间使用margin 就可以
<style>
* {
margin: 0;
padding: 0;
}
.outer {}
.left,
.right {
width: 100px;
height: 100px;
}
.left {
float: left;
background: pink;
}
.right {
float: right;
background: green;
}
.middle {
height: 100px;
background: red;
margin: 0 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="left">固定区</div>
<div class="right">固定区</div>
<div class="middle">自适应区</div>
</div>
元素垂直居中
.outer {
margin: auto;
width: 500px;
height: 100px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
这种方式的垂直居中 不适合在页面上有另一个相邻的页面页进行定位垂直
两者会互相影响的 会有意想不到的布局 情况
第二种元素垂直居中
.outer {
height: 100px;
width: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
这种不适合在有自适应宽高的布局中进行使用
第三种垂直居中
.outer {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
/*定位父级的50% */
top: 50%;
transform: translate(-50%, -50%);
/*自己的50% */
}
这种在ie8中不支持
弹性布局找一下 为什么失效了
height: 300px;
-webkit-display: flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
border: 1px solid #ccc;
第二种解法 两边绝对定位 中间使用margin
.left,
.right {
width: 100px;
height: 100px;
}
.left {
position: absolute;
left: 0;
top: 0;
background: green;
}
.right {
position: absolute;
right: 0;
top: 0;
background: pink;
}
.middle {
height: 100px;
background: red;
margin: 0 100px;
}
第三种解法 圣杯布局
利用的是三个div进行浮动 利用margin-left的负值进行相关的移动
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<style>
.container {
height: 200px;
background: #666;
}
.center {
box-sizing: border-box;
/*这只padding是为了防止内容过多 内容被两边的盒子压住*/
padding: 0 210px;
float: left;
width: 100%;
height: 200px;
background: red;
}
.left {
height: 200px;
width: 200px;
float: left;
background: pink;
margin-left: -100%;
}
.right {
float: right;
width: 200px;
height: 200px;
background: yellow;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center">中间</div>
<div class="left">固定区域</div>
<div class="right">固定区域</div>
</div>
</body>
</html>
第四种解法 弹性布局的两栏自适应
.wrap {
display: flex;
width: 100%;
height: 100%;
}
.left,
.right {
width: 200px;
height: 200px;
background: blue;
}
.center {
flex: 1;
height: 200px;
background: red;
}
<div class="wrap">
<div class="left">固定区域</div>
<div class="center">自适应区域</div>
<div class="right">固定区域</div>
</div>
####双飞翼布局 第五种
和圣杯布局的区别在于中间栏div内容不被遮挡”问题的思路不一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style>
.container {
overflow: hidden;
}
.center,
.left,
.right {
float: left;
height: 200px;
}
.left {
margin-left: -100%;
background: pink;
width: 200px;
height: 200px;
}
.right {
margin-left: -200px;
width: 200px;
height: 200px;
background: red;
}
.content {
margin: 0 220px;
}
.center {
width: 100%;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<div class="content">中间内容</div>
</div>
<div class="left">固定区域</div>
<div class="right">固定区域</div>
</div>
</body>
</html>
双飞翼布局和圣杯布局的区别
两者都是利用margin-left的负值这个属性,只不过处理中间的内容被遮住的方法不一样
圣杯布局主要中间只有三个div 通过box-sizing: border-box进行设置padding的大小
双飞翼的布局 多了在center中多了一个div 在这个div进行设置margin 防止中间的内容被压住