块元素和行内元素对比

32F  2018/09/14 html



一、行内元素

a 锚点
abbr 缩写
acronym首字
b 粗体(不推荐)
bdo 覆盖文本方向
big 大字体
br 换行
cite 引用
code 计算机代码(在引用源码的时候需要)
dfn 定义字段
em 强调
font 字体设定(不推荐)
i 斜体
img 图片
input 输入框
kbd 定义键盘文本
label 表格标签
q 短引用
s 中划线(不推荐)
samp 定义范例计算机代码
select 项目选择
small 小字体文本
span 常用内联容器,定义文本内区块
strike 中划线
strong 粗体强调
sub 下标
sup 上标
textarea 多行文本输入框
tt 电传文本
u 下划线

二、块级元素

address 地址
blockquote 块引用
center 举中对齐块
dir目录列表
div 常用块级容易,也是CSS layout的主要标签
dl 定义列表
fieldset form控制组
form 交互表单
h1 大标题
h2 副标题
h3 3级标题
h4 4级标题
h5 5级标题
h6 6级标题
hr 水平分隔线
isindex input prompt
menu 菜单列表
noframes frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript 可选脚本内容(对于不支持script的浏览器显示此内容)
ol 有序表单
p 段落
pre 格式化文本
table 表格
ul 无序列表

三、可变元素

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

applet java applet
button 按钮
del 删除文本
iframe inline frame
ins 插入的文本
map 图片区块(map)
object object对象
script 客户端脚本


四、行内元素的特点

  和其他元素都在同一行上
  高,行高及外边距和内边距不可改变
  宽度就是它的文字或图片的宽度,不可改变
  行内元素只能容纳文本或者其他行内元素
  设置行内元素,需要注意如下
设置宽度width 无效。
设置高度height 无效,但可以通过line-height来设置。
设置margin只有 左右有效,上下无效。
设置padding只有 左右有效,上下无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

五、块级元素的特点

  总是在新一行开始
  高度,行高以及外边距和内边距都可改变
  若宽度没有设置,则默认宽度为容器的100%,除非设定一个宽度
  块级元素可以容纳行内元素和其他块级元素

六、行内元素和块级元素对比

内容
  一般情况下,行内元素只能包含数据和其他行内元素。
  而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
格式
  默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
宽高
  行内元素不可以设置宽高
  块级元素可以设置宽高
内边距和外边距
  行内元素水平方向的 marginpadding可以生效。但竖直方向的marginpadding不能生效。
  块级元素可以设置marginpadding

七、行内元素和块级元素的转换

display
  行内元素 display:inline
  块级元素 display:block
  行内块元素 display:inline-block
  行内元素转换块级元素 display:block
  块级元素转换行内元素 display:inline
float
  若设置行内元素 float:left/right,则该行内元素转换为块级元素 ,且具有浮动特性。
position
  若为行内元素进行定位,position:absolute 或者 position:fixed 都会把行内元素转换为块级元素。

添加评论
全部回复
暂无回复