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

  • 块级标签

如果两个同样的标签写在一起，出现在不同的行上面，这种就是块级标签

常见的块级标签：

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

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

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

块元素标签示例：

<!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

  • 内联标签

如果两个同样的标签写在一起，出现在同一行上面，这种就是内联标签

常见的内联标签：

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

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

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

  1. 不会占据多余面积。
  2. 没有内外边距，但是可以通过css来设置内边距，但是设置外边距只能设置左右外边距，不能设置上下边距，即使设置了也无效！
  3. 没有宽度和高度，css设置也无效！
  4. 注意img标签和块级标签一样，有边距和宽高！所以img标签又叫行内块级标签。

影响：

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

内联元素标签示例：

<!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，以块状标签进行显示

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

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

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

posted @ 2018-09-17 16:28  苦瓜爆炒牛肉  阅读(2430)  评论(0)  编辑  收藏  举报