CSS全面解析之二：CSS 布局
2019-07-08 本文已影响1人
望穿秋水小作坊
-
布局的简单回溯
布局重要性的介绍
-
常见的布局方法
常见布局方法
-
现代化布局 flexbox 布局，核心代码如下。如果要兼容老版本，那还是比较麻烦的。
<style>
.container{
width:800px;
height:200px;
display: flex;
}
.left{
background: red;
display: flex;
width:200px;
}
.right{
background: blue;
display: flex;
flex:1;
}
</style>
-
响应式设计和布局
响应式布局相关概念
实现响应式布局的核心代码思想
@media (min-width:800px) {
section {
width: 800px;
}
}
5.利用 float 和 margin 来实现主流并且兼容性非常好的两栏三栏的布局。
以下是腾讯新闻网采用这种布局清除浮动的方法：
.clearfix:after {
clear:both;
content:"";
display:table;
}
float + margin 进行布局以及清除浮动的示例，必须掌握。
<!DOCTYPE html>
<html lang="en">
<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>float + margin 布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header1 {
background-color: aqua;
}
section {
height: 100%;
width: 100%;
margin: 0 auto;
}
@media (min-width:800px) {
section {
width: 800px;
}
}
.section1 {
background-color: yellow;
height: 400px;
width: 30%;
border: 5px solid black;
float: left;
}
.section2 {
background-color: blue;
height: 300px;
width: 70%;
border: 5px solid pink;
float: right;
}
.section3 {
background-color: red;
height: 500px;
width: 100%;
border: 5px solid green;
}
.clearfix {
height: 0;
clear: both;
}
.container:after {
content: ' ';
clear: both;
display: table;
}
</style>
</head>
<body>
<section>
<header class="header1">header1</header>
<div class="container">
<div class="section1">section1</div>
<div class="section2">section2</div>
</div>
<div class="section3">section3</div>
</section>
</body>
</html>
效果图
经典的图文环绕效果
<!DOCTYPE html>
<html lang="en">
<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>实现图文环绕的经典效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.article:after {
clear: both;
content: ' ';
display: table;
}
img{
float: left;
height: 200px;
width: 180px;
vertical-align: bottom;
}
.content {
float: left;
word-break: break-all;
word-wrap: break-word;
vertical-align: bottom;
}
.other-section {
background-color: red;
height: 500px;
width: 100%;
border: 5px solid green;
}
</style>
</head>
<body>
<section class="article">
<div class="content">
<img src="./view.png" alt="" srcset="">
厦门市土地总面积1569.3平方公里，其中以低丘、台地类型为主，占土地总面积的62.5%，其次是平原和滩涂，各占14%和7.7%。耕地土壤类型有6个土类、11个亚类、21个土属、42个土种，多分布在海拔50米左右的低丘、台地和平原，坡度多在25度以下，红壤和水稻土占了耕地总面积的78%以上，土壤肥力中下等，中低产田占总面积的比重较大，约占总耕地面积的60%以上。厦门市土地总面积1569.3平方公里，其中以低丘、台地类型为主，占土地总面积的62.5%，其次是平原和滩涂，各占14%和7.7%。耕地土壤类型有6个土类、11个亚类、21个土属、42个土种，多分布在海拔50米左右的低丘、台地和平原，坡度多在25度以下，红壤和水稻土占了耕地总面积的78%以上，土壤肥力中下等，中低产田占总面积的比重较大，约占总耕地面积的60%以上。厦门市土地总面积1569.3平方公里，其中以低丘、台地类型为主，占土地总面积的62.5%，其次是平原和滩涂，各占14%和7.7%。耕地土壤类型有6个土类、11个亚类、21个土属、42个土种，多分布在海拔50米左右的低丘、台地和平原，坡度多在25度以下，红壤和水稻土占了耕地总面积的78%以上，土壤肥力中下等，中低产田占总面积的比重较大，约占总耕地面积的60%以上。厦门市土地总面积1569.3平方公里，其中以低丘、台地类型为主，占土地总面积的62.5%，其次是平原和滩涂，各占14%和7.7%。耕地土壤类型有6个土类、11个亚类、21个土属、42个土种，多分布在海拔50米左右的低丘、台地和平原，坡度多在25度以下，红壤和水稻土占了耕地总面积的78%以上，土壤肥力中下等，中低产田占总面积的比重较大，约占总耕地面积的60%以上。厦门市土地总面积1569.3平方公里，其中以低丘、台地类型为主，占土地总面积的62.5%，其次是平原和滩涂，各占14%和7.7%。耕地土壤类型有6个土类、11个亚类、21个土属、42个土种，多分布在海拔50米左右的低丘、台地和平原，坡度多在25度以下，红壤和水稻土占了耕地总面积的78%以上，土壤肥力中下等，中低产田占总面积的比重较大，约占总耕地面积的60%以上。厦门市土地总面积1569.3平方公里，其中以低丘、台地类型为主，占土地总面积的62.5%，其次是平原和滩涂，各占14%和7.7%。耕地土壤类型有6个土类、11个亚类、21个土属、42个土种，多分布在海拔50米左右的低丘、台地和平原，坡度多在25度以下，红壤和水稻土占了耕地总面积的78%以上，土壤肥力中下等，中低产田占总面积的比重较大，约占总耕地面积的60%以上。厦门市土地总面积1569.3平方公里，其中以低丘、台地类型为主，占土地总面积的62.5%，其次是平原和滩涂，各占14%和7.7%。耕地土壤类型有6个土类、11个亚类、21个土属、42个土种，多分布在海拔50米左右的低丘、台地和平原，坡度多在25度以下，红壤和水稻土占了耕地总面积的78%以上，土壤肥力中下等，中低产田占总面积的比重较大，约占总耕地面积的60%以上。厦门市土地总面积1569.3平方公里，其中以低丘、台地类型为主，占土地总面积的62.5%，其次是平原和滩涂，各占14%和7.7%。耕地土壤类型有6个土类、11个亚类、21个土属、42个土种，多分布在海拔50米左右的低丘、台地和平原，坡度多在25度以下，红壤和水稻土占了耕地总面积的78%以上，土壤肥力中下等，中低产田占总面积的比重较大，约占总耕地面积的60%以上。
</div>
</section>
<section class="other-section">
其他内容
</section>
</body>
</html>
效果图
