合理布局的必要性

有利于功能模块的划分,合理的布局使页面结构清晰明了,利于用户的使用
对不同的模块语义化有利于浏览器的SEO
合理的间隔与分割会使页面更美观

常见的布局

上方为导航栏将页面分为不同的功能区,左边的侧边栏为页面的目录,右侧可以展示广告以及进行补充说明

Vue.js 的官方文档就是这种典型的布局

上方为页头作为网页标题,其下方为导航栏,而后是可滚动的内容区,最后是显示网站信息的底部栏

学习强国的主页就是此类布局

语义化的作用

使页面结构清晰,功能明确,有利于后续开发与维护
有利于浏览器的识别,当用户使用朗读功能时,使用正确的标签能使其朗读出正确的段落
有利于浏览器的SEO,可以使网站在搜索引擎展示的列表排名靠前,增加访问量

如何进行语义化

每个html元素都有对应的功能与含义,如<p>标签表示段落,<h>标签表示标题.
具体的功能应当使用html实现,而不是使用无实际意义的<div>与CSS样式来表示
同样样式的实现应当交给CSS完成,不应该为了得到某个标签的默认样式而使用它,如为了加粗使用<h>标签,这样会使得页面逻辑混乱.

使用语义化的标签进行布局

通常我们使用<header>标签表示页头,<footer>标签表示页尾,<aside>标签表示侧边栏, 而主要的内容区则是用<article> 和 <section> 来表示,而<nav>表示导航

`<article>` 和 `<section>` 标签的区别

<article> 通常用于表示文章,帖子,评论等大篇幅文字,<section>页面中的某段文字或文章中的某段文字
<article>里可以有多个<section>
<section>强调分段和分块,想将一段内容分为几段的时候可以使用<section>
<article>比<section>更强调独立性,如果一段内容比较独立完整,使用<article>

使用flex布局轻松完成布局

flex 布局

容器：在flex弹性布局中,容器的概念就是包裹着要排序的子盒子的父亲。即外层盒子（父盒子）

未设置flex前，div盒子受块级元素影响纵向排列，设置完后，盒子横向排列；
未设置flex前，子盒子相加宽或高超过父盒子的时候会溢出，设置之后不会溢出，宽与高也只能在父盒子宽高足够的情况下进行增长，超过之后则总宽与总高以父盒子大小为准。
在flex容器中包含两个互相垂直的轴主轴和副轴。默认情况下为主轴对齐，主轴对齐会让元素横向排列。当为父盒子设置了特殊属性值之后，可以将子盒子从原来的主轴对齐变为副轴对齐，副轴对齐会让元素纵向排列，主轴的起始端为左边或者上边.

属性介绍

flex-direction 对齐方式
- row
  
  row值是默认值，可以让子盒子成横向排列，左对齐横向顺序排列,使得主轴为水平
- column column值，可以让盒子成纵向排列，上对齐纵向顺序排列,使得主轴为垂直，会影响wrap和justify-content
- row-reverse:右对齐反序横向排列
- column-reverse:下对齐反序纵向排列
flex-wrap 是否换行
- nowrap nowrap是默认值，设置之后所有子盒子横向排列，当所有子盒子的宽度总和超过父盒子的宽度
或者高度总和超过父盒子的高度时自动为每个子盒子压缩对应值，使得所有子盒子均匀的在父盒子内排列
- wrap wrap值为换行，设置之后，子盒子如果宽度占满一行，则会开辟第二行，第二行会在盒子百分之五十处开辟，
如果超出到第三行，则会把父盒子分为三行进行排列，以此类推
- wrap-reverse wrap-reverse值为，从低端开始从左向右，如果宽度满了，则会向上均分空间
flex-flow : 写法就是direction和wrap的值都写在这里面，是上面两个的缩写，没有先后顺序。
justify-content:这个属性的作用是设置子容器沿着(主轴)排列元素之间的空间分布。子容器沿着主轴排列。而主轴则会受到flex-direction的影响
- flex-start：该值为默认值，其作用为主轴起始端对齐，紧密排列：
- flex-end：其作用为主轴末尾端对齐，紧密排列，与reverse不同的是，它不会修改元素排列顺序，只会修改元素对齐方式：
- center： center会让元素居中紧密排列
- space-around：设置之后，每个子元素两侧的间隔都相等，子元素与子元素之间的间隔是子元素与边框间隔的一倍
- space-between：子元素首尾与父元素相贴，且子元素间的空隙均匀分布
- space-evenly：子元素首尾与父元素距离等于子元素之间的距离
align-items:align-items属性就是副轴对齐
- flex-start：起始端对齐
- flex-end: 末尾端对齐
- flex-center 居中对齐
align-content:这个属性只有flex-wrap为wrap(换行)时才有效。
- flex-start：该值为默认值，其作用为副轴起始端对齐，紧密排列：
- flex-end：其作用为副轴末尾端对齐，紧密排列，与reverse不同的是，它不会修改元素排列顺序，只会修改元素对齐方式：
- center： center会让元素居中紧密排列
- space-around：设置之后，每个子元素两侧的间隔都相等
- space-between：设置之后，子元素上下两侧紧贴父元素边框中间间隔相等
- stretch（默认值）：轴线占满整个交叉轴。

代码演示

HTML部分:

html 复制代码

<div class="container">
    <header class="header">这是头部栏</header>
    <nav class="nav">这是导航栏</nav>
    <div class="main">
      <aside class="sidebar">这是侧边栏</aside>
      <section class="content">这是内容区域</section>
    </div>
    <footer class="footer">这是底部栏</footer>
  </div>

CSS部分:

css 复制代码

    * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        .container {
          display: flex;
          flex-direction: column;
          height: 100vh;
        }
        .header {
          background-color: lightblue;
          height: 50px;
        }
        .nav {
          background-color: lightgreen;
          height: 40px;
        }
        .main {
          display: flex;
          flex-grow: 1;
        }
        .sidebar {
          background-color: lightpink;
          width: 200px;
        }
        .content {
          background-color: lightyellow;
          flex-grow: 1;
        }
        .footer {
          background-color: lightgray;
          height: 50px;
        }

效果展示

HTML页面布局与语义化