抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

元素显示模式就是元素(标签)以什么方式进行显示。比如<div>自己占一行,比如一行可以放多个<span>HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。

特点:

  • 自己独占一行。
  • 高度,宽度、外边距以及内边距都可以控制。
  • 宽度默认是容器(父级宽度)的100%。
  • 是一个容器及盒子,里面可以放行内或者块级元素。

注意:

文字类的元素内不能使用块级元素

  • <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
  • <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点:

  • 相邻行内元素在一行上,一行可以显示多个。
  • 高、宽直接设置是无效的。
  • 默认宽度就是它本身内容的宽度。
  • 行内元素只能容纳文本或其他行内元素。

注意:

  • 链接里面不能再放链接
  • 特殊情况链接<a> 里面可以放块级元素,但是给<a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

特点:

  • 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
  • 默认宽度就是它本身内容的宽度(行内元素特点)。
  • 高度,行高、外边距以及内边距都可以控制(块级元素特点)

元素转换

1
2
3
display: block;    /*转换为块元素*/
display: inline; /*转换为行内元素*/
display: inline-block; /*转换为行内块*/

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="">手机 电话卡</a>
<a href="">电视</a>
<a href="">笔记本</a>
<a href="">穿戴</a>
<a href="">其他</a>
</html>

小米商城简易导航栏

评论