HTML标签显示

最新推荐文章于 2023-05-12 10:48:39 发布

Sushi_Law

最新推荐文章于 2023-05-12 10:48:39 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/Sushi_Law/article/details/101043529

版权

签显示模式

我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的行内元素：<span>,<strong>,<em>,<del>,<s> ,<a>,<u>

行内元素的特点：

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：

只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
链接里面不能再放链接。

块级元素和行内元素的区别

块级元素的特点

总是从新行开始
高度，行高、外边距以及内边距都可以控制。
宽度默认是容器的100%
可以容纳内联元素和其他块元素。

行内元素的特点

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。（a特殊）

行内块元素

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" style="width: 100px;height: 100px">
</body>
</html>

标签显示模式转化（display）

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

下面为将块级元素转化为行内元素

<body>
<div style="display: inline">kamenrider</div>
</body>

Sushi_Law

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签显示

签显示模式我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。标签的类型(显示模式)HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。块级元素(block-level)每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的行内元素：<span>,<strong...
复制链接

扫一扫