display的几种常用取值

display的取值有很多种，下面列出比较常用的几种取值，还有其它的少用的值没有列出来：

1、none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。

2、inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。

示例元素：span,b,i,a,u,sub,sup,strong,em

3、block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。

示例元素：div,h1-h6,ul,ol,dl,p

4、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。

示例元素：input,button,img

5、list-item 列表元素

示例元素：li

6、table 会作为块级表格来显示(类似于<table>)，表格前后带有换行符。

7、inline-table 会作为内联表格来显示(类似于<table>)，表格前后没有换行符。

8、flex 多栏多列布局，火狐可以直接使用，谷歌和欧朋需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

伸缩容器(flex  containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items)。

HTML代码：

<div class='container'>

<div class='left'>左</div>

<div class='center'>中</div>

<div class='right'>右</div>

</div>

CSS代码：

.container{

display:flex; // 设置一个伸缩容器

flex-flow:row wrap /*布局方式,row:从左向右布局，column：从上到下布局，wrap：是否在一行显示，如果设置了此值，则伸缩项目会换行显示，如果没有设置此值，则不会换行显示*/

}

.left{width:500px;}

.center{flex:1;}

.right{flex:2;}

设置flex属性的元素会用伸缩容器减去有实际数值的元素的宽或者高，然后将差值按照flex设置的数值进行比例的分配。

9、inherit 继承，如果元素的某些属性没有进行设置，有些是会有默认值的，有些是会继承的。

 

行内元素与块级元素的区别：

1、嵌套

行内元素：行内元素只能嵌套行内元素，不能嵌套块级元素。

块级元素：块级元素可以嵌套行内元素，但是行内元素不可以嵌套块级元素。块级元素之间也可以进行嵌套，但是，并不是块级元素之间可以随意的嵌套。p元素是不能嵌套任何块级元素的，div可以嵌套任意的元素，但是div并不是能够被所有的块级元素嵌套的。

div可以嵌套div

td可以嵌套div

li可以嵌套div

dd，dt可以嵌套div

结构标记 可以嵌套div

2、margin和padding

行内元素：有margin和padding，但是只能够设置左右的值，设置上下的值是无效的。

块级元素：可以设置margin和padding上下左右的四个值，margin可以有负值，padding不允许有负值。

3、设置宽高

行内元素：不允许设置宽高，行内元素的宽高只能是由行内元素内的内容撑起来。

块级元素：允许设置宽高，如果不设置，默认宽度是父元素的100%，高度是由内容撑起来的。