HTM 分布div

一、HTML div 和 span

大多数 HTML 元素被定义为块级元素或内联元素。
HTML区块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>,<div>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

1. HTML div 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div style="color: #0000FF;background-color: #ff0000">
    <h3>这是一个在 div 元素中的标题。</h3>
    <p>这是一个在 div 元素中的文本。</p>
</div>

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
注意：

• 使用 <table> 元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
• 默认情况下，浏览器通常会在
  元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。
• html5 中已经不再支持div的align的属性

2. HTML span 元素

HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<p>hello,<span style="color:blue;font-weight: bold">Mr.</span>张</p>

---

二、HTML 布局

布局一般分类为：div元素的网页布局和table元素的布局。
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
这里给出一个简单的布局实例：
用一个div包括全部内容：header、middle（menu、content）、footer。总共6个div。
header一般包括网页标题；middle一般包括标题的主要内容，内容比较多可以通过设置菜单；footer一般包括网页结尾，例如版权等信息。
注意 div的float、display：inline以及display：inline-block属性。

display属性常用值

display取值	描述
none	此元素不会被显示，相当于不存在，不会占任何空间
block	此元素将显示为块级元素，此元素前后会带有换行符，将导致呈一列显示，垂直纵向显示，与inline-block相反
inline	此元素会被显示为内联元素，元素前后没有换行符，将导致设置的width和height属性无效，横向显示，但div的大小会无效化。
inline-block	行内块元素，块状元素，横向显示，可以使两块被一个父div包裹的子div横向显示

<div id="container" style="width: 500px">
    <div id="header" style="background-color: #FFA500;">
        <h1 style="