CSS学习笔记:display属性
[toc]
参考资料: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学习笔记05 display属性
- jQuery学习笔记:DOM操作(二)——属性、类、HTML、CSS
- CSS学习笔记04 CSS文字排版常用属性
- webpack4+学习笔记:9. CSS样式处理之清除多余样式及自动追加css属性前缀
- HTML&CSS基础学习笔记2-Html的全局属性
- CSS学习笔记-CSS属性(五)
- (2)css学习笔记---display-columns
- CSS学习笔记Padding 属性中参数的定义与使用
- 【前端学习笔记】CSS属性position以及各个属性值详解,及清除浮动的方法
- css学习笔记(字体属性)
- Vue 学习笔记 — css属性计算的问题
- CSS学习笔记——定位position属性的学习
- 前端学习笔记(4)之css背景属性合集
- 学习笔记之CSS padding margin border属性详解
- 前端学习笔记(5)之表格table的css属性补充
- HTML学习笔记8 css初见-文本属性
- HTML入门学习笔记--CSS属性(2)
- .Net学习笔记----2015-07-14(CSS当中的样式属性详解)
- (十二)学习CSS之display属性
- css学习笔记之display