CSS元素显示模式

最新推荐文章于 2023-02-27 15:19:42 发布

原创最新推荐文章于 2023-02-27 15:19:42 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

本文探讨了HTML元素如何通过CSS样式从行内元素转为块级或行内块级，并举例说明了a, div, span元素的展示变化。深入理解行内元素到块元素的转变及其在网页布局中的应用。

div:文档节(html中最大的盒子)
section:文档节
nav:导航
header:页眉
article:文章
aside:文章侧栏
footer:页脚
details:元素的细节
summary:details元素可见的标题
dialog:对话框窗口
h1,h2,h3,h4,h5,h6:1-6级标题
p:段落
ul:无序列表
ol:有序列表
dir:目录列表
li:项目
dl:列表
dt:列表项目
dd:项目描述
menu:命令的菜单,列表
submenu：二级菜单
menuitem:菜单项目
command:命令按钮
form:表单
fieldset:围绕元素的边框(可用于表单内元素分组)
legend:在边框上的标题
select:选择列表(内联元素)
optgroup:组合选择列表选项
option:选择列表选项(也可做datalist选项)
datalist:下拉列表(id要与input中list属性值绑定)
table:表格
caption:表格标题
thead:组合表头内容(th)
tbody:组合主体内容(td)
tfoot:组合表注内容(td)
tr:表格行
th:表头单元格
td:表格单元
col:表格列属性;(空标签)
colgroup:表格格式化列组;
iframe:内联框架
figure:媒介内容分组
figcaption:figure标题
map:图像映射
area:图像区域
canvas:图形容器(脚本来绘制图形)
video:视频
source:媒介源
track:文本轨道
audio:声音内容
br:换行(空标签)
hr:水平分割线(空标签)
pre:格式文本
blockquote:块引用
address:文档联系信息
center:居中文本(不赞成使用)
spacer:在水平和垂直方向插入空间(空元素)

img:图片
span:内联容器
select:下拉列表
input:输入框
button:按钮
abbr:缩写
em:强调
strong:粗体强调
mark:突出显示的文本
b:粗体
i:斜体
bdi:文本方向
bdo:文字方向
big:大字体
small:小字体
sup:上标（a的n次方的写法）
sub:下标（可以用来写谁的化学式）
del:被删除的文本
strike:删除线
s:删除线
ins:被插入的文本
u:下划线
nobr:禁止换行
wbr:单词换行时机(空标签)
tt:打字机文本
kbd:键盘文本
time:日期/时间
cite:引用
q:短引用("")
font:字体设定(不常用)
acronym:缩写(html5不支持)
dfn:字段(不常用)
a:锚点
embed:内嵌(空标签)
label:input标记(点击文本触发控件)
keygen:生成秘钥(空标签)
textarea:多行文本输入框
output:输出结果
ruby:中文注音
rt:注音
rp:浏览器不支持ruby元素显示的内容
progress:进度条
meter:度量
var:定义变量
code:计算机代码文本
samp:计算机代码样本

<!DOCTYPE html>
<html>
<head>
	<title>元素模型转化</title>
	<style type="text/css">
		a {
			width: 200px;
			height: 100px;
			background: pink;
			display: block;/*这是行元素转化为块元素*/
		}
		div {
			width: 200px;
			height: 100px;
			background: skyblue;
			display:inline;/*这是快元素转化为行元素*/
		}
		span {
			width: 100px;
			height: 50px;
			background: red;
			display: inline-block;/*这是行元素转化为行内块元素*/
		}
	</style>
</head>
<body>
    <a href="#">这是行元素</a>
    <a href="#">这是行元素</a>
    <div>这是块元素</div>
    <div>这是块元素</div>
    <span>这是行元素</span><span>这是行元素</span>
</body>
</html>