行内元素和块级元素

行内元素和块级元素区别

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都不会产生边距效果。（水平方向有效，竖直方向无效）

块级元素

1. 总是从新行开始
2. 高度、行高、外边距以及内边距可以控制
3. 宽度默认为容器的100%
4. 可以容纳内联元素和其他块元素

• 常见的有： div、h1~h5、p、ul、ol、li
• 还有以下：
• table - 表格
• form - 交互表单
• hr - 水平分隔线

• address - 地址

• blockquote - 块引用
• center - 居中对齐块
• dir - 目录列表
• dl - 定义列表
• fieldset - form控制组
• isindex - input prompt
• menu - 菜单列表
• noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容
• noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）
• pre - 格式化文本

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

• applet - java applet

• button - 按钮

• del - 删除文本

• iframe - inline frame

• ins - 插入的文本

• map - 图片区块 (map)

• object - object对象

• script - 客户端脚本

行内元素(内联元素)

1. 不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构
2. 一般不可以设置宽度、高度、对齐等属性
3. 常用来控制页面中文本样式

• 常见的有： span、a、input、strong、b、i、br

• del - 中划线
• ins - 下划线
• u - 下划线
• em - 强调（斜体）
• s - 中划线 ( 不推荐 )
• strong - 粗体强调
• img - 图片
• textarea - 多行文本输入框
• select - 项目选择
• abbr - 缩写
• acronym - 首字
• bdo - bidi override
• big - 大字体
• cite - 引用
• code - 计算机代码 ( 在引用源码的时候需要 )
• dfn - 定义字段
• font - 字体设定 ( 不推荐 )
• kbd - 定义键盘文本
• label - 表格标签
• q - 短引用
• samp - 定义范例计算机代码
• small - 小字体文本
• strike - 中划线
• sub - 下标
• sup - 上标
• tt - 电传文本
• var - 定义变量

空元素 ( 没有内容的 HTML 元素被称为空元素 )

• br - 换行
• hr - 分隔线
• input - 文本框等
• img - 图片
• link
• meta