元素的显示模式
块元素的特点
- 每个块级元素都是独自占一行
- 元素的高度、宽度、行高和顶底边距都是可以设置的
- 里面可以放行内或者块级元素
常见的块元素
- address：地址。
- blockquote：块引用。
- center：举中对齐块。
- dir：目录列表。
- div：常用块级容易，也是CSSlayout的主要标签。
- dl：定义列表。
- fieldset：form控制组。
- form：交互表单。
- h1–h6：一级到六级标题。
- hr：水平分隔线。
- menu：菜单列表。
- noframes：frames可选内容，（对于不支持frame的浏览器显示此区块内容）。
- noscript：可选脚本内容（对于不支持script的浏览器显示此内容）。
- ol：有序表单。
- p：段落。
- pre：格式化文本。
- table：表格。
- ul：无序列表。
address - 地址
常见的内联元素
- a：锚点
- b： 粗体
- big：大字体
- small：小字体
- br：换行
- cite：引用
- code：引用源码
- em：强调
- font：字体设定
- i：斜体
- strong：粗体
- img：图片
- span：常用内联容器
- strike：中划线
- sup：上标
- sub：下标
- textarea：多行文本输入框
- u：下划线
<div>标签是最典型的块元素，以下以此为例
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
input {
width: 240px;
height: 240px;
}
</style>
</head>
<body>
<!-- 块级元素 <p><h1>...标签存放文字，文字类标签内不能使用块级元素 -->
<div>独占一行</div>另一行
<!-- 行内元素 -->
<span>xtc</span><strong>小天才</strong>
<!-- 行内块元素 -->
<input type="text">
<input type="text">
</body>
</html>
- 效果如图所示
元素模式转换
- 显示模式的属性是display
- 可以改变标签的特点.
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块：display: inline-block;
- 完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
width: 200px;
height: 200px;
background-color: pink;
/* 把行内元素a转化为 块元素 */
display: block;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 把行内元素a转化为 块元素 */
display: inline;
}
span {
width: 200px;
height: 200px;
background-color: pink;
/* 把行内元素a转化为 块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">点击</a>
<a href="#">点击</a>
<div>ccc</div>
<div>ccc</div>
<span>行内元素转化为行内块元素</span>
<span>行内元素转化为行内块元素</span>
</body>
</html>
- 效果如图所示
本文含有隐藏内容，请 开通VIP 后查看