CSS中display:block是什么意思?

html-css022

CSS中display:block是什么意思?,第1张

CSS中display:block意思如下:

如果用<div>+<a>做一个按钮,这个能理解吧,就是 想通过 link 来实现跳转,但是看起来是个按钮,且不需要触发事件。而且 css 也比 button 的好用。

这中情况下,如果不是“块”block,那么只要点到文字上时才会触发,点到 按钮<div>但是没点到字是不行的,但是用了 block 后,整个按钮都可以承载 a 的link操作了

css中的display是设置元素显示的方式,block是一块状元素的方式显示,

inline是以内联元素的方式显示,none是不不显示;

块状元素会单独占据一样,其他元素跟他在同一行的会被迫换行,挤到下一行那里去,inline则不会这样。

1.inline是行内元素,同行可以显示,像span、font、em、b这些默认都是行内元素,不会换行,无法设置宽度、高度、margin、border

2.block,块元素,div、p、ul、li等这些默认都是块元素,会换行,除非设置float

3.inline-block,可以同行显示的block,想input、img这些默认就是inline-block,出了可以同行显示,其他基本block一样,但是inline-block兼容性很差,要用需要写hack

inline-block的hack如下:

display: -moz-inline-stack火狐2hack

display: inline-block

vertical-align: top撑出盒子的bug修复

zoom: 1后面两行IE7hack

*display: inline

使用例子 ul li{ display: -moz-inline-stackdisplay: inline-blockvertical-align: topzoom: 1*display: inline}

inline-block有个好处,就是div设置浮动只能实现居左,或者居右,而inline-block可以通过上级容器设置text-align:center实现块元素居中