首页 > 代码库 > display学习记录

display学习记录

display:none;

将元素和其子元素从普通文档流中移除。这时文档的渲染就像从来没有存在过

一样,也就是说所占据的空间被折叠。元素的内容也会被屏幕阅读所忽略

display:inline;

该元素生成一个或多个行内框。就如名字般,行内元素所占据的空间就是他的标签

所定义的大小。可以被视为对块级元素的补充

display:block;

该元素生成块级框。除特殊声明外,所有的块级元素开始于新的一行,延展到其容器

的宽度

display:list-item;

元素被渲染为列表项呈现的方式确切的说就像一个块级元素,但是会生成一个

可以被list-style属性进行样式修改的标记框。只有<li>元素可以具有list-style

的默认值。通常将<li>重置为默认行为。

display:inline-block;

该元素生成一个块级别框,但是整个框的行为就像一个内联元素。

display:table

http://www.codeceo.com/article/css-display.html详细描述

我相信不久的将来基于flexbox与网格的布局将会成为布局的普遍方式

 

display学习记录