display的几种经常使用取值

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

一、none 此元素不会被显示，而且不占据页面空间，这也是与visibility:hidden不一样的地方，设置visibility:hidden的元素，不会被显示，可是仍是会占据原来的页面空间。

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

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

三、block 块级元素 会独占一行，若是不设置宽度，其宽度会自动填满父元素的宽度，能够设置宽高，即便设置了宽度，小于父元素的宽度，块级元素也会独占一行。

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

四、inline-block 行内块元素 与行内元素同样能够再一行内显示，并且能够设置宽高，能够设置margin和padding。

示例元素：input,button,img

五、list-item 列表元素

示例元素：li

六、table 会做为块级表格来显示(相似于<table>)，表格先后带有换行符。

七、inline-table 会做为内联表格来显示(相似于<table>)，表格先后没有换行符。

八、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设置的数值进行比例的分配。

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

 

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

一、嵌套

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

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

div能够嵌套div

td能够嵌套div

li能够嵌套div

dd，dt能够嵌套div

结构标记 能够嵌套div

二、margin和padding

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

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

三、设置宽高

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

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