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与网格的布局将会成为布局的普遍方式

 

转载于:https://www.cnblogs.com/myCodeLearn/p/5904223.html