1.前言

在页面布局中，我们经常使用各种元素，有的元素会自己占一行，有的元素无法设置高度等等。在CSS中我们将元素主要分为三类：块元素，行元素，行内块元素。这三种元素对长宽等样式有不同的效果。

2.块元素 block

块元素顾名思义又叫块级元素，它可以有自己的高度，宽度，内外边距。同时它会自己独占一行。块元素经常用作容器来容纳其他的元素

2.1 块元素的特点

每个元素都是自己独占一行
高度（height），宽度（width），内边距（padding），外边距（margin）都是可以控制的
元素的宽度如果不设置的话，默认为继承父元素的宽度
多个块元素标签一起使用的话，默认排序方式为从上至下
它可以容纳其他内联元素和块元素

2.2 常见的块元素

<address> //定义地址
<caption> //定义表格标题
<dd> //定义列表中定义条目
<dl> //定义列表
<dt> //定义列表中的项目
<form> //创建html表单
<center> //居中对齐块
<dir> //目录路径
<hr> //水平分割线
<menu> //菜单列表
<ol> //有序列表
<ul> //无序列表
<table> //表格
<pre> //格式化文本

2.3 块元素效果

3. 行内元素 inline

行内元素又叫内联元素，只能容纳文本或其他行内元素。行内元素不可以设置宽和高，它的宽和高会随着内部的文本的的字体大小而变化。行内元素可以与其他的行内元素位于同一行，在行内元素内一般不包含块元素

3.1 行内元素的特点

不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行。其宽度会随元素的内容而变化
高度（height），快读（weight）无效，对内边距（padding），外边距（margin）仅设置左右方向有效，设置上下方向无效
设置行高有效，等同于给父级元素设置行高
元素的宽度就是它所包含的图片，文字的宽度，不可改变
行内元素中无法放置块元素，a标签中无法放置a标签

3.2 常见的行内元素

    <a> //标签可定义锚
    <abbr>// 表示文本缩写
    <acronym>// 取首字母缩写
    <b>// 文字加粗
    <bdo>// 可覆盖默认的文本方向
    <big>// 大号字体加
    <br>//换行 
    <cite>// 引用进行定义
    <code>// 定义计算机代码文本
    <dfn>// 定义一个定义项目
    <em>// 定义为一个强调内容
    <i>// 倾斜文本
    <kbd>// 定义键盘文本
    <label>// 标签为input元素定义标注
    <q>// 定义短的引用
    <samp>// 定义样本文本
    <small>// 呈现小号字体效果
    <span>// 组合文档中的行内元素
    <strong>// 加粗
    <sub>// 定义下标文本
    <sup>// 定义上标文本
    <tt>// 打字机或者等宽的文本效果
    <var>// 定义变量

3.3 行内元素样式

4. 行内块元素 inline-block

行内块元素，顾名思义，它既有行内元素的特点，又有块元素的特点。它可以随意的设置高度，宽度，也可以在一行内放置多个行内块元素

4.1 行内块元素的特点

高度（height），行高（line-heigeht），内边距（padding）和外边距（margin）是可以控制的
默认宽度（weight）是它本身内容的宽度，不会独占一行，但两个行内块元素之间会留有空隙，可以设置它的上一级的font-size为0，来消除缝隙

4.2 常见的行内块元素

<input> //输入框
<img> //图片
<select> //下拉列表
<textarea>// 多行的文本输入控件
<button> // 按钮

4.3 行内块元素的效果

未设置font-size

设置font-size后

5.元素转换

display: block :定义元素为块元素
display: inline : 定义元素为行元素
display: inline-block：定义元素为行内块元素

6.总结

对这三种元素来说，最大的区别就是，1.宽度高度内外边距的设置，2.排列方式
对块元素来说可以设置宽度，高度，内外边距；并且它自己独自占一行
对行内元素来说，无法设置宽度，高度。只能设置左右的内外边距，它的宽度随内部文本或图片的变化而变化，可以与其他行内元素共享一行
对于行内块元素来说，可以随意设置宽度，高度，内外边距，它的默认宽度为内部文本或图片的宽度。它可以与其他行内元素或行内块元素共享一行。

CSS块元素，行内元素，行内块元素的区别