CSS 一行一列
水平布局
这是一行一列的常见效果,主要用于页面的header
,中间
,底部
三个区域,这三个区域,常见的效果又分为两种。
- 第一种:
header
,content
,footer
宽度相同,有一个 max-width; - 第一种:
header
和footer
宽度占满浏览器,content
有一个 max-width;
常用的操作
下面的操作是常见的操作方法;
第一种:上中下宽度相同,有最大宽度
<style>
.content {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
</style>
<header>
<div class="content" style="background-color: red;">
Header
</div>
</header>
<main>
<div class="content" style="background-color: green;">
Main
</div>
</main>
<footer>
<div class="content" style="background-color: yellow;">
Footer
</div>
</footer>
第二种:上下宽度 100%,中间有最大宽度
<style>
.content {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
</style>
<header>
<div style="background-color: red;">
Header
</div>
</header>
<main>
<div class="content" style="background-color: green;">
Main
</div>
</main>
<footer>
<div style="background-color: yellow;">
Footer
</div>
</footer>
上面两种方法的 BUG
小伙伴如果跟着敲代码,亲自查看效果,会发现,上面的代码并不能让header
和 footer
宽度占满浏览器,这是因为浏览器会给页面默认的效果,比如margin
padding
,我们需要对代码进行改造一下,添加下面的代码。
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
实际工作中我们为了让页面在不同浏览器上都保持相同的效果,会引入专门的reset
相关代码,让不同的元素在浏览器上都默认显示的一样,这种效果类似做实验的归零
操作,是一种非常实用的多浏览器兼容处理。
flex 布局
可以自己练习下
网格布局
可以自己练习下
<div class="body">
<div class="header"></div>
<div class="section">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
垂直布局
垂直常见的布局,是顶部和底部定高,中间自适应(剩余的部分能够根据浏览器的大小自适应其高度)。
在现在浏览器中(包括 IE7+,Chrome,Firefox 等等),高度自适应可以利用绝对定位来解决。
当一个元素的定位属性是 absolute 时,它将摆脱默认的文档流,其大小默认是元素内容的大小,除非手动给其设置宽高。此时我们亦可通过设置其位置属性(top,right,bottom,left)来间接改变元素的宽高。
position 定位
整个父元素相对定位,导航高固定,内容区域绝对定位,通过定位属性实现高度自适应。
html,body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.body{
position: relative;
height: 100%;
}
.header{
height: 80px;
background-color: #ccc;
}
.section{
position: absolute;
top: 80px;
left: 0;
right: 0;
bottom: 80px;
background-color: #f8f8f9;
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: #ccc;
}
垂直两项
当然,这也可以两个元素操作
示例代码如下,
<div class="top">top</div>
<div class="main">main</div>
body,div {
margin: 0;
padding: 0;
}
.top {
background-color: #00d;
height: 100px;
}
.main {
background-color: pink;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
right: 0;
}
flex 弹性布局
利用 flex
flex-direction:column
属性,使元素自上往下排列,
flex:1 占据除规定元素外的所有位置
html,body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.body{
height: 100%;
background-color: #808695;
display: flex;
/*设置排列顺序*/
flex-direction: column;
}
.header{
height: 80px;
background-color: #ccc;
}
.section{
flex: 1;
background-color: #f8f8f9;
}
.footer{
height: 80px;
background-color: #dcdee2;
}
混合布局
最后来个前面的大综合。
<div class="head">head</div>
<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
body{
text-align: center;
font-size: 2em;
margin: 0;
padding: 0
}
.head,.main,.footer{
width: 80%; margin:0 auto;
}
.head{
background-color: #ccc; height: 100px
}
.footer{
background-color: #9cc; height: 100px
}
.main{
position: relative;
}
.left{
width: 20%;
height: 900px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.middle{
height: 900px;
background-color: #fcc;
margin: 0 20%;
overflow: hidden;
}
.right{
width: 20%;
height: 900px;
background-color: #eee;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}