Display属性学习总结

HTMl元素根据表现形式，常见的可以分为两类。

（1）块元素（block）

（2）行内元素（inline)。

当然，除了以上两种元素类型外，还有inline-block、table-cell等元素类型。

1：块元素

块元素在浏览器默认状态下将占据整行，排斥其他元素与其位于同一行。块元素一般为矩形，可以容纳行元素和其他的块元素。

常见的块元素有：div(div层)  h1~h6(1到6级标题) p(段落，会自动在其前后创建一些空白) hr(分割线) ol(有序列表) ul(无序列表)

块元素具有如下特点：

（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。

（2）块元素内部可以容纳其他块元素或行元素。

（3）可以定义高度（height），也可以定义宽度（width。

（4）可以定义四个方向的margin属性。

2：行内元素

行内元素默认显示状态可以与其他行内元素共存在同一行。

常见的行内元素有：strong(加粗强调) em(斜体强调) s(删除线) u(下划线) a(超链接) span(常用行级，可定义文档中的行内元素)

行内元素具有以下特点：

（1）可以与其他行内元素位于同一行。

（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。

（3）无法定义高度（height），也无法定义宽度（width）。

（4）可以定义margin-left和margin-right，无法定义margin-top和margin-bottom。

3：Display简介

如果想要将元素从一个类型转换为另外一个类型，就需要display属性。

其语法：display:属性值；

display属性取值：

inline      行内元素

block      块元素

inline-block     行内块元素

table      以表格形式显示，类似于table元素

table-row    以表格行形式显示，类似于tr元素

table-cell    以表格单元格形式显示，类似于td元素

none       隐藏元素

在CSS中，可以使用display:inline-block来将元素转换为行内块元素。行内块元素有以下两个特点。

（1）可以定义width和height。

（2）可以与其他行内元素位于同一行。

inline-block元素既具备块元素的特点，也具备行内元素的特点，在HTMl中，常见的inline-block元素有两个：img元素和input元素。

display:none

在CSS中我们可以使用display:none来隐藏元素。一般情况下，配合JavaScript来动态隐藏元素。

对于display:none需要注意以下：

（1）display:none一般用于JavaScript动态隐藏元素，被隐藏的元素不占据原来的位置空间。

（2）display:none不推荐用来隐藏一些对SEO关键的部分。对于搜索引擎来说，它会直接忽略diaplay:none隐藏的内容，不会把display:none隐藏的内容加入权重考虑。

display:none和visibility:hidden的区别

在CSS中，如果想要隐藏某一个元素，我们可以使用display:none或者visibility:hidden来实现，其二者有本质的区别。

（1）display:none的元素被隐藏之后，不占据原来的位置，也就是说彻底消失了，看不见也摸不着。

（2）visibility:hidden的元素被隐藏之后，依然占据原来的位置，也就是说并没有彻底消失，看不见但摸得着。

display:table-cell

在CSS中，display:table-cell可以让元素以表格单元格的形式呈现，也就是说table-cell类型的元素具备td元素的特点。

display:table-cell非常强大，可以实现以下三种功能。

（1）图片垂直居中于元素。

（2）等高布局。

（3）自动平均划分元素，并且在一行显示。

【1】图片垂直居中于元素

在CSS中，可以使用display:table-cell和vertical-align:center来实现大小不固定的图片的垂直居中效果。

语法：

父元素

{

display:table-cell;

vertical-align:center;

}

子元素{vertical-align:center;}

【2】自动平均划分元素

语法：

父元素{display:table};

子元素{display:table-cell;}

当父元素定义display-table而子元素定义display:table-cell时，如果给父元素一定的高度，父元素宽度就会根据子元素的个数进行自动平均划分。

去除inline-block元素间距

在CSS中，使用font-size:0来去除inline:block元素的间距。

语法：

父元素{font-size:0;}

说明：font-size:0是在inline-block元素的父元素添加的。

也可使用font-size:0来去除图片之间的间距。