元素的显示模式
块元素的特点
- 每个块级元素都是独自占一行
- 元素的高度、宽度、行高和顶底边距都是可以设置的
- 里面可以放行内或者块级元素
常见的块元素
- 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>
- 效果如图所示