CSS-布局技巧

最新推荐文章于 2024-08-09 16:30:00 发布

王子老师

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量99

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_37304462/article/details/120519959

版权

CSS 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

本文介绍了CSS中负边距的巧妙应用，包括如何通过设置负边距实现元素间的紧密排列，以及在鼠标悬停时解决边框重叠问题。同时展示了文字围绕浮动元素布局的方法，以及利用行内块元素实现居中布局的技巧。这些方法对于前端开发者优化网页布局具有实际指导意义。

摘要由CSDN通过智能技术生成

人生不能太过圆满，求而不得也未必是遗憾。

margin负值巧妙应用

在这里插入图片描述
现在每个盒子中间的边框宽度是2px
添加属性：margin-left:-1px

鼠标滑过的时候显示红色的边框：

右边的被覆盖了
解决方法1：如果li都有定位，z-index:1提高层级
方法2：使用相对定位，占有原来的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王子CSS学习</title>
    <style>
         ul li{
             position: relative;
             margin: 0 auto;
             width: 100px;
             height: 50px;
             background-color: pink;
             border: 10px solid blue;
             list-style: none;
             float: left;
             margin-left: -10px;
         }
        ul li:hover{
            border: 10px solid red;
             z-index: 1;

        }
    </style>
</head>
<body>
<div class="ddd">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
</html>

文字围绕浮动元素布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王子CSS学习</title>
    <style>
        .ddd{
            width: 400px;
            height: 74px;
            border: 2px solid  blue;
                        margin: 0 auto;

        }
        清除内外边距
        *{
            margin: 0;
            padding: 0;
        }
        .aaa{
            float: left;
            width: 200px;
            height: 74px;
        }
        .aaa img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="ddd">
    <div class="aaa">
        <img src="2021.jfif" alt="">
    </div>
    <p>现在的我根本无心工作，一心只想为祖国庆生，放不放假无所谓，主要是爱国</p>

</div>
</body>
</html>

清除内外边距之后：
在这里插入图片描述

利用行内块元素妙用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王子CSS学习</title>
    <style>
        .ddd{
            text-align: center;
            width: 400px;
            height: 74px;
            margin: 0 auto;
        }
        .ddd a{
            display: inline-block;
            width: 36px;
            height: 36px;
            border: 1px solid #ccc;
            background-color: #f7f7f7;
            line-height: 36px;
            text-decoration: none;
            text-align: center;
        }
        .ddd .pre,.ddd .next{
            width: 85px;
            font-size: 14px;
        }
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div class="ddd">
    <a href="#" class="pre">&lt;&lt;上一页</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#" class="next">&gt;&gt;下一页</a>
</div>
</body>
</html>