HTML 区块/布局

前言

  • HTML 可以通过 <div><span> 将元素组合起来。
标签 描述 备注 🔗
<div> </div> 定义了文档的区域,块级元素(block-level) 🔗
<span> </span> 用来组合文档中的行内元素,内联元素(inline) 🔗
<header> </header> 定义一个文档头部部分 H5 新加 🔗
<footer> </footer> 定义一个文档底部 H5 新加 🔗
<section> </section> 定义了文档的某个区域 H5 新加 🔗
<article> </article> 定义一个文章内容 H5 新加 🔗
<aside> </aside> 定义其所处内容之外的内容 H5 新加 🔗
<details> </details> 定义了用户可见的或者隐藏的需求的补充细节 H5 新加 🔗
<dialog> </dialog> 定义一个对话框或者窗口 H5 新加 🔗
<summary> </summary> 定义一个可见的标题。 当用户点击标题时会显示出详细信息 H5 新加 🔗
  • 大多数 HTML 元素被定义为块级元素或内联元素。

1、区块元素

  • 块级元素在浏览器显示时,通常会以新行来开始(和结束)。

  • 实例: <h1>, <p>, <ul>, <table>

1.1 < div > 元素

  • <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。

  • <div> 元素没有特定的含义,除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

  • 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

  • <div> 元素的另一个常见的用途是文档布局,它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法,<table> 元素的作用是显示表格化的数据。

2、内联元素

  • 内联元素在显示时通常不会以新行开始。

  • 实例: <b>, <td>, <a>, <img>

2.1 < span > 元素

  • <span> 元素是内联元素,可用作文本的容器

  • <span> 元素也没有特定的含义。

  • 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

3、网站布局

  • 大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。

  • 大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

  • 虽然我们可以使用 HTML table 标签来设计出漂亮的布局,但是 table 标签是不建议作为布局工具使用的 - 表格不是布局工具。

3.1 使用 < div > 布局

  • div 元素是用于分组 HTML 元素的块级元素。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div id="container" style="width:100%;">

    <!-- 标题 -->
    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;"> 主要的网页标题 </h1>
    </div>

    <!-- 菜单 -->
    <div id="menu" style="background-color:#FFD700; height:200px; width:100px; float:left;">
    <b>菜单</b> <br />
    HTML <br />
    CSS <br />
    JavaScript
    </div>

    <!-- 内容 -->
    <div id="content" style="background-color:#EEEEEE; height:200px; width:calc(100% - 100px); float:left;">
    内容在这里
    </div>

    <!-- 版权 -->
    <div id="footer" style="background-color:#FFA500; clear:both; text-align:center;">
    版权 © qianchia.com
    </div>

    </div>
  • 效果

3.2 使用 < table > 布局

  • 使用 table 标签是创建布局的一种简单的方式。

  • 即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <table width="100%" border="0" cellspacing="0">

    <!-- 标题 -->
    <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1 style="margin-top:0; margin-bottom:0;"> 主要的网页标题 </h1>
    </td>
    </tr>

    <tr>
    <!-- 菜单 -->
    <td style="background-color:#FFD700; width:100px; vertical-align:top;">
    <b>菜单</b> <br />
    HTML <br />
    CSS <br />
    JavaScript
    </td>

    <!-- 内容 -->
    <td style="background-color:#eeeeee; height:200px; width:calc(100% - 100px); vertical-align:top;">
    内容在这里
    </td>
    </tr>

    <!-- 版权 -->
    <tr>
    <td colspan="2" style="background-color:#FFA500; text-align:center;">
    版权 © qianchia.com
    </td>
    </tr>
    </table>
  • 效果

4、Chrome 消除 div 滚动条的宽度

  • 通过箭头键直接控制滚动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
    #divContainer {
    overflow: auto;
    height: 160px;
    width: 260px;
    background-color: red;
    }

    #divContainer::-webkit-scrollbar {
    border-width: 1px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <div id="divContainer">
    在这里滚动鼠标<br />
    -------------<br />
    头部<br />
    123<br />
    123<br />
    123<br />
    -------------<br />
    123<br />
    123<br />
    123<br />
    123<br />
    -------------<br />
    123<br />
    123<br />
    123<br />
    123<br />
    -------------<br />
    123<br />
    123<br />
    123<br />
    123<br />
    123<br />
    -------------<br />
    123<br />
    123<br />
    尾部<br />
    </div>
  • 效果


    在这里滚动鼠标

    ————-

    头部

    123

    123

    123

    ————-

    123

    123

    123

    123

    ————-

    123

    123

    123

    123

    ————-

    123

    123

    123

    123

    123

    ————-

    123

    123

    尾部

文章目录
  1. 1. 前言
  2. 2. 1、区块元素
    1. 2.1. 1.1 < div > 元素
  3. 3. 2、内联元素
    1. 3.1. 2.1 < span > 元素
  4. 4. 3、网站布局
    1. 4.1. 3.1 使用 < div > 布局
    2. 4.2. 3.2 使用 < table > 布局
  5. 5. 4、Chrome 消除 div 滚动条的宽度
隐藏目录