html 块级元素和行内元素

为什么要理解块级元素和行内元素：

行内元素和块级元素的边距，宽高设置各又不同，

了解两者的特性，可以根据不同的业务场景，多行内元素和块级元素进行转换，

以满足不同的业务场景需要。

阅读要点：

1.了解块级元素和行内元素

　 2.掌握块级元素和行内元素的切换

html的由标组成，

大致可以分为块级元素和行内元素

块级元素（block element）：

div

h --标题

p --段落

table --表格

ul --非排序列表

行内元素（inline element）

span -- 常用内联容器，定义文本内区块

a -- 链接标签

i -- 斜体

img -- 图片

input -- 输入框

行内、块状元素区别：

(1).块级元素会独占一行，其宽度自动填满其父元素宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，

直到道一行排不下，才会换行，其宽度随元素的内容而变化

(2). 一般情况下，块级元素可以设置 width, height属性，行内元素设置width, height无效

(注意：块级元素即使设置了宽度，仍然是独占一行的)

(3).块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right

都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

（水平方向有效，竖直方向无效）

行内、块级元素的切换：

.行内元素切换成块级元素：

　　 display:inline-block

.块级元素切换成行内元素：

　　 display:inline

具体实现：

text.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }

        div{
            border: 1px solid red;
             100px;
            display: inline;         /* 块级元素切换成行内元素 */
        }

        span{
            border: 1px solid green;
            display: inline-block;   /* 行内元素切换成块级元素 */
             100px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        abc
    </div>
    <h1>
        标题
    </h1>
    <span>
        ggdfg
    </span>
    <span>
        fdgdfgdfg
    </span>

</body>
</html>