display属性常用的四个值：block、inline、inline-block、none

深藏阁楼爱情的钟 2023-06-28 04:58 2阅读 0赞

**目录**

1、block 块级元素

1.1、块级元素特点

1.2、常用的块状元素有

2、inline 内联（行级）元素

2.1、块级元素特点

2.2、常用的内联元素有

3、display:none

4、总结

--------------------

# 1、block 块级元素 #

## 1.1、块级元素特点 ##

a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度。

b. block元素可以设置width,height属性。块级元素即使设置了宽度，仍然是独占一行。

c. block元素可以设置margin和padding属性。

## 1.2、常用的块状元素有 ##

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> （块引用）、<form>

# 2、inline 内联（行级）元素 #

## 2.1、块级元素特点 ##

a. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容

而变化。

b. inline元素设置width,height属性无效。

c. inline元素纵向的margin和padding不能设置值。

## 2.2、常用的内联元素有 ##

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>（表示计算机源代码或者其他机器可以

阅读的文本内容）

常用的内联块状元素有：

<img>、<input>

图片是内联元素，同时是替换元素，替换元素是可以设置宽高的

# 3、display:none #

将元素的显示设为无，即在网页中不占任何的位置。

3.1、display:none和visible:hidden都能把网页上某个元素隐藏起来。

3.2、display:none与visibility: hidden的区分

display:none ---不为被隐藏的元素保留其物理空间，即该元素在页面上彻底消失，通俗来说就是看不见也摸不到。即将元素的显

示设为无，即在网页中不占任何的位置。

visibility: hidden--- 使元素在网页上不可见，但该元素在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。即将元素隐

藏，但是在网页中该占的位置还是占着。

# 4、总结 #

4.1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而

span元素的默认display属性值为“inline”，称为“行内”元素。

4.2、块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；

行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都

是无效的。  
      
4.3、例如：<a> 标签元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。又比如

div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS_display属性

display设置行标签和块标签所谓行标签和块标签只是display属性的默认值不同而已 1、将块级元素修改为行内元素 display:inline;

小咪咪/ 2023年10月06日 17:41/ 0 赞/ 55 阅读

相关 display属性常用的四个值：block、inline、inline-block、none

目录 1、block 块级元素 1.1、块级元素特点 1.2、常用的块状元素有 2、inline 内联（行级）元素 2.1、块级元素特点 2.2、常用的内联元素有

深藏阁楼爱情的钟/ 2023年06月28日 04:58/ 0 赞/ 3 阅读

相关 CSS display 属性

定义和用法 display 属性规定元素应该生成的框的类型。说明这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 disp

电玩女神/ 2023年06月07日 08:30/ 0 赞/ 40 阅读

相关 display属性详解

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

忘是亡心i/ 2022年12月24日 05:00/ 0 赞/ 176 阅读

相关 CSS display 属性

<table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <tr> <td>n

迈不过友情╰/ 2022年09月21日 05:44/ 0 赞/ 252 阅读

相关 display属性

display属性值值描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为

深藏阁楼爱情的钟/ 2022年06月06日 08:26/ 0 赞/ 280 阅读

相关 display属性常用的三种值：block、inline-block、inline

1.block 块级元素特点： a.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度 b.block元

分手后的思念是犯贱/ 2022年06月03日 08:55/ 0 赞/ 92 阅读

相关 display：box 属性

一、作用在元素上设置该属性，可使其子代排列在同一水平上，类似 display:inlineblock;。目前 box-flex 属性还没有得到 firefox、

秒速五厘米/ 2022年05月19日 07:04/ 0 赞/ 322 阅读

相关 display属性值及作用

![70][] [70]: /images/20220512/1170db8b769f4e82882839d3e12fc53d.png

逃离我推掉我的手/ 2022年05月12日 13:06/ 0 赞/ 272 阅读

相关 CSS 属性：Display属性

一、display属性介绍 display 属性规定元素应该生成的框的类型。以下是一些关于display比较常用的属性值： ![在这里插入图片描述][waterma

本是古典何须时尚/ 2022年03月16日 03:06/ 0 赞/ 607 阅读