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 您的支持是我最大的动力!