CSS进阶：常见布局技巧

曹莓奶昔

已于 2022-03-29 10:53:55 修改

阅读量411

点赞数

分类专栏： CSS 文章标签：前端 css css3 vscode html

于 2022-03-28 22:59:05 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/123723753

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1. margin负值的运用

两个盒子浮动，中间是没有缝隙的，导致两个边框放在一起会加宽边框，解决方法：

让每个盒子margin往左侧移动-1px正好压住相邻盒子边框

margin-left: -1px;

鼠标经过某个盒子时，提高盒子的层级即可（如果没有定位，则加定位（position: relative;保留位置），如果有定位，则加z-index）

2. 文字围绕浮动元素

原理：设置一个大盒子，盒子里面放文字和图片，图片设浮动，文字就会环绕图片

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字围绕图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 70px;
            background-color: rgb(234, 236, 226);
            margin: 100px auto;
            padding: 5px;
        }

        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 15px;

        }

        .pic img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>[锦集]热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>

</html>

效果图：

3. 行内块的巧妙运用

行内块可以巧妙地运用到页码的设计中，实现如下的页面布局

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页码</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

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

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

        .box {
            text-align: center;
            margin: 100px auto;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<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="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

</html>

4. CSS三角强化

原理：

一个矩形加一个三角形

代码：

            width: 0;
            height: 0;
            border-color: transparent red transparent transparent transparent;
            border-style: solid;
            border-width: 22px 8px 0 0;

曹莓奶昔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS进阶：常见布局技巧

1. margin负值的运用两个盒子浮动，中间是没有缝隙的，导致两个边框放在一起会加宽边框，解决方法：让每个盒子margin往左侧移动-1px正好压住相邻盒子边框margin-left: -1px;鼠标经过某个盒子时，提高盒子的层级即可（如果没有定位，则加定位（position: relative;保留位置），如果有定位，则加z-index）2. 文字围绕浮动元素3. 行内块的巧妙运用4. CSS三角强化...
复制链接

扫一扫