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

最新推荐文章于 2022-04-28 19:46:49 发布
最新推荐文章于 2022-04-28 19:46:49 发布
阅读量248 收藏 3
点赞数 1
分类专栏： html，css基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lazylYYY/article/details/118893406
版权

目录

 

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

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

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

            ②如果有相对定位，那就提高盒子层级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
    评论
专栏目录
布局内嵌盒子外边距合并问题
weixin_45397914的博客
07-17 256
    在html布局中经常会出现两个嵌套的盒子，内嵌的盒子加外边距会被外面的盒子合并，就不能正确的显示出来。 .father { width: 200px; height: 200px; background: pink; } .son { width: 50px; height: 50px; background: skyblue; margin-top: 50px; }     要解决这个嵌套盒子的子盒子外边距被父盒子合并的问题，可以使用一下三种方式： 1、
两个盒子合并边框大一倍解决方法011
的博客
03-30 915
<div></div> <div></div> <div></div> <div></div> <div></div> div{ width: 200px; height: 400px; border: 4px solid red; float: left; margin-l...
CSS基础学习十五：盒子模型补充之外边距合并
life is wonderful
11-21 3645
今天继续接着CSS盒子模型补充，CSS基础学习十三：盒子模型和CSS基础学习十四：盒子模型补充之display属 性设置都是介绍了盒子模型中的内容概括。开始今天的主题：外边距合并。        外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合 并的外边距的高度中的较大者。        (1)外边距合并        外边距合并叠加是一
盒子模型问题,合并和塌陷问题
muweichang的博客
04-28 393
盒子模型问题外边距折叠现象1.合并现象2.塌陷问题行内元素 外边距折叠现象 1.合并现象 当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。 两个垂直布局的块级元素，上下的margin会合并 结果会取两者之间margin的最大值 解决办法：只给其中一个盒子设置margin即可 <style> div{ width: 100px;
浮动元素与标准流的文字层叠，绝对定位和固定定位与标准流的文字层叠
Lhy_JL的博客
02-24 576
浮动、绝对定位和固定定位的区别： 绝对、固定定位，浮动都是脱标的。 设置了绝对、固定定位属性的元素类似有 float 元素属性（行内块元素）；例如 p 元素设置position：absolute，可直接设置p的width，height 浮动元素会压住下面的标准流盒子，但是不会压住下面标准流的文字（图片）。 绝对、固定定位会完全压住下面的标准流盒子。 浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果，文字会围绕浮动（float）元素！ 1、首先两个标准的盒子，排列顺序是...
IE6 float:left margin-left出现两倍像素
09-25
一个元素向左浮动(float:left)，且添加了向左空白边(margin-left:10px)，那么会自动的加一倍变成30px,接下来介绍如何解决此问题，感兴趣的朋友可以了解下
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
clear:both后margin-top不起作用其他左右下都起作用
09-25
clear:both后margin-top不起作用而其他的左右下都起作用，这是怎么回事呢？感兴趣的朋友可以参考下
美工之路 网页设计视频教程CSS篇-28.盒子Box：外补丁margin.rar
07-09
美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计...下面对新教程作一个简单的介绍：　 本教程包含4个部分：HTML篇,CSS篇,Javascript篇和XML篇，教程会陆续发布，在时间跨度上有点大，希望大家谅解。
浅谈CSS之浮动与定位
cp3_hxl的博客
04-22 644
浅谈CSS之浮动与定位 一，浮动 1.传统网页布局的三种方式： 网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应的位置。CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）。 *普通流 *浮动 *定位 1.2 标准流特点 1.块级元素会独占一行，从上到下顺序排列。 常用元素：div,p,h1-h6,ul,ol,dl,form,table. 2.行内元素按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元素：span,a,i,em等。 1.3为什么需要浮动？ 浮动可以改变元素标签默
16CSS中的定位
CurryCoder的个人博客
01-03 312
1.为什么需要定位？ 引入问题：一些情况使用标准流或浮动能实现吗？ 1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 2.当我们滚动窗口的时候，盒子是固定在屏幕的某个位置。 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以： 浮动可以让多个盒子在一行没有缝隙的排列显示，经常用于横向排列的盒子。 定位则是可以让盒子自由的某个盒子的内部移动位置或者固定在屏幕中...
display：table，布局自动分宽度
li3196672779的博客
06-25 2512
Document * { list-style: none; } ul { width: 300px; display: table; } ul li { display: ta
div和div之间画横线_HTML在两个div标签中间画一条竖线的方法
weixin_29489791的博客
12-30 2536
HTML在两个div标签中间画一条竖线的方法发布时间：2020-09-14 11:34:51来源：亿速云阅读：170作者：小新这篇文章主要介绍HTML在两个div标签中间画一条竖线的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！近日在画一个界面的时候，遇到一个需求：在界面当中画一条竖线，且这条竖线在高度上需要自动占满整个父p(即这条竖线的高度和两个p中较高的一个等高)。...
CSS z-index 重叠排序
黑夜中的潜行者
12-30 490
CSS z-index 重叠排序 一、z-index语法与结构 二、z-index使用条件 三、案例 1. z-index重叠顺序案例 2. 案例说明
margin外边距负值解决border边框重叠加粗问题
王国任的博客
05-31 1453
当我们使用边框的时候，如果盒子相邻在一起，就会造成边框重叠加粗的问题，原本的1px的边框，重叠就会变成2px，造成加粗的效果。 边框重叠实例 下面是多个盒子边框重叠的实例。 可以看到右边框与左边框重叠，下边框与上边框重叠，造成加粗。 margin负值实例代码 <style> div { width: 200px; height: 300px; border: 1px solid #ccc; } </style> &lt
cssday5
hulitong的博客
05-26 779
1.1为什么需要定位？ 提问： 以下情况使用标准流或者浮动能实现吗？ 某个元素可以自由的在一个盒子内任意位置摆放，并且压住其他盒子. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的 . 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。 所以： 1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 1.2 什么是定位 定位就是将盒子定在某个位置，也是摆盒子 1.3定位的组成 定位
margin和border-style的用法
dongyanxia1000的专栏
01-14 1399
一、margin 在用HTML进行页面布局时，常常需要设置页边空白，会用到margin的属性： 指定页边距，按照顺时针方向：上-右-下-左的顺序进行设置。 margin：top right bottom left； top right bottom left四个值之间用空格分隔。等同于: margin-top:value; margin-right:value; margin-botto
CSS之定位：边偏移 静态定位static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性定位sticky，子绝父相的由来,绝对定位的盒子居中, 堆叠顺序
qq_44156869的博客
02-18 1366
为什么需要定位？ 某一个盒子可以自由的在一个盒子内移动位置，并且压住其他盒子。 当我们滚动窗口的时候，盒子的是固定屏幕的某个位置的。 为什么需要定位 以上效果，标准流或者浮动都无法实现，此时需要定位来实现。 所以： 浮动可以让多个盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 定位组成： 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 定位模式 +边偏移。 定位模式
CSS盒子的定位
lvmengmeng
04-07 2027
转自：http://www.cnblogs.com/stephen-liu74/p/3333704.html 相对定位       使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。       使用relative，即相对定位，除了将position属性设置为rel
19.下列哪个属性能够设置盒模型的左侧外边距 A.float: B.margin: C.text-decoration: D.margin-left:
最新发布
05-30
`margin-left`属性可以设置一个元素的左侧外边距大小，即元素与其相邻元素之间的距离。在CSS中，元素的外边距指的是元素边框与相邻元素之间的距离。例如，下面的代码将一个`div`元素的左侧外边距设置为20像素： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值