行内元素和块级元素

元素分类

块级元素(block)

常用元素：div / p / ul / li / ol / form / address / h(h1-h6)

特点：元素独自占据一整行，可以给元素设置宽和高

具体设置如下：

<div class="red"></div>
<div class="blue"></div>

<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
    }
    .blue {
        background: blue;
    }
</style>

在浏览器中展示如下：

可以看到，第一个div的宽度只有100px, 但是他占据了浏览器的一整行。使得第二个div换行展示

行内元素(inline)

常用元素：span / a / em / del / strong

特点：根据自身内容占据空间大小，不能给元素设置宽和高

具体设置如下：

<span>1</span>
<span>2</span>

在浏览器中展示如下：

可以看到，span根据自身的内容占据了相应的大小，后面的span紧挨着进行展示

行级元素虽然不可以设置宽高，但可以给他设置字体大小(font-size)，字体颜色(color)，字体样式(font-family)等和字体相关的属性

行级块元素(inline-block)

也叫内联元素，常用元素：img / input

特点：根据自身内容占据大小，又可以给元素设置宽和高

具体设置如下：

<input type = "text">
<input type = "text">

<style>
    input {
        width: 200px;
        height: 30px;
        margin-right: 30px;
    }
</style>

在浏览器中展示如下：

行级块元素input设置了宽和高，第一个input占据的宽度仅为设置的宽度，第二个input紧挨着第一个进行展示

行级块元素通常会被分类在行内元素里面

相互转换关系

块级元素默认display: block

行内元素默认display: inline

行级块元素默认display: inline-block

当给块级元素设置display: inline或设置display: inline-block时，块级元素可以转换为行内元素或者行级块元素，并具有行级元素或行级块元素独有的特性。以此类推。

注意点

margin和padding为复合属性，默认顺序为(上 右 下 左)。

块级元素的margin值包括(margin-top, margin-right, margin-bottom, margin-left)，padding值包括(padding-top, padding-right, padding-bottom, padding-left)

但行内元素只有margin-left, margin-right, padding-left, padding-right值

根据默认margin和padding分类

只有默认margin值：body / p / form h(h1-h6)

只有默认padding值：input / img / textarea / button

有默认padding和margin：ol / ul

没有默认padding和margin：div / span

body默认有8px的margin值

只有清除默认的padding和margin值我们设置的css样式才不会有偏差，样式才能布满整个页面

常用的处理方式：
一般在css全局里面定义以下代码：

* {
    padding: 0;
    margin: 0;
}

也可以在总样式文件里面定义如下内容：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, img {padding: 0; margin: 0;}

即选出css中可能用到的具有margin和padding的标签，将其初始化