CSS中inline-block的应用

标签：大小   round   应用   浏览器   color   height   12px   src   例子   

　　以往我们做横向菜单列表的时候，往往使用li和float:left结合来实现，但这样通常会造成布局的混乱。因此我们可以尝试使用li和display:inline-block来实现。

　　简单的说，设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline-block元素不换行的特性。

　　首先，创建一个html文件，包含以下代码：

<style>
ul,li{
    padding:0;
    margin:0;
}
li{
    display:inline-block;
    border:1px solid #000;
}
</style>

<ul>
    <li>TianJin</li>
    <li>ShangHai</li>
    <li>SuZhou</li>
    <li>NanJing</li>
</ul>

　　　　当我们在浏览器端打开此页面时，效果如下：

　　　　 然而我们发现，虽然设置了margin和padding属性为0，但每个li之间有一个小空隙，接下来如果把代码中的li标签写在一行，如下所示：　

<style>
ul,li{
    padding:0;
    margin:0;
}
li{
    display:inline-block;
    border:1px solid #000;
}
</style>

<ul>
    <li>TianJin</li><li>ShangHai</li><li>SuZhou</li><li>NanJing</li>
</ul>

　　　　再次在浏览器中打开的时候，效果就变成:

　　　　令人惊讶的是小空隙居然不见了!笔者对文档的修改实际上只是将3个Enter去掉，怎么会让小空隙消失呢！突然灵光一闪，笔者想起了这样一个知识点，在浏览器中

　　空白符是不会被浏览器忽略的，多个连续的空白符会被浏览器自动合并成1个。我们编写代码时写的空格，换行符都会产生空白符。所以自然而然的两个元素之间会有空

　　白符，如果将上述例子中的li标签写在一行，那么空白符会消失，菜单自然也就紧凑了起来。

　　　　但代码中把标签写在一行终归不是方法，那如何才能优雅的去掉小空隙呢！说到底，空白符也是字符，所以可不可以设置font-size为0呢?所以将代码如下修改:

<style>
ul,li{
    padding:0;
    margin:0;
    font-size:0px;
    text-align:center;
}
li{
    display:inline-block;
    border:1px solid #000;
    font-size:12px;
    width:120px;
}
</style>

<ul>
    <li>TianJin</li>
    <li>ShangHai</li>
    <li>SuZhou</li>
    <li>NanJing</li>
</ul>

　　　　代码中除了修改字体大小为0外，并且设置了li元素的宽度，以及文字居中对齐等，然后浏览器端显示的效果为:

　　　　怎么样!效果还算可以，然后你可以在添加额外的代码使菜单显得更加美观!上面只是一些核心的东西。总结一下，从我们简简单单的html文件到浏览器端显示的绚丽的

　　效果的过程，真是一件神奇的事情!因为我们只是敲了一系列的字符而已，经过浏览器的转换，变成华丽页面。在此过程中，我们的html文件相当于浏览器这个系统的输入，

　　而输出呢就是那些华丽的界面。因此这和浏览器的“编译”过程以及渲染机制密不可分。所以我们要加深对浏览器工作过程的了解，这样会帮助我们走的更远。代码我已经上

　　传到github,请有需要的同学前往https://github.com/bigVoyage/ST_hw01.

CSS中inline-block的应用

标签：大小   round   应用   浏览器   color   height   12px   src   例子   

原文地址：http://www.cnblogs.com/cheetah666/p/6439800.html