inline-block之妙用

最新推荐文章于 2025-07-05 20:23:59 发布

原创最新推荐文章于 2025-07-05 20:23:59 发布 · 471 阅读

CC 4.0 BY-SA版权

文章标签：

11 篇文章

订阅专栏

本文详细介绍了CSS中的inline-block属性，该属性使元素兼具行内元素的默认不换行特性和块级元素的可设置宽高特性。通过示例对比了使用inline-block与传统浮动布局的不同之处。

首先解释一下inline-block，在w3c school中定义：行内块元素。（CSS2.1 新增的值）

什么叫行内块元素呢？

来看看英文版的定义，我觉得这个比较明确，暂时在中文版上没找到

inline-block elements are like inline elements but they can have a width and a height.

大概意思也和这个属性的名字差不多，就是说设置了inline-block属性的元素具有行内元素的性质，但是却可以设置宽和高，因为我们都知道行内非替换元素是不能设置宽和高的，行内替换元素本身的默认属性就是：inline-block（关于行内非替换元素详见非行内元素与行内元素转换的几种方法）

咳咳，汇成一句话就是：属性inline-block 的元素既具有 block 元素可以设置宽高的特性，又具有 inline 元素默认不换行的特性。当然inline-block 元素还可以设置 vertical-align等属性（好像又说多了...）

接下来看看inline-block经常在浮动中的用法：

inline-block常常会使浮动变得容易很多，例如下面这个例子：

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

.after-box {

    border: 3px solid red; 
    clear: left;
}

这是一个普通的利用float来做的例子，效果如图：

而如果使用inline-block的话就不用去浮动再去清除浮动，即可以实现相同的效果la~

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

<pre name="code" class="css">.after-box {

    border: 3px solid red;

}