CSS:display显示的规则

2019独角兽企业重金招聘Python工程师标准>>>

CSS:display常规的选项：inline,inline-block,block,list-item,none。

下面我们共同探讨一下display各个选项的特点，本人也是初学者，不对的地方请指正谢谢：

1. inline：字面意思：同一行。个人观点：能够用最少的语句写出理想的结果那才是高手，所以需要知道哪些标签默认是display:inline，比较重要的，一般情况下修饰字体的元素都是默认inline的，如<span><em><strong>,当然还有很多。其中说明一点：firefox能够将表格显示为inline，而chrome不支持，还是独立的一块。空格有无有时候显示就相差就大，空格也是一个元素。

   在行内元素和静态行内框都是行内框的同义词：

   CSS：width、height、overflow对行内元素不起作用，因为它们总是会收缩以适应内容的宽度和高度，margin和line-height会以特殊方式为行内元素应用样式。行内元素会忽略margin-top、margin-bottom，转而使用line-height设置行高。border会以特殊方式为行内元素应用样式。左右边框可以改变行内元素在流中的位置。左边框将当前元素往右移，右边框使下一个元素往右移。上下边框位于内边距区域的上面和下面，不会扩大行高或改变行内元素的垂直位置。因为边框不影响行高，所以除非增加line-height，否则边框可能与相邻的行重叠。如果带边框的元素有一整行宽，那么浏览器就无法在行末显示右边框，也无法在行首显示左边框。左右边框只能显示在元素的开头和末尾。padding应用于行内元素的方式与边框相同。

2. inline-block：字面意思：同一行，是一块区域。  其实也非常简单，可能制作表格的时候会用到。很多时候用到border，我们能看清楚好多东西。

3. block：就是块状显示，见到比较多的就是<div><table><ol><li><article><section>等。

4. list-item:就是显示成列表的样子，但是必须要padding-left设置值，要不然会突出整体之外。

5. none:就是不显示，可以用javascript控制制作动画。

我们制作东西很多时候是怎么组合，所以多运用，多联系，才能更上一层楼。

转载于:https://my.oschina.net/nickwill/blog/194806