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

前端相关 专栏收录该内容
50 篇文章 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;强制将它改成块元素。

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值