Front-end Related

CSS3 属性——display

2017-10-21  本文已影响0人  虚玩玩TT

最常用的有 block,inline,inline-block,flex,none,除此之外还有很多属性,这里一一介绍。

总览

/* CSS 1 */
display: none
display: inline
display: block
display: list-item

/* CSS 2.1 */
display: inline-block;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;

/* CSS 3 */
display: inline-list-item
display: flex
display: box
display: inline-flex
display: grid
display: inline-grid
display: ruby
display: ruby-base
display: ruby-text
display: ruby-base-container
display: ruby-text-container

/* 关键字 */
display: inherit  // 继承
display: initial  // 默认
display: unset  // inherit 和 initial 的组合,如果有继承就继承,没有就默认

介绍

display: list-item

字面意思:列表元素;效果可以看成让一个元素变成<li>并进行渲染,同时可以使用list-style属性进行样式设置

list-item.png

display: table | table-row | table-cell

效果可以看成让元素变成<table>、<tr>、<td>并进行渲染,并且可以使用表格的一些特性进行布局和一些操作

同样的,

table.png

display: flex

flex 布局,生成一个弹性盒子,具体介绍我单独写了一篇博客,这是链接

display: box | flexbox | inline-flexbox

这几种和 display: flex 为类似的属性,是定制 CSS 各个阶段中的不同草案,以最终的 display: flex 为确定通用方案,具体可以参考W3C标准中对弹性盒子的一些介绍,包括历史版本和用法介绍,这是链接。

display: ruby

有些语言会对文字进行注释,如中文的在汉字上面注音,使用 ruby 属性可以方便对注释的格式控制,具体介绍我单独写了一篇博客,这是链接(未完成)

display: grid

grid 布局,

上一篇 下一篇

猜你喜欢

热点阅读