浙江省建设工程质量协会网站企业网站建设训

一.什么是元素显示模式

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

 元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个

<span>。

html元素可以分为块元素和行内元素。

二.块元素

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

特点

1. 自己独占一行
2. 高度、宽度、外边距以及内边距都可以控制。
3. 宽度默认是容器(父级宽度)的百分百。
4. 是一个容器以及盒子，里面可以放行内或者块级元素。

2.1独占一行

2.2设置高度宽度 

 2.3宽度默认

当你没有设置宽度时，宽度默认与父级容器这里就是body一样大，所以占满整个屏幕。

2.4可以放行内元素也可以是块元素 

块元素是一个大的盒子，里面可以装其他元素

注意 

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

例子

 

看着没啥问题，但是打开检查一看就出现了问题

 三.行内元素

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

3.1相邻行内元素在一行

3.2高宽直接无效

3.3默认宽度就是它本身内容的宽度 

 

 3.4行内元素只能容纳文本或其他行内元素

注意

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

四.行内块元素

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

1.和相邻元素在一行但有空隙(行内元素特点) 

 2.默认宽度就是它本身内容的宽度(行内元素特点)

3.高度，行高，外边距以及内边距可控制(块级元素特点)

五.元素显示模式的转换

5.1转换为块元素

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

比如想要增加链接<a>的触发范围。

• 转换为块元素：display:block；

由于我们知道a链接是行内元素，但有时候想要增加用户的点击范围就需要block。

他便具有了块级元素的特点。 

此时便可以给他设置宽高

 

5.2转换为行内元素

display: inline

例子

转换