css中的display属性

css中经常使用的一个属性display相信大家都不陌生,我们经常使用它来控制一个标签的显示隐藏,也经常使用它来改变标签的显示水平，从而达到我们各种布局的要求，下面来讨论一下display属性：

display的属性常用的有四种，none、block、inline、inline-block。

none：显示水平为none的标签都不会渲染，这里说的不显示，不是说显示透明，而是压根不会渲染，当然也不会占用屏幕的位置，也是无法触发点击的。

block：显示水平为block的标签特点是，总是从新行开始，宽度高度顶边距和底边距都是可以控制的。宽度缺省是100%。默认为block显示水平的标签有，div、p、h、form、ul、li。

inline：显示水平为inline的标签特点是,总是和其他元素在一行，宽度高度顶边距底边距都不可改变，宽度默认为它内部内容的填充宽度。默认为inline的标签有，span、a、label、input、img、strong、em。

inline-block：显示水平为inline-block的标签特点是，标签本身和其他元素显示在一行，但是标签可以控制宽度，高度，顶边距底边距等。

我们经常用到的是将inline标签转为block标签，可以控制其宽度高度，同时添加float属性来控制其显示在一行，其实这就是inline-block的效果。

当然css的用法是很多变的。不同的工程师对其理解和使用习惯不同。display，float是css2常用的布局属性，即便有了css3，在pc端的前端布局中还是经常使用display-float方法处理布局问题（主要是浏览器兼容问题）。而在移动开发布局中，可以大胆使用css3的布局方式（flex）。这个之后再讲。

转载请注明出处：http://gagalulu.wang/blog/detail/16 您的支持是我最大的动力！