行内元素和块级元素
行内元素和块级元素区别
- 块级元素会独占一行,其宽度自动填满其父元素宽度
行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化 - 一般情况下,块级元素可以设置 width, height属性,行内元素设置width, height无效(注意:块级元素即使设置了宽度,仍然是独占一行的)
- 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
块级元素
- 总是从新行开始
- 高度、行高、外边距以及内边距可以控制
- 宽度默认为容器的100%
- 可以容纳内联元素和其他块元素
- 常见的有: 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 - 客户端脚本
行内元素(内联元素)
- 不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构
- 一般不可以设置宽度、高度、对齐等属性
- 常用来控制页面中文本样式
- 常见的有: 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