参考资料:https://www.bilibili.com/video/BV18J411S7tZ?p=5

一、display属性概述

根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block" ,称为块元素,而span元素的默认display属性值为“inline”,称为行内元素

1. 块级元素和行内元素的区别

两种元素的最大区别在于块级元素是独占一行的,例如排列两个div,那么后面的div必然排列在第一个div的下面;而行内元素则是可以在同一行里排列多个。此外块级元素还可以设定对应的宽高值,而行内元素一般需要里面的内容来决定元素的具体大小。

2.常见的块级元素和行内元素

常见的块级元素和行内元素如下表所示:

元素类型 html元素
块元素 div、h1~h6、hr、ol、ul、li、p、table、tr
行内元素 a、span、br、img、input、label、select、textarea

参考资料:https://www.jianshu.com/p/800e6bb26590

3. display属性常见的属性值

各属性值和对应的效果如下所示:

属性值 效果
none 隐藏对象,相当于元素被移除,不占据物理空间
inline 指定对象为行内元素,无法设置宽高,且一行可以放置多个
block 指定对象为块级元素,可设置宽高,且独占一行
inline-block 指定对象为行内块元素,可设置宽高,且一行可以放置多个
table-cell 指定对象为表格单元格,一行可以放置多个,类似flex布局
flex 弹性盒

二、测试display取各属性值的效果

1. 测试inline和block

测试代码:

<div>块状元素</div>
<span>行内元素</span>
div, span {
height: 200px;
width: 200px;
}
div {
background-color: #df637a;
}
span {
background-color: #72d0f6;
}

当前效果:

可以看到,虽然两个元素都设置了高度和宽度,但只有块元素div拥有了对应的大小,而span的大小仅有内容决定。

此时我们可以翻转两者的属性,看下操作后的效果:

div {
...
display: inline;
}
span {
...
display: block;
}

可以看到,此时反而是span元素拥有了对应的宽高,而div元素反而变成了行内元素了。因此我们可以通过设置display属性来设置元素的类型。

2. inline-block属性值

此时修改div和span都为行内块,即:

div {
...
display: inline-block;
}
span {
...
display: inline-block;
}

效果:

此时可以发现两者都拥有了对应的宽高,并且可以在同一行中排列了,即行内块元素同时拥有了【设置宽高和同行排列】的特性。

3. table-cell属性值

修改代码为:

<div>块状元素</div>
<div>块状元素</div>
<div>块状元素</div>
<div>块状元素</div>
<div>块状元素</div>
<span>行内元素</span>
div, span {
height: 200px;
width: 200px;
}
div {
background-color: #df637a;
display: table-cell;
}
span {
background-color: #72d0f6;
}

效果如下:

可以发现此时五个div排列在了同一行,而且span元素需要排列在这5个div的下面,因此我们有时也可以通过修改块状元素的display属性为table-cell来实现元素的水平排列。

4. none属性值

代码如下:

<div>块状元素</div>
<span>行内元素</span>
div, span {
height: 200px;
width: 200px;
}
div {
background-color: #df637a;
display: none;
}
span {
background-color: #72d0f6;
}

效果:

可以看到div元素被隐藏了,此外它所应该占据的物理空间也没有了,这里可以对比visibility: hidden

div {
...
visibility: hidden;
}

可以看到,使用visibility: hidden也是隐藏元素,但可以理解为元素只是变得透明了,它还是在那里的,因而物理空间也仍然被元素占据着,因此span元素上有着div元素的空间。

CSS学习笔记:display属性的更多相关文章

  1. CSS学习笔记-背景属性

    一.背景尺寸属性:    1.含义:        背景尺寸属性是CSS3中新增的一个属性,专门用于设置背景图片大小 2.格式:        1.1具体像素:             backgro ...

  2. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  3. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  4. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  6. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  7. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  8. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  9. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  10. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

随机推荐

  1. express 路由匹配和数据获取

    express配置路由只需要通过app.method(url,func)来配置,其中url配置和其中的参数获取方法不同 直接写全路径 路由中允许存在. get请求传入的参数 router.get(&q ...

  2. win10蓝牙鼠标无法连接,需pin码

    从控制面板进到"设备和打印机",点击"添加设备" 鼠标切换到匹配模式,就可以看到自己的鼠标了,点"下一步" 出现了一样的画面,是的,不用输P ...

  3. python列表底层实现原理

    Python 列表的数据结构是怎么样的? 书上说的是:列表实现可以是数组和链表.顺序表是怎么回事?顺序表一般是数组. 列表是一个线性的集合,它允许用户在任何位置插入.删除.访问和替换元素.列表实现是基 ...

  4. P4240-毒瘤之神的考验【莫比乌斯反演,平衡规划】

    正题 题目链接:https://www.luogu.com.cn/problem/P4240 题目大意 \(Q\)组数据给出\(n,m\)求 \[\sum_{i=1}^n\sum_{j=1}^m\va ...

  5. 新入手服务器不会玩?抢占式实例服务器教程,从零搭建tomcat超简流程

    新入手服务器不会玩?抢占式实例服务器教程,从零搭建tomcat超简流程 相信很多新人入手Linux服务器后,一脸无奈,这黑框框究竟能干啥?忽觉巨亏血亏不是? 这里面门道可不是你想象中的那么点,简则服务 ...

  6. HCNP Routing&Switching之路由引入

    前文我们了解了路由控制技术策略路由相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15333139.html:今天我们来聊一聊路由引入技术相关话题: 路 ...

  7. .Net Core 实现 自定义Http的Range输出实现断点续传或者分段下载

    一.Http的Range请求头,结合相应头Accept-Ranges.Content-Range 可以实现如下功能: 1.断点续传.用于下载文件被中断后,继续下载. 2.大文件指定区块下载,如视频.音 ...

  8. MyBatis实现批量添加

    在进行后端的操作时,批量添加总是少不了,话不多说,下面贴上代码 Mybatis代码: <insert id="batchInsert" parameterType=" ...

  9. 11.4.1 LVS-DR

    Virtual Server via Direct Routing(VS-DR): 用直接路由技术实现虚拟服务器。当参与集群的计算机和作为控制管理的计算机在同一个网段时可以用此方法,控制管理的计算机接 ...

  10. [云计算]Windows Server 2012 R2 配置AD/DNS/DHCP服务

    目录 一.前期准备 1.1 安装Windows Server 2012 R2 1.2 关闭防火墙 1.3 改变计算机名 1.4 挂载并安装Tools 1.5 重启并配置网卡 1.6 添加角色和功能 1 ...