css布局方式_（14）把“可以动的盒子”更优雅地展示： 常用的“布局” | CSS

原创：itsOli  @前端一万小时

本文版权归作者所有，未经授权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

响应式布局原理？

?上方面试题“参考答案详解”，请点击文末“

---

前言：拿到一张设计稿，我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替，以前很多老的布局方式现在也慢慢淡化了，那哪些是我们最基本最常用的布局方式呢？

本篇给出答案，属于必掌握篇。

1 什么是布局

现有样式不能满足人们的需求：

• 文档流

• 浮动

• 定位

人们需要：

• 导航栏 + 内容

• 导航栏 + 内容 + 广告栏

• 从上到下、从左到右、定宽、自适应…

2 最常用的布局有哪些

2.1 单列布局

实现方式——定宽 + 水平居中。

2.1.1 非通栏

?源码及效果展示 https://jsbin.com/vupumisovo/1/edit?html,css,output

HTML

<div id="header"  class="layout">头部div>
<div id="content" class="layout">内容div>
<div id="footer" class="layout">尾部div>

CSS

.layout {width: 960px;/*
  ❗️实际网站中常常用的都是 width，而没有用 max-width。
  用 max-width 的好处就是，它不会因为用户屏幕的变小而出现左右滚动条。
  反之用 width 就会出现这种情况。
  但是，由于现在的网页都很复杂，信息很多。如果用 max-width，
  虽然它会按照用户的屏幕大小来显示网页，但很难让它去做合适的布局。
  那与其这样，我们开发者更愿意用 width，即使有个滚动条，但至少里边的内容不会乱。
   */ margin: 0 auto;
}#header {height: 60px;background: red;
}#content {height: 400px;background: blue;
}#footer {height: 50px;background: yellow;
}

2.1.2 通栏

?源码及效果展示 https://jsbin.com/yoxesisego/edit?html,css,output

HTML

<div id="header">
  <div class="layout">头部div>
div>
<div id="content" class="layout">内容div>
<div id="footer">
  <div class="layout">尾部div>
div>

CSS

.layout {width: 960px;margin: 0 auto;
}body {min-width: 960px;/*
  ❗️❗️❗️对比加这个 min-width 和不加的区别，拉动屏幕大小，
  我们可以看见给 body 设置 min-width 可以去掉滚动背景色 bug。
   */
}#header {height: 60px;background: red;
}#content {height: 400px;background: blue;
}#footer {height: 50px;background: yellow;
}

2.2 双列布局

一列固定宽度，另外一列自适应宽度。

实现方式——浮动元素 + 普通元素 margin。

2.2.1 侧边栏在左

?源码及效果展示 https://jsbin.com/neyubiwine/edit?html,css,output

HTML

<div id="content">
  <div class="aside">asidediv>
  <div class="main">contentdiv>
div>
<div id="footer">footerdiv>

CSS

#content:after {content: "";display: block;clear: both;
}.aside {float: left;width: 200px;height: 500px;background: yellow;
}.main {height: 400px;margin-left: 210px;background: red;
}#footer {background: #ccc;
}

2.2.2 侧边栏在右

时刻记着页面元素的渲染顺序！

?源码及效果展示 https://jsbin.com/pupofasuti/edit?html,css,output

HTML

<div id="content">
  <div class="aside">asidediv>
  <div class="main">contentdiv>
div>
<div id="footer">footerdiv>

CSS

#content:after {
  content: "";
  display: block;
  clear: both;
}
.aside {
  float: right;  
  width: 200px;
  height: 500px;
  background: yellow;
}    
.main {  
  height: 400px;  
  margin-right: 210px;        
  background: red;    
}    
#footer {      
  background: #ccc;    
}

2.3 三列布局

两侧两列固定宽度，中间列自适应宽度。

❗️注意顺序！

?源码及效果展示 https://jsbin.com/soxariyuju/edit?html,css,output

HTML

<div id="content">

  

  <div class="menu">asidediv>
  <div class="aside">asidediv>
  <div class="main">contentdiv>
div>
<div id="footer">footerdiv>

CSS

#content:after {content: "";display: block;clear: both;
}.menu {float: left;width: 100px;height: 500px;background: pink;
}.aside {float: right;width: 200px;height: 500px;background: yellow;
}.main {height: 400px;margin-left: 110px; /* 注意为什么要加 margin-left。 */margin-right: 210px;background: red;
}#footer {background: #ccc;
}

2.4 水平等距排列

主要关注“负 margin”的运用！

?源码及效果展示 https://jsbin.com/bekujamuyu/edit?html,css,output

HTML

<div class="ct">
  <ul>
    <li class="item">1li>
    <li class="item">2li>
    <li class="item">3li>
    <li class="item">4li>
    <li class="item">5li>
    <li class="item">6li>
    <li class="item">7li>
    <li class="item">8li>
  ul>
div>

CSS

ul,li {margin: 0;padding: 0;list-style: none;
}.ct {overflow:hidden;width: 640px;margin: 0 auto;border: 1px dashed orange;
}.ct .item {float:left;width:200px;height:200px;margin-left: 20px;margin-top: 20px;background: red;
}.ct>ul {margin-left: -20px;  
}

---

后记：对于“布局”，我们还有一些其他更新、更强大的方式——弹性布局 Flex、Grid 布局等等，我们随后再一一探讨，这篇先掌握基础！

前端知识日新月异，迭代很快，但最基本的知识是永远都不会变的。所以，夯实好基础，以不变应万变！

祝好，qdywxs ♥ you！

点击“