元素分类

元素可以分为3类，块级元素，内联元素（行内元素），行内块元素。

块元素

常见的块级元素及块级元素的displaby 属性：

	元素	display	说明
1	html	block	html骨架
2	body	block	margin:8px(默认)
3	hr	block	换行
4	p	block	段落
5	div	block	div 盒子
6	h1-6	block	标题
7	ul	block	无序列表
8	ol	block	有序列表
9	li	list-item	列表项
10	dl	block	自定义列表
11	dt	block	自定义列表项
12	dd	block	自定义列表项
13	table	table	表格
14	tbody	table-row-group	可以不写，浏览器自动生成
15	caption	table-caption	表格标题
16	th	table-cell	表头
17	tr	table-row	表格行
18	td	table-cell	表格单元
19	form	block	form 表单

注意：table 里面的标签小毅也是不知道是哪类元素

块级元素简单的案例

<style>
    table {
        width: 500px;
        border: 1px solid red;
    }

    td {
        border: 1px solid blue;
    }
</style>

<body>
    <!-- 分割线 -->
    <hr>

    <!-- div 盒子 -->
    <div>
        这是一个div
    </div>

    <!-- 标题 -->
    <h1>常见的块级元素</h1>
    <h2>常见的块级元素</h2>
    <h3>常见的块级元素</h3>
    <h4>常见的块级元素</h4>
    <h5>常见的块级元素</h5>
    <h6>常见的块级元素</h6>

    <!-- 段落 -->
    <p>常见的块级元素</p>

    <!-- 无序列表 -->
    <ul>
        <li>常见的块级元素</li>
        <li>常见的块级元素</li>
        <li>常见的块级元素</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>水果</li>
        <li>蔬菜</li>
        <li>肉类</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>广东省</dt>
            <dd>广州</dd>
            <dd>佛山</dd>
            <dd>深圳</dd>
        <dt>广西省</dt>
            <dd>南宁市</dd>
            <dd>桂林市</dd>
            <dd>北海市</dd>
    </dl>

    <!-- 表格 -->
    <table>
        <caption>这是一个表格</caption>
        <th>name</th>
        <th>age</th>
        <th>city</th>
        <tr>
            <td>小毅</td>
            <td>20</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>小强</td>
            <td>18</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>19</td>
            <td>客村</td>
        </tr>
    </table>

    <!-- form 表单 -->
    <form action="#" method="get">
        用户名：<input type="text"><br>
        密码：<input type="password"><br>
        <input type="submit" value="登录">
    </form>
</body>

块级元素的特点：

块状元素独占一行，自上而下排列
块状元素可以作为一个容器包含其他的块状元素或内联元素
```
<div class="father">
    <div class="son"></div>
</div>
```
块状元素可以定义自己的宽度和高度，以及盒模型中的margin,padding,border

宽度缺省是它的容器的100%除非设定一个宽度，高度默认是 0px所以填入内容撑开或者设置高度,

//在html中放两个div 
<div  class= "a">填入内容撑开盒子</div>//宽度是100%，

<div class = "b"></div>  

// 在style中设置样式
<style>
   .a{
        background-color: blue;
    }
    .b{
      background-color:brown;
      height:200px;//高度
      width: 200px;// 宽度
      margin:10px; // 外边距
      padding: 10px; // 内边距
      border:2px solid black; // 边框的大小： 2px 样式： 实线 颜色： 黑色
    }
</style>

内联元素（行内元素）

常见的内联元素

	 <font>文本标签</font>
        <strong>加粗</strong> 
        <b>加粗</b>
        <em>倾斜</em>
        <i>倾斜</i>
        <del>删除线</del>
        <s>删除线</s>
        <ins>下划线</ins>
        <u>下划线</u>
        <br/>   换行标签
        <sub>下标文本</sub>
        <sup>上标文本</sup>
        <span>盒子</span>

内联元素的display属性：都是:inline
内联元素的特点
- 内联元素在一行逐个进行显示，不会自动换行，可以多个内联元素在同一行
- 设置宽高无效，不能直接设置内联元素的宽度和高度
- 内联元素设置左右填充和外间距是可以的
- 但是内联元素设置与高度相关的一些属性（如margin-top,margin-bottom,padding-top,padding-bottom,line-height），显示无效或显示不准确
- 对左右的margin 和padding 设置有效，但是对上下的margin和padding值设置无效

可变元素

常见的可以元素
```
img
input
```
. 可变元素的特点
- 不自动换行
- 能够识别宽高
- 排列方式为从左到右
- 即有了内联元素的特点（不会换行），也有块级元素的特点（可以设置宽高等）
可变元素的display:inline-block
- img ==> inline (虽然是inline，但是可以设置宽高，也可以多个img 在同一行显示)
- input == > inline-block （可以多个input 在同一行显示，也可以设置宽高）
可变元素即具有内联元素特点，也具有块状元素特点
注意：display:inline-block; float:left/right; position: absolute/fixed;可以将元素设置为内联块级元素

display的几个常见的属性

值

描述

none

将元素的显示隐藏，在网页中也不占位置

hidden

将元素隐藏，但是位置还是站着

block

此元素将显示为块级元素，此元素前后会带有换行符。

inline

此元素会被显示为内联元素，元素前后没有换行符。

inline-block

行内块元素。（CSS2.1 新增的值）

list-item

此元素会作为列表显示。

run-in

此元素会根据上下文作为块级元素或内联元素显示。

table

此元素会作为块级表格来显示（类似），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似），表格前后没有换行符。

table-row-group

此元素会作为一个或多个行的分组来显示类似

table-header-group

此元素会作为一个或多个行的分组来显示类似

table-footer-group

此元素会作为一个或多个行的分组来显示类似

table-row

此元素会作为一个表格行显示类似

table-column-group

此元素会作为一个或多个列的分组来显示类似

table-column

此元素会作为一个单元格列显示类似

table-cell

此元素会作为一个表格单元格显示类似 td th

table-caption

此元素会作为一个表格标题显示类似

inherit

规定应该从父元素继承 display 属性的值。