CSS 常见布局技巧（文字环绕、分页、CSS三角）这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战使用CSS

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

使用CSS可以制作很多形状图形，不一定都只需要图片来实现。在此做了一些整理和总结。

margin负值运用

浮动的盒子设置边框，相邻的地方不会重合，所以如果给这些盒子设置1px的边框那么相邻盒子之间就会有2px的边框样式，只要给后面的盒子设置margin-left设置-1px，就会消除相邻边框的这种情况。

margin负值运用1.jpg

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

ul li {
    list-style: none;
    margin-left: -3px;
    float: left;
    width: 150px;
    height: 200px;
    border: solid 3px red;
}

文字围绕浮动元素

如果做一个文字环绕图片的效果，只需要把图片所在盒子设置成浮动就可以了，并列的p标签中的文字就会自动还绕浮动。

(浮动设计之初也是为了做文字环绕效果的)

<body>
    <div class="box">
        <div class="pic">
            <img src="img/head.jpg" alt="">
        </div>
        <p>
            老一辈（如我的父亲）喜欢不得罪人的生活，
        </p>
    </div>
</body>

.box {
    width: 200px;
    height: 70px;
    background-color: blanchedalmond;
}

.pic {
    float: left;
    width: 70px;
    height: 100%;
    margin-right: 5px;
}

.box img {
    width: 100%;
}

行内块的巧妙运用

制作分页样式可以利用行内块元素的特点实现（不使用浮动）

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    text-align: center;
}

.box a {
    text-align: center;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    line-height: 40px;
    text-decoration: none;
    color: black;
}

.box .prev,
.box .next {
    width: 100px;
}

.box .current,
.box .elp {
    background-color: white;
    border: none;
}

.box input {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
}

.box button {
    width: 40px;
    height: 40px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
}

CSS三角强化

制作非等腰三角形可以给边框设置其它样式、属性。（调节边框宽度）

<body>
    <div class="box">

    </div>
</body>

.box {
    width: 0;
    height: 0;
    border-top: 120px solid transparent;
    border-right: 50px solid red;
    border-left: 0 solid black;
    border-bottom: 0 solid blue;
}

例：(使用三角实现梯形)

特殊三角例.jpg

<body>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <li></li>
        </span>
        <span class="reg">
            ￥5650
        </span>
    </div>
</body>

.price {
    width: 160px;
    height: 30px;
    /* background-color: red; */
    border: red 1px solid;
    line-height: 30px;
}

.miaosha {
    position: relative;
    display: block;
    margin-right: 7px;
    width: 90px;
    height: 30px;
    float: left;
    background-color: red;
    text-align: center;
    font-weight: 700;
    color: white;
}

.miaosha li {
    position: absolute;
    right: 0;
    top: 0;
    list-style: none;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 12px 0 0;
    border-color: transparent white transparent transparent;
}

.reg {
    color: grey;
    font-size: 14px;
    text-decoration: line-through;
}