常见布局技巧

公告

View Post

1.margin负值妙用

点击查看代码

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

解析：先看1盒子，执行margin-left，2盒子由于浮动也跟着1盒子移动，2盒子执行margin-left,12盒子边框重合

但此时会出现如图一下问题，当我们设置鼠标经过盒子时，边框颜色盒子右边边框未显示

解决办法：
添加定位，添加相对定位

点击查看代码

            position: relative;
            border: 1px solid blue;

这是针对盒子没有定位的情况，如果盒子有定位，则通过设置z-index，提高当前盒子的层级 ####2.文字围绕浮动元素巧妙应用 ![](https://img2020.cnblogs.com/blog/2572010/202110/2572010-20211020203051936-1197327508.png)

查看图片，以前做法为图片添加左浮动，文字添加右浮动，
现在做法：
仅仅给图片添加左浮动

3. 行内块元素巧妙运用

点击查看代码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            line-height: 36px;
            border: 1px solid #ccc;
            text-align: center;
            text-decoration: none;
            color: #333;
        }
        .box .prev,
        .box .next {
            width: 60px;
        }
        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box button {
            width: 50px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }

先转换为行内块元素，再在父级元素中添加text-algin:center

4.css三角妙用

例如

点击查看代码

<style>
        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 100px auto;
            text-align: center;
        }
        .a {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
        }
        i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent white transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
    </style>
</head>
<body>
    <div class="price">
        <span class="a">$1500
            <i></i>
        </span>
        <span class="b">$3000</span>
    </div>
</body>

posted on 2021-10-19 22:59 墨染一生阅读(65) 评论(0) 编辑收藏举报

刷新页面返回顶部