CSS 元素显示模式

最新推荐文章于 2024-02-18 22:40:15 发布

少年张狂

最新推荐文章于 2024-02-18 22:40:15 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/weixin_41909678/article/details/118071262

版权

了解元素的显示模式，可以更好地布局页面，让网页显示更简单，更清晰

什么是元素的显示模式
元素显示模式的分类
元素显示模式的转换

元素的显示模式

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以使我们更好地布局网页

元素显示模式就是元素（标签）以什么方式进行显示，比如 div 独占一行，比如 span 一行可以放多个

HTML 元素一般分为块元素和行内元素两种类型

块级元素

常见的块元素有

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:在水平和垂直方向插入空间(空元素)

其中标签 div 是最典型的块元素

块级元素的特点：

比较霸道，单独占一行
高度，宽度，外边距以及内边距都可以控制
宽度默认是浏览器一行宽度（父级宽度），也可以自己设置，与内容无关
是一个容器或盒子，里面可以放行内或者块级元素

div {
    /* width height background-color 设置的是标签 div 的属性，而不是文本内容的属性 */
    /* 文本内容的属性设置需要经过 font 等属性设置*/
    width: 300px;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    background-color: navy;
}

<div>海上生明月，天涯共此时</div>
<div>海上生明月，天涯共此时</div>
<div>海上生明月，天涯共此时</div>

注意

文字类的元素内不能使用块级元素
标签 p 主要用于存放文字，因此 p 标签里面不能存放块级元素，特别是不能放 div
同理 h1~h6 等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有

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:计算机代码样本

其中标签 span 是最典型的行内元素

行内元素也称为内联元素

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
标签样式只与文本内容有关
行内元素设置width无效，height无效（ line-height 有效），margin上下无效，padding上下无效
行内元素只能容纳文本或其他行内元素

a {
    /* width height 设置均无效 */
    width: 2000px;
    height: 500px;
    /* line-height 设置有效 */
    line-height: 1000px;
    background-color: red;
}

注意

链接里面不能再放链接
特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级元素更安全

行内块元素

在行内元素中有几个特殊的标签：

<button>    按钮
<input>    一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮
<img>    标签创建的是被引用图像的占位空间
<select>    select 元素是一种表单控件，可用于在表单中接受用户输入
<textarea>    标签定义多行的文本输入控件,文本区中可容纳无限数量的文本

上述标签同时具有行内元素和块级元素的特点，因此可以称之为行内块元素

input {
    width: 500px;
    font-size: 20px;
    height: 100px;
    line-height: 50px;
    background-color: navy;
}
/* 各种设置均无效 */
td {
    width: 500px;
    font-size: 200px;
    height: 100px;
    line-height: 500px;
    background-color: navy;
}

<!--input标签选择器设置的width,height等属性是设置input这个盒子的样式，并不是设置文本内容的样式-->
<!--input标签默认的宽度 width 为250px,默认高度 height 为文本内容高度-->
<!--width height设置的样式与文本内容无关-->
<input type="text" value="海上升明月,天涯共此时"/>
<input type="text" value="海上升明月,天涯共此时"/>
<input type="text" value="海上升明月,天涯共此时"/>
<!--对 td 标签设置的width height等属性均无效-->
<tr>
    <td>海上升明月,天涯共此时</td>
    <td>海上升明月,天涯共此时</td>
    <td>海上升明月,天涯共此时</td>
</tr>

行内块元素的特点：

和相邻行内元素（行内块）在一行，但是它们之间会有空白缝隙。一行可以显示多个（行内元素的特点）
一行显示的内容与浏览器宽度有关，当多个行内块的宽度小于浏览器窗口的宽度时，这些行内块均显示在一行；当多个行内块宽度超过浏览器窗口宽度时，超过浏览器宽度的那些行内块自动换行（块级元素特点）
td 标签设置的各种属性均无效，只与文本内容有关，填满浏览器一行则自动换行。设置宽度、高度、行高，背景颜色等等均无效（行内元素特点）
input 默认宽度为250px，与文字内容无关。设置宽度、高度有效（块级元素特点）
高度、行高、外边距以及内边距都可以控制（块级元素的特点）

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度、高度	容器宽度，即浏览器窗口宽度	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度，需要进行模式转换	等于行内元素内的文本内容的宽度	容纳文本或着其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度、高度	等于行内块元素内的文本内容的宽度

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一种模式的元素需要另外一种模式的特性

比如想要增加链接 a 的触发范围，即增加标签 a 的宽度和高度，需要将行内元素转换为块级元素

行内元素转换为块元素：display:block;

display：显示
block：块级

块级元素转换为行内元素：display: inline;（使用较少）

inline：行内

转换为行内块：display: inline-block;

inline-block：行内块

a {
    width: 150px;
    height: 50px;
    background-color: indigo;
    /* 把行内元素 a 转换为 块级元素 */
    display: block;
    /* 如此 a 标签就具有了块级元素的特点 */
}
div {
    width: 300px;
    height: 30px;
    background-color: blueviolet;
    /* 把 div 块级元素转换为行内元素 */
    display: inline;
}
span {
    width: 100px;
    height: 30px;
    background-color: azure;
    /* 把 span 行内元素转换为行内块元素 */
    display: inline-block;
}

<body>
    <!-- a 标签的内容样式将改为两行 -->
    <a href="#">行内元素转换为块级元素</a>
    <a href="#">行内元素转换为块级元素</a>
    <!-- div 标签的内容样式将改为一行 -->
    <div>块级元素转换为行内元素</div>
    <div>块级元素转换为行内元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>