常见的CSS布局总结
2018-10-22 本文已影响12人
夜未央_M
这是一片引用别人的文章，因为自己目前掌握还不够透彻，暂时先学习他写的文章，待以后清楚了再补回来这篇。
作者：sunny519111
链接：https://www.jianshu.com/p/be7a452bf707
1.左侧固定，主要内容自适应
主要运用知识点
- 负边距 margin-left: -.....；
- 浮动 float:left;
- 填充 padding;
<div class="layout">
<div class="layout_left"></div>
<div class="layout_main"></div>
</div>
css样式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding-left: 210px;
}
.layout_left,.layout_main{
height: 100px;
float: left;
}
.layout_main{
width:100%;
background: red;
}
.layout_left{
width: 200px;
background: green;
margin-left: -210px;
}
对应效果 请点击,comecomecome.
2. 右侧固定左侧主要内容自适应
主要运用知识点
- 负边距 margin-left: -.....；
- 浮动 float;
- 填充 padding;
- 注意相对于左边固定浮动变成了右浮动相应的负边距也变成了右
<div class="layout">
<div class="layout_main"></div>
<div class="layout_right"></div>
</div>
css样式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding-right: 210px;
}
.layout_main{
width:100%;
background: red;
height: 100px;
float: left;
}
.layout_right{
float: right;
width: 200px;
height: 100px;
background: green;
margin-right: -210px;
}
对应效果 请点击,comecomecome.
三栏布局
在传统的圣杯布局上有一些改动，效果和圣杯布局相似
左右2边固定，中间内容自适应
主要运用知识点
- 负边距 margin-left: -.....；
- 浮动 float;
- 填充 padding;
- 注意左右浮动和左右负边距
<div class="layout">
<div class="layout">
<div class="layout_left"></div>
<div class="layout_main"></div>
<div class="layout_right"></div>
</div>
</div>
css样式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding: 0 210px;
}
.layout_left,.layout_main{
float: left;
height: 100px;
}
.layout_left{
width: 200px;
margin-left: -210px;
background: red;
}
.layout_main{
width: 100%;
background: #adcdef;
}
.layout_right{
float: right;
width:200px;
height: 100px;
background: #666;
margin-right: -210px;
}
对应效果 请点击,comecomecome.
2个固定项目都在左边固定，主要内容在项目右边自适应
主要运用知识点
- 负边距 margin-left: -.....；
- 浮动 float;
- 填充 padding;
- 注意左右浮动和左右负边距
<div class="layout">
<div class="layout_left1"></div>
<div class="layout_left2"></div>
<div class="layout_main"></div>
</div>
css样式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding-left: 420px;
}
.layout_left1,.layout_left2,.layout_main{
float: left;
height: 100px;
}
.layout_left1{
width: 200px;
background: red;
margin-left: -420px;
}
.layout_left2{
width: 200px;
margin-left: -210px;
background: orange;
}
.layout_main{
width: 100%;
background: blue;
}
对应效果 请点击,comecomecome.
2个固定项目都在右边固定，主要内容在项目左边自适应
主要运用知识点
- 负边距 margin-left: -.....；
- 浮动 float;
- 填充 padding;
- 注意左右浮动和左右负边距
<div class="layout">
<div class="layout_main"></div>
<div class="layout_right1"></div>
<div class="layout_right2"></div>
</div>
css样式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding-right: 420px;
}
.layout_main{
width: 100%;
background: #eee;
height:100px;
float: left;
}
.layout_right1,.layout_right2{
float: right;
height: 100px;
width: 200px;
}
.layout_right1{
background: red;
margin-right: -210px;
}
.layout_right2{
background: blue;
margin-right: -420px;
}
对应效果 请点击,comecomecome.
下面是我写的。
借鉴https://blog.csdn.net/baidu_24024601/article/details/52810921?utm_source=blogxgwz0
左右布局
1.左边固定宽度，右边自适应
方法：左元素左浮动+右元素元素设置margin-left为左边元素的宽度（同理可得右固定，左自适应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#left{
width:300px;
height: 100%;
background: #009f95;
float:left;
}
#right{
margin-left: 300px;
height: 100%;
background: #444444;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
</body>
</html>
