CSS技巧

• inline-block

该css可以让li标签横排，比传统的使用浮动要好，代码如下：

<ul>
    <li>我的项目</li>
    <li>我的项目</li>
    <li>我的项目</li>
    <li>我的项目</li>
</ul>

　　　　　ul {
            list-style-type: none;
            padding: 0px;
        }

        ul > li {
            line-height: 30px;
            display: inline-block;
        }

如此做就可以达到横排的效果。

• 由于内容元素浮动导致的容器高度为零的解决办法

1. 第一种解决办法（额外添加元素）

   • 由于内容为浮动或者别的原因导致的高度为零，有时候不是很好，如下

     CSS为：

   • 　　　　　.new {
                 background-color: #808080;
                 border: solid 1px #000000;
             }
     
             .new > img {
                 float: left;
             }
     
             .new > p {
                 float: right;
             }

      

   •  

     HTML为

     • 　　

       <div class="new">
           <img src="../../lib/images/marker-gold.png" alt="my pic">
       
           <p>描述文字</p>
       </div>

        

   •  

     如果不做处理会出现容器为高度为0的现象：

     

     可以在内容后面再添加一个空标签

     • 　　

       <div class="new">
           <img src="../../lib/images/marker-gold.png" alt="my pic">
       
           <p>描述文字</p>
           <br class="clear">
       </div>

       .clear {
             clear: both;
       }

        

   • 这样就能达到目的：

     

2. 使用伪类：after动态添加一个元素　

　　　　　　Css如下：

        .new {
            background-color: #808080;
            border: solid 1px #000000;
        }

        .new > img {
            float: left;
        }

        .new > p {
            float: right;
        }

        .clear:after {//利用：after添加一个伪元素
            content: ".";
            height: 0;
            visibility: hidden;
            display: block;
            clear: both;
        }

　　　　　　HTML如下：

<div class="new clear">
    <img src="../../lib/images/marker-gold.png" alt="my pic">

    <p>描述文字</p>
</div>

 

• 相对定位和绝对定位的巧用

要想一个元素始终位于容器元素的右下角可以使用相对定位绝对定位完成，具体看代码：

css如下：

        #branding {
            width: 100%;
            position: relative;//这将容器设置为相对定位
            height: 50px;
            border: 1px solid #808080;
        }

        .content {
            line-height: 30px;
        }

        #branding .tel {
            position: absolute;//因为容器已经是相对定位，则它的绝对定位是参考父元素来的
            right: 10px;
            bottom: 5px;
        }

<div id="branding">
    <div class="content">
        这里是内容
    </div>
    <span class="tel">Tel:0845 838 6163</span>
</div>

效果如下：