常见的块状元素与内联元素
块状元素
|
内联元素
|
---|---|
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 – 无序列表 |
a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) bdo – bidi override 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 – 下划线 var – 定义变量 |
内联元素不会跳出行,不设置宽高 竖直方向设置margin padding无意义 -
水平方向的margin padding可以设置
内联元素的作用是包裹文字用的,在行内发挥作用,不单独占一行,看成有弹性橡皮筋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline内联元素</title>
<style type="text/css">
#line1{
color: red;
}
</style>
</head>
<body>
<div>
床前明月光,疑是<span id="line1">地上霜</span><br/>
举头望明月,低头思故乡
</div>
</body>
</html>
效果图: