CSS案例

最新推荐文章于 2025-09-16 13:18:07 发布

原创最新推荐文章于 2025-09-16 13:18:07 发布 · 179 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

CSS案例专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用CSS实现各种布局技巧，包括双栏与三栏布局的实现方式，以及如何利用伪元素清除浮动。此外，还讲解了如何通过CSS实现checkbox的自定义样式，以及消除inline-block元素间的空隙。

CSS实现checkbox特效

    .checkDiv input {
        display: none;
    }
    
    .checkDiv input+label {
        background: url("uncheck.gif");
        background-size: 20px 20px;
        background-repeat: no-repeat;
        padding-left: 20px;
    }
    
    .checkDiv input:checked+label {
        background: url("checked.gif");
        background-size: 20px 20px;
        background-repeat: no-repeat;
        padding-left: 20px;
    }

<div class="checkDiv">
    <input type="checkbox" id="selectId" />
    <label for="selectId">我喜欢</label>
</div>

清除float浮动的方法

方法一： 为父元素设置高度或者设置成overflow: hidden

    .containter2 {
        height: 200px;
        overflow: hidden;
    }

方法二： 通过伪元素的方式

    .container4::after {
        content: "";
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }

通过float实现双栏布局

为右边的div定义 margin-left: 200px;

    .container {
        width: 800px;
        height: 200px;
    }
    
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    
    .right {
        background-color: blue;
        height: 100%;
        padding-left: 20px;
        margin-left: 200px;
    }
    <div class="container">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

Float实现三栏布局

左边div定义 float: left, 右边div定义 float: right，中间div通过margin-left和margin-right来

<style>
    .container {
        width: 800px;
        height: 200px;
    }
    
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    
    .middle {
        height: 200px;
        margin-left: 200px;
        padding-left: 20px;
        margin-right: 200px;
        background-color: yellow;
    }
    
    .right {
        float: right;
        background-color: blue;
        height: 200px;
        width: 200px;
        padding-left: 20px;
    }
</style>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">middle</div>
</div>

消除inline-block元素之间空隙的方法

父元素设置 font-size: 0, 子元素设置 font-size : 14px

<style>
    .container {
        height: 200px;
        width: 800px;
        font-size: 0;
    }
    
    .left {
        height: 200px;
        width: 200px;
        display: inline-block;
        background-color: red;
        font-size: 14px;
    }
    
    .right {
        height: 200px;
        width: 600px;
        display: inline-block;
        background-color: blue;
        font-size: 14px;
    }
</style>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>

</div>