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="margin-bottom: 0;">这是标题</h1>
    </div>

    <div style="background-color: #aaaaaa;width: 500px;height: 200px;white-space: nowrap;border-width:5;">
  <!--       <div id="menu" style="background-color: #FFD700;height: 200px;width: 100px;float: left;display: inline/block/none;"> -->
        <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: 400px;display: inline-block;float: left;">
            <b>这是详细内容</b><br>
            display:none;不显示内容；<br/>
            display:block;可以将其作为块状元素类型显示，自动换行；<br>
            display:inline;将其作为内联元素类型显示，即除了本身的内容以外，不占任何空间；<br>
            display：inline-block;将其作为块状元素显示，但是不用换行；<br>
            <b>注</b>：<br>
                1. 不可以将float与display作用于同一标签，如\<div style="float:left;display: inline-block;">否则会优先按照float显示，而display无效，自动进入下一行,按照float将div块左侧贴边显示；<br>
                2. 在style属性中设置white-space为nowrap（不换行，默认为wrap），可以使内容按照文本原本格式显示，而无视div宽度不够，需要自动显示换行的要求。
        </div>
    </div>
    <div id="footer"style="background-color:#FFA500;clear:both;text-align:center;">版权 © Mr.zhang</div>
</div>

position属性常用值

position的取值	描述	实例
inhert	规定应该从父元素继承position属性的值
static	默认值，没有定位，元素出现在正常的流中，忽略 top, bottom, left, right 或者 z-index 声明。
relative	生成相对定位的元素，相对于元素本身正常位置进行定位。需要与位置取值做配合"left:20px"是在元素左边位置插入20px。
absolute	生成绝对定位的元素，
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过"left""right""top""bottom"属性进行规定。

relative实例

<div id="container_father" style="width: 400px;height: 200px;background-color: #EEEEEE">
    <div id="content_back" style="width: 100px;height: 100px;background-color: yellow;float: left;">back</div>
    <div id="content_front" style="width: 100px;height: 100px;background-color: red;position: relative;top: 10px;left: 10px;display: inline-block;">front</div>
    <div id="content_bottom" style="width: 100px;height: 100px;background-color: green;display: inline-block;">bottom</div>
</div>

呈现效果：

absolute实例
position:absolute;生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素(container_father)进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性规定在祖先元素中的位置。

<div id="container_father"  style="border: solid 1px #0e0; width:200px; position:relative;">
        <div id="content_back" style="height: 100px; width: 100px; background-color: Red;"></div>
        <div id="content_front" style="height: 100px; width: 100px; background-color: Green; position:absolute; top:20px; left:20px;"></div>
        <div id="content_bottom" style="height: 100px; width: 100px; background-color: Yellow;"></div>
</div>

fixed实例
生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过"left"“right”“top”"bottom"属性进行规定。一点用fixed属性设置position值，那么无论你怎么缩小放大这个网页，你的父模块在浏览器中的会随着浏览器的拖拽会被滚轮滚消失，但是，被fixed规定的元素的位置相对于网页打开可见的位置却不会有任何改变。无论滚轮怎么动，页面怎么拉伸绿色div元素始终在网页的左下角

<div style="border: solid 5px #0e0; width:200px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; position:fixed; bottom:20px; left:20px;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
</div>

float属性特点

• 设了float:left的元素它的左边还是不允许存在任何元素与之同行显示，不论是内联元素还是块元素。
• 如果两个同级元素都设置为float:left，他们是不可能同行显示的，只能垂直显示。
• display:inline;会忽视掉你的模块大小设置，慎用。
• 在一个父模块中，可以在一个块元素中设置float:left，另一个块元素中不设置float，只添加display:inline-block，这样就可以使两个块元素以横向出现。