CSS 一行一列

🌙
手机阅读
本文目录结构
axihe

水平布局

这是一行一列的常见效果,主要用于页面的header,中间底部三个区域,这三个区域,常见的效果又分为两种。

  • 第一种:header, content, footer 宽度相同,有一个 max-width;
  • 第一种:headerfooter 宽度占满浏览器,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

小伙伴如果跟着敲代码,亲自查看效果,会发现,上面的代码并不能让headerfooter 宽度占满浏览器,这是因为浏览器会给页面默认的效果,比如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;
}

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang