html[css盒子模型、块级标签、行内(内联)标签、行内块标签，自闭合标签]

关于css盒子模型

用一句话概括就是：
css盒子模型是一个拥有margin(外边距)、border(边框)、padding(内边距)、和content(内容)的盒子，用来封装周围的HTML元素。

可以通过box-sizing属性改变盒子模型的结构
box-sizing: content-box | padding-box | border-box(又称IE怪异盒模型)

1.标准的盒子模型 box-sizing:content-box(默认值)。
此时： width宽度 = content(内容宽度)
height高度 = content(内容高度)
2.IE怪异盒子模型 box-sizing:border-box。
此时： width宽度 = content(内容宽度) + padding(左右内边距) + border(左右边框)
height高度 = content(内容高度) + padding(左右内边距) + border(左右边框)

3.至于padding-box就不多说了，支持率不高(IE系列的貌似不支持，算法是一样的了)

关于块级、行内(内联)标签

每个元素盒子都有自己默认的属性设置，比如块级元素默认为display:block;而行内(内联)元素则是默认为：display:inline;因此我们可以通过css样式将块级行内(内联)元素进行自定义转换。但了解是必须的。
常用的有：
block（块）元素的特点：

1. 总是在新行上开始；
2. 高度、行高、内外边距都可控制；
3. 宽度默认100%

常见块标签（block element）

div - 常用块级容易，也是css layout的主要标签
form - 交互表单
h1 ~ h6 标题
hr - 水平分隔线
dl - 定义列表
dt - 定义列表下的子标签
dd - 定义列表下的子标签
ul - 非排序列表
ol - 排序列表
li - 序列表下的子标签
p - 段落
table - 表格
tr - 表格下的子标签
th - 表格下的子标签
address - 地址
blockquote - 块引用

inline元素的特点：

1. 和其他元素都在一行上,内联元素里面只能放内联元素；
2. 高内外边距都不可以设置；
3. 宽度等于内容的宽度

常见内联标签（inline element）

a - 锚点
b - 加粗
i - 斜体
u - 下划线
em - 强调
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
code - 代码
img - 图片
input - 输入框
td - 表格下的子标签

行内块标签

既是内联元素但是却可以设置宽高：css样式：display:inline-block;
img - 图片
input - 输入框
td - 表格下的子标签

自闭合标签

input - 输入框
meta - 提供有关页面的元信息
link - 定义文档与外部资源之间的关系,通常用来连接样式表
br - 用来换行
hr - 定义一个水平线
img - 定义 HTML 页面中的图像

区别

1.块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。
2. 块级元素可以设置weith和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。
3. 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果。