阅读 629

(14)把“可以动的盒子”更优雅地展示:③ 常用的“布局” | CSS

原创:itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

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

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

2020.09.10 更新:
以下链接为本文最新勘误篇章——《把“可以动的盒子”更优雅地展示:③ 常用的“布局”》


响应式布局原理?
复制代码

🙋上方面试题“参考答案详解”,请点击此处查看获取方式!



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

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


1 什么是布局

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

  • 文档流

  • 浮动

  • 定位

人们需要:

  • 导航栏 + 内容

  • 导航栏 + 内容 + 广告栏

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


2 最常用的布局有哪些

2.1 单列布局

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

2.1.1 非通栏

🔗源码及效果展示
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 通栏

🔗源码及效果展示
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 侧边栏在左

🔗源码及效果展示
HTML

<div id="content">
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
复制代码

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 侧边栏在右

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

🔗源码及效果展示
HTML

<div id="content">
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
复制代码

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 三列布局

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

❗️注意顺序!

🔗源码及效果展示
HTML

<div id="content">

  <!-- 注意为什么不是 main 在前面 -->

  <div class="menu">aside</div>
  <div class="aside">aside</div>
  <div class="main">content</div>
</div>
<div id="footer">footer</div>
复制代码

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”的运用!

🔗源码及效果展示
HTML

<div class="ct">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </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!