关于cssinline-block的信息

by intanet.cn ca 前端 on 2024-03-18

本篇文章给大家谈谈cssinline-block，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、css中的区块 inline inline-block block 三者有什么区别？
2、请问css中display: inline- block是什么意思啊？
3、CSS中display:inline-block是什么意思？

css中的区块 inline inline-block block 三者有什么区别？

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-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;}

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

[img]

请问css中display: inline- block是什么意思啊？

display是控件的css属性之一，表示的是显示模式。none表示旁告不显示在网页上，但是代码存在;bolck是此元素将显示为块级元素，此元素前后会带有换行符。

在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性;而内乱启肢联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。

我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这哗世个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

参考资料

天涯社区.天涯社区[引用时间2017-12-25]