两栏自适应布局(左边固定，右边自适应)
利用CSS中的calc()方法来动态设定宽度
双float布局
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
overflow: hidden; /*清除浮动*/
}
.left,.right{
box-sizing: border-box;
float: left;
}
.left {
width: 120px;
border: 5px solid #ddd;
}
.right {
margin-left: 20px;
border: 5px solid #ddd;
width: calc(100% - 140px);
/*左边盒子总宽度为120px,右边盒子设置了一个marign-left为20px,则右边盒子的总 宽度为:
父容器的宽度100% - 左边盒子宽度(120px)+右盒子margin-left(20px)*/
}
<div class="wrap">
<div class="left">左左左左左左左左左左左<br /><br /><br /><br /><br />xixi</div>
<div class="right">右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</br>
右右右右右右右右右右右右右右右右右右右右右右右右
</div>
</div>
缺点：
要清除父元素的浮动
要知道左边盒子的宽度，分别设置 box-sizing,要知道两个盒子间的距离
block元素的水平宽度会随着父容器的改变而流动的特性
float + margin-left
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
overflow: hidden; /*清除浮动*/
}
.left {
width: 120px;
border: 5px solid #ddd;
float: left;
}
.right {
/*margin-left: 150px的计算：
左盒子宽度(120px,注意：这里是content-box) + 左盒子的border(10px) + 右盒子距离左盒子的距离(20px)=150px
*/
margin-left: 150px;
border: 5px solid #ddd;
}
缺点：
要清除父元素的浮动
要计算margin-left
效果图：
image.png
absolute + margin-left
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
min-height: 50px;
}
.left {
width: 120px;
border: 5px solid #ddd;
position: absolute; /*开启BFC*/
}
.right {
/*margin-left: 150px的计算：
左盒子宽度(120px,注意：这里是content-box) + 左盒子的border(10px) + 右盒子距离左盒子的距离(20px)=150px
*/
margin-left: 150px;
border: 5px solid #ddd;
background: #1da57a;
}
缺点：
父元素无法清除浮动，只能通过设置父元素的min-height来解决
效果图：
image.png
float + BFC
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
overflow: hidden; /*清除浮动*/
}
.left {
width: 120px;
border: 5px solid #ddd;
margin-right: 20px;
float: left;
}
.right {
border: 5px solid #ddd;
background: #1da57a;
margin-left: 0;
overflow: auto; /*开启BFC*/
}
image.png
flex布局
.wrap{
padding: 15px 20px;
border: 1px dashed #ff6c60;
display: flex;
align-items: flex-start; /*解决默认值stretch列等高的问题，让子盒子的高度自动*/
}
.left {
width: 120px;
border: 5px solid #ddd;
flex: 0 0 auto;
}
.right {
border: 5px solid #ddd;
background: #1da57a;
margin-left: 20px;
flex: 1 1 auto;
}
效果图
image.png
三行自适应布局
三行自适应布局特点：
-上下固定，中间显示内容且只有中间部分有滚动条。
效果图
三行自适应布局.png
--
HTML主要代码
<div class="header"></div>
<div class="main">
<div class="content">
<h3>hello</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, maiores, aspernatur distinctio, possimus consectetur delectus corporis ipsum minima eligendi obcaecati ut. Vitae pariatur deleniti ducimus sunt esse saepe, illum quam minima, asperiores mollitia molestiae non reiciendis a perspiciatis. Molestias in impedit minima mollitia facere ipsa incidunt quae hic perspiciatis necessitatibus.</p>
<div class="footer"></div>
--
CSS主要代码
<style>
body{
padding: 0;
margin: 0;
}
.header{
background-color: gray;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
.main{
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
overflow: auto;
}
.footer{
background-color: gray;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
</style>
固定顶栏
将导航固定在顶部，不随滚动条的滑动而消失。
效果图
2018-12-06_094334.png
--
HTML主要代码
<div class="nav"></div>
<div class="main">
</div>
--
CSS主要代码
<style>
body{
padding: 0;
margin: 0;
}
.nav{
background-color: crimson;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
.main{
margin-top: 100px;
background-color: rgb(195, 209, 247);
}
</style>
双飞翼布局(使用浮动)
双飞翼布局特点：
-三列布局，两边定宽，中间宽度自适应。
-中间栏要在浏览器中优先展示渲染
-允许任意列的高度最高
效果图
image.png
步骤：
1.将左右栏设置一个固定的宽度。
2.将左、右、中间栏都设置左浮动。
3.将中间栏的宽度设置为100%。
4.将中间栏的子元素的上下外边距margin设置为0，左右外边距margin设置为左栏右栏的宽度。
5.将右栏的距左外边距margin-left设置为-100%。
6.将左栏的距左外边距marign-left设置为负自身的宽度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局 demo</title>
<style>
body{
padding: 0;
margin: 0;
}
.center{
background-color: rgb(153, 103, 233);
float: left;
width: 100%;
}
.center .content{
margin: 0 200px;
}
.left{
width: 200px;
background-color: rgb(85, 238, 154);
float: left;
/* 设置为-100%,-100%也就是浏览器的宽度 */
margin-left: -100%;
}
.right{
width: 200px;
background-color: rgb(96, 162, 238);
float: left;
/* 设置为负自身的宽度 */
margin-left: -200px;
}
</style>
</head>
<body>
<div class="center">
<div class="content">主内容区</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
圣杯布局(使用定位)
效果图
-全屏
image.png
-最小屏
image.png
步骤：
1.为外容器(包裹中间栏，左右栏的容器)设置左右内边距padding，为两边侧翼留位置。
2.左右栏设置固定的宽度。
3.将中间栏，左右栏都设置为左浮动。
4.设置中间栏的宽度为100%。
5.设置左栏的距左外边距margin-left为-100%。
6.设置右栏的距左外边距margin-lef为负自身的宽度。
7.将左右栏的定位position设置为相对定位relative。且将左栏的left设置为负外部容器的宽度，右栏的right设置为负外部容器的宽度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局 demo</title>
<style>
body{
padding: 0;
margin: 0;
}
.wrapper{
/* 设置外容器的左右内边距，为两个侧翼留位置 */
padding: 0 100px;
}
.center{
background-color: rgb(172, 245, 112);
width: 100%;
float: left;
}
.left{
background-color: rgb(107, 245, 233);
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.right{
background-color: rgb(245, 128, 245);
width: 100px;
float: left;
margin-left: -100px;
position: relative;
right: -100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="center">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
圣杯布局的缺陷：当中间栏比左右栏的宽度小时，布局会乱掉。
image.png
注意：双飞翼布局和圣杯布局必须将中间栏的HTML结构放在最前面，以便浏览器可以最先渲染中间栏的内容。(浏览器渲染html是从头部到底部的方向进行渲染)。
网友评论