display：block属性(cssblock)
大家好，关于display:block属性很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于cssblock的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
CSS中display:block是什么意思
CSS中display:block意思如下：如果用<div>+<a>做一个按钮，这个能理解吧，就是想通过 link来实现跳转，但是看起来是个按钮，且不需要触发事件。而且 css也比 button的好用。
这中情况下，如果不是“块”block，那么只要点到文字上时才会触发，点到按钮<div>但是没点到字是不行的，但是用了 block后，整个按钮都可以承载 a的link操作了
css中的display是设置元素显示的方式,block是一块状元素的方式显示，
inline是以内联元素的方式显示，none是不不显示；
块状元素会单独占据一样，其他元素跟他在同一行的会被迫换行，挤到下一行那里去，inline则不会这样。
div中的属性display:inline和display:block有什么区别
一、作用不同
1、display:inline：设置对象做为行内元素显示，inline是内联对象的默认值。
2、display:block：设置元素将显示为块级元素，此元素前后会带有换行符。
二、对应不同
1、display:inline：对应不显示为 display:none。
2、display:block：对应不显示为 hidden。
三、用法不同
1、display:inline：用在<ul>下的<li>中内联 block一般一个块占一行，除非float inline是自动排为一行，就象段内的文字一样，可成为多行。
2、display:block：block会让应用了该CSS属性的 HTML标记变成块级别元素，例如 SPAN是行内显示的，但是加了 display:block属性就不同。<span style="display:block"> SPAN1</span>。
参考资料来源：百度百科-display:inline
参考资料来源：百度百科-CSS语法
css中display:inline-block
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。
display:inline-block
简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但是这个属性目前不是所有的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果，下面就来探讨一下
在Firefox2中有-moz-inline-stack和-moz-inline-box实现，但是这两个私有属性在某些情况下都会有异常，具体如下：
1、display:-moz-inline-stack
“当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将无法点击或无法选取，需要通过position:relative还hack掉这个bug”--乌龙茶
2、display:-moz-inline-box
使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性-moz-box-align来解决
所以，建议不要使用-moz-inline-box，还是使用-moz-inline-stack
在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法：
1、先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：
div{display:inline-block;}
div{display:inline;}
2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：
div{display:inline; zoom:1;}
那么为了能够让所有浏览器支持display:inline-block，综合一下，最终的实现代码如下（参考怿飞：模拟兼容性的 inline-block属性）：
display:inline-block;/*一方面Firefox3 beta、IE8 beta、Opera、Safari支持，另一方面下触发IE下inline元素的 hasLayout*/
display:-moz-inline-stack;/* Firefox的私有属性，需要时还必须用到position:relative解决上面提到的bug*/
zoom:1;/*同样是IE下触发 hasLayout*/
*display:inline;/*一旦IE下触发了 hasLayout，设置 block元素为 inline会使 display:inline效果与 display:inline-block相似*/
/*扩展一下一些其他可能用到的属性*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0;/*如需隐藏文字，可用这四个属性*/
/*另外上面隐藏文字，还可以用更简化的方法：line-height:超级大值;font-size:0;*/
overflow:hidden;/*隐藏溢出的内容*/
vertical-align:middle;/*行内垂直居中，针对 Opera比较大的偏离*/
width:？px;/*？为任意非auto值*/
height:？px;/*？为任意非auto值*/
关于display:block属性和cssblock的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。