19.布局技巧：①margin负值应用：让两个盒子之间的线合并margin-left:-2px。如果中间线合并添加相对定位；已经有定位就z-index:1；②浮动不会压住文字（围绕技巧）③行内块做页码

美美| ू•ૅω•́)ᵎᵎᵎ

于 2021-07-19 16:29:36 发布

阅读量248

点赞数 1

分类专栏： html，css基础

本文链接：https://blog.csdn.net/lazylYYY/article/details/118893406

版权

html，css基础专栏收录该内容

21 篇文章 4 订阅

订阅专栏

一：合并两个盒子之间的两条线。

但是盒子的最右边会被覆盖，如图：

解决办法：①添加相对定位:会压住其他标准流和浮动的盒子

②如果有相对定位，那就提高盒子层级z-index:1;

二：浮动元素不会压住文字

三：行内块做页码

1.a标签是行内元素，设置宽高无效，先转成行内块元素dispaly:inline-block;

2.让a标签里面的文字水平垂直居中:水平：text-align:center; 垂直：line-height:a标签的高度;

3.让a标签在页面水平居中：在他父盒子加：text-align:center;

一：合并两个盒子之间的两条线。

前：

后：

但是盒子的最右边会被覆盖，如图：

解决办法：①添加相对定位:会压住其他标准流和浮动的盒子

②如果有相对定位，那就提高盒子层级z-index:1;

二：浮动元素不会压住文字

三：行内块做页码

1.a标签是行内元素，设置宽高无效，先转成行内块元素dispaly:inline-block;

2.让a标签里面的文字水平垂直居中:水平：text-align:center; 垂直：line-height:a标签的高度;

3.让a标签在页面水平居中：在他父盒子加：text-align:center;

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: pink;
            border: orangered 1px solid;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            color: black;

        }

        .box .prev,
        .box .next {
            width: 90px;

        }

        input {
            height: 50px;
            width: 50px;
        }
    </style>
</head>

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

美美| ू•ૅω•́)ᵎᵎᵎ

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
19.布局技巧：①margin负值应用：让两个盒子之间的线合并margin-left:-2px。如果中间线合并添加相对定位；已经有定位就z-index:1；②浮动不会压住文字（围绕技巧）③行内块做页码

目录一：合并两个盒子之间的两条线。但是盒子的最右边会被覆盖，如图：解决办法：①添加相对定位:会压住其他标准流和浮动的盒子 ②如果有相对定位，那就提高盒子层级z-index:1;二：浮动元素不会压住文字三：行内块做页码1.a标签是行内元素，设置宽高无效，先转成行内块元素dispaly:inline-block;2.让a标签里面的文字水平垂直居中:水平：text-align:center; 垂直：line-height:a标签的高度;3.让a标...
复制链接

扫一扫