)table-caption | 将元素设置为表格的标题(类似 ) |
table-cell | 将元素设置为表格的单元格(类似和) |
|
|
table-row | 将元素设置为表格的行(类似) table-row-group | 将元素设置为表格的内容部分(类似 )table-column | 将元素设置为表格的列(类似 ) | table-column-group | 将元素设置为表格中一个或多个列的分组(类似 ) | table-header-group | 将元素设置为表格的头部(类似)table-footer-group | 将元素设置为表格的脚(类似)box | CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最老版本) | inline-box | CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最老版本) | flexbox | CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的过渡版本) | inline-flexbox | CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的过渡版本) | flex | CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最新版本) | inline-flex | CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最新版本) | run-in | 根据上下文来决定将元素设置为块级元素或内联元素 | inherit | 从父元素继承 display 属性的值 | | | |
|
伸缩盒子(弹性盒子)是 CSS3 中一种新的布局模式,引入伸缩盒子的目的是提供一种更加有效的方式来对页面中的元素进行排列、对齐和分配空间,当页面需要适应不同的屏幕大小以及设备类型时这种布局方式能够确保元素拥有恰当尺寸和位置。
下面通过几个常用的属性值来介绍以下 display 属性的使用:
display: none
display 的属性值 none 可以用来隐藏元素,和visibility: hidden;
功能相似,不同的是display: none;
在隐藏元素的同时,它还会将元素所占的位置一并隐藏。display: none;
通常会与 JavaScript 结合使用来隐藏或显示某个元素,下面通过一个示例来演示一下:
运行上面的代码,在页面中点击“显示”或“隐藏”按钮即可对页面中指定的元素执行显示或隐藏操作,如下图所示:
![css display属性怎么使用](/upload/otherpic55/10165.jpg)
display: block
display 属性的属性值 block 可以将元素强制转换为块级元素,示例代码如下:
这是一个链接
![css display属性怎么使用](/upload/otherpic55/10166.jpg)
display: inline
display 属性的属性值 inline 可以将元素强制转换为行内元素,让元素拥有行内元素的特性,例如可以与其他行内元素共享一行等,示例代码如下:
display: inline;
display: inline;
![css display属性怎么使用](/upload/otherpic55/10167.jpg)
display: inline-block
display 属性的属性值 inline-block 可以将元素强制转换为行内块元素,inline-block 既具有 block 能够设置宽高的特性又具有 inline 不独占一行的特性,示例代码如下:
display: inline-block;
display: inline-block;
![css display属性怎么使用](/upload/otherpic55/10168.jpg)
读到这里,这篇“css display属性怎么使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注创新互联行业资讯频道。
新闻标题:cssdisplay属性怎么使用
网站URL:http://ncjierui.cn/article/gjieod.html