块级标签(行元素)和内联标签(行内元素)

时间 2020-08-10

标签标签元素内联繁體版

原文原文链接

块级标签

若是两个一样的标签写在一块儿，出如今不一样的行上面，这种就是块级标签css

常见的块级标签：

<h1-h6></h1-h6>，<p></p>，<div></div>html

（需特别注意）块级标签的特色：

占据整行，自带换行效果。除了div之外，通常块级标签都会有内外边距，宽度和高度。spa

块元素标签示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>标题1</h1>
    <h1>标题2</h1>
</body>
</html>

输出大概以下：
标题1
标题2

内联标签

若是两个一样的标签写在一块儿，出如今同一行上面，这种就是内联标签code

常见的内联标签：

<span></span>，<a></a>，<img/>htm

注意：在内联标签中，有一个标签，img标签，是有边距和宽度和高度的，叫行内块级标签。blog

（需特别注意）内联标签的特色：

不会占据多余面积。
没有内外边距，可是能够经过css来设置内边距，可是设置外边距只能设置左右外边距，不能设置上下边距，即便设置了也无效！
没有宽度和高度，css设置也无效！
注意img标签和块级标签同样，有边距和宽高！因此img标签又叫行内块级标签。

影响：图片

使用text-align对标签内容进行对齐方式的显示，若是是在行内元素和行内块级元素上面，可能看不出效果。
缘由是，行内元素没有宽高，行内元素的宽高所有来自于内容的长度和高度。
行内块级元素默认也是没有设置宽高，可是行内块级元素能够设置宽度和高度。一旦设置了宽高之后，只要有剩余空间就能够看到对齐方式的效果。get

内联元素标签示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.qq.com" target="_blank">腾讯</a>
</body>
</html>

输出大概以下：
百度 腾讯 （均为超连接）

在css中能够经过display 对标签的显示特性[显示模式]进行设置，值有4种：

1. block，以块状标签进行显示input

2. inline，之内联标签进行显示it

3. inline-block，以块状内联标签进行显示，相似图片这样的，一行能够有多个，同时具备宽高，内外边距。

4. none，以隐藏标签进行显示[隐藏起来的标签]，相似<input type="hidden" >