margin负值的应用

最新推荐文章于 2020-10-01 20:20:24 发布
最新推荐文章于 2020-10-01 20:20:24 发布
阅读量180 收藏
点赞数
分类专栏： css 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39147099/article/details/81713591
版权

一、圣杯布局和双飞翼布局

  1. 双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">
        .center {
            width: 100%;
            float: left;
        }
            .center-content {
                margin: 0 220px;
                height: 300px;
                background-color: #ffa;
            }
        .left {
            margin-left: -100%;
            float: left;
            width: 200px;
            height: 300px;
            background-color: #de6ada;
        }
        .right {
            margin-left: -200px;
            float: right;
            width: 200px;
            height: 300px;
            background-color: #98a3df;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">
            <div class="center-content"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
  1. 圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
    .container {
        padding: 0 220px;
    }
        .center {
            float: left;
            width: 100%;
            height: 300px;
            background-color: #ffa;
        }
        .left {
            position: relative;
            left: -210px;
            margin-left: -100%;
            float: left;
            width: 200px;
            height: 300px;
            background-color: #de6ada;
        }
        .right {
            position: relative;
            left: 210px;
            margin-left: -200px;
            float: right;
            width: 200px;
            height: 300px;
            background-color: #98a3df;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

这里写图片描述

二、去除列表的右边框

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <style>
    ul,li {
      margin: 0;
      padding: 0;
    }
    .container {
      margin: 100px auto;
      width: 320px;
      border: 1px solid #000;
      overflow: hidden;
    }
      .container-ul {
        list-style-type: none;
        /* margin-right: -10px; */
      }
      .container-li {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
  </style>
</head>
<body>
  <div class="container">
    <ul class="container-ul">
      <li class="container-li"></li>
      <li class="container-li"></li>
      <li class="container-li"></li>
      <li class="container-li"></li>
      <li class="container-li"></li>
      <li class="container-li"></li>
    </ul>
  </div>
</body>
</html>

这里写图片描述
这里3应该在红色框这这里，就不会造成空间浪费，做法是ul：margin-right: -10px,就是把上面的注释代码回复。
结果：
这里写图片描述

三、去除列表最后一项下边框重合问题

这里写图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <style>
    ul,li {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .container {
      margin: 100px 220px;
    }
      ul {
        width: 300px;
        border: 1px solid #000;
      }
      li {
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: aliceblue;
        border-bottom: 1px solid #000;
      }
      li:nth-last-child(1) {
        margin-bottom: -1px;
      }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</body>
</html>

在列表最后一项加：margin-bottom: -1px

这里写图片描述

四、多列等高

利用margin-bottom为负值会减少css读取元素高度的特性，加上padding-bottom和overflow:hidden,就能做一个未知高度的多列等高布局

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        overflow: hidden;
      }
      .div1 {
        margin-bottom: -200px;
        padding-bottom: 200px;
        float: left;
        width: 30%;
        height: 100px;
        background-color: beige;
      }
      .div2 {
        margin-bottom: -200px;
        padding-bottom: 200px;
        float: left;
        width: 30%;
        height: 50px;
        background-color: aquamarine;
      }
      .div3 {
        margin-bottom: -200px;
        padding-bottom: 200px;
        float: left;
        width: 30%;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
<body>
<div class="container">
  <div class="div1">heigth: 100px</div>
  <div class="div2">height: 50px</div>
  <div class="div3">height: 200px</div>
</div>
</body>
</html>

这里写图片描述

laumlin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单谈谈margin负值的作用
10-20
在CSS布局中，margin负值是一个非常有用的技巧，它能够帮助开发者解决许多复杂的设计问题，尤其是在需要精细调整元素位置或创建特殊布局时。虽然初学者可能会对负值margin感到困惑，但理解其工作原理和应用场合后，...
margin设置为负数
极客神殿
07-03 6267
1、为负margin“平反” 我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。在网页设计中，人们对负margin用法的态度大相径庭，有的人非常喜欢，而有的人则认为这是魔鬼的工作。 一个负margin应该是这样设置的： #content {margin-left:-100px;} 通常人们很少使用负margin但随后你会了解到，它能做的其实有很多。以下是...
margin为负值详解
热门推荐
你想要的都有
03-27 2万+
一、对元素自身的影响 1.margin-left,margin-right为负值 1）元素本身没有宽度，会增加元素宽度 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证</title> &...
margin负值5种应用
kopolwu的专栏
02-06 872
http://fed.renren.com/archives/517 最近做的项目中经常会用到margin的负值，这里就总结一下关于margin负值的5种使用及相关bug的解决。 1. 在流动性布局中的应用 　　如WordPress的两栏式不固定布局就是使用margin负值来实现的定位，属于左右margin负值在流动性布局中的应用。 　　左侧宽度固定 　宽
margin为负值的应用
u012148262的博客
01-23 1085
一、对自身的影响 当元素没有width或width为auto的时候，设置负值会让增加其自身宽度。 注意： margin-right也会增加宽度。 margin-top为负值不会增加高度，只会产生向上位移。 margin-bottom为负值不会产生位移，会减少自身的供css读取的高度，显示正常。 二、对文档流的影响 不会破坏文档流，后面的元素会紧贴补位。
转载：margin负值的应用
qq_42372534的博客
12-20 531
两头固定，中间自适应的布局，可以利用margin的负值来调整浮动元素的位置来实现。 结构如下： <div class="main"> <div class="content">我是内容</div> </div> <div class="fl">zuo</div> <div class="fr"&gt......
margin负值之美
04-17
而“margin负值之美”这个主题则深入探讨了如何巧妙利用负值`margin`来实现一些特殊的布局效果和设计创新。在本文中，我们将详细讨论`margin`负值的概念、用途以及它在实际项目中的应用。 首先，理解`margin`的基本...
CSS中的边界margin的取值为负值说明
09-25
让我们深入探讨一下CSS中margin负值的应用及其原理。 首先，理解margin的基本概念。在CSS中，margin是元素周围的空间，它分为上、下、左、右四个方向。默认情况下，margin设置为正值会使元素与其相邻元素之间产生...
CSS margin全面了解
09-27
本文将全面探讨CSS margin，包括其基本概念、负值的使用以及在流体布局中的应用。 首先，margin属性允许我们在元素的四周边缘设置空间。它接受长度值，可以是像素、百分比、em等单位，也可以是auto，用于自动分配...
用margin解决缩进问题
09-25
1. **兼容性**：虽然大部分现代浏览器都支持`margin`属性，但在一些较老的浏览器中可能存在问题，因此在实际应用中需要考虑浏览器兼容性。 2. **层叠与继承**：`margin`值可能会受到父元素或其他元素的影响，需要...
【css】负值margin的应用
richest_qi的博客
06-23 256
<body> <span id='s0' class='s'>hello world hello world</span><span>have a nice day</span><br><br> <span id='s1' class='s'>hello world hello world</span><span>have a nice day</span><br>
margin为负值怎么解释？
SCUhzs
10-01 3067
文章目录前言margin四值顺序margin表现margin为负值1.margin-left,margin-right为负值元素本身没有宽度元素本身有宽度2.margin-top为负值3.margin-bottom为负值 前言 margin设置为负值往往用于实现双飞翼布局、圣杯布局中。我本人对这些布局实现的原理还有点懵，故整理一下margin为负值的情况。 margin四值顺序 【1个值】margin: top|right|bottom|left; 【2个值】margin: top|bottom left
margin为负值产生的影响和常见布局应用
沉着前进
08-19 1万+
所以今天整理些margin：负数会对哪些元素或者定位产生影响、margin为负值在web布局中的应用做下总结。（不能说最全，我已经尽力收集整理） 一、margin为负值产生的影响 对于自身的影响 当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度，看下下面的例子 class="container"> class="box1">
margin负值在页面布局中有哪些应用？
IT修真院：初学者转行到互联网的聚集地
05-14 1010
这里是修真院web小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解web知识/技能，本篇分享的是： 【 margin负值在页面布局中有哪些应用？】 CSS盒模型中，margin是我们非常熟悉的一个属性，大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。在我们...
margin 负值 理论
zhuchunyan_aijia的博客
07-08 2571
当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移 当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。
【布局技巧】margin负值的运用
独特的懒人
08-14 446
使用场景: 像淘宝一样放在一个产品上的时候盒子会显示一个紫色的框子，但是当我们给所有的盒子边框，且浮动的时候。两个边框就会重叠，颜色就会很深，这里就给整个盒子margin-left:-1px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
margin负值问题
ll_0801xyz的博客
08-17 3213
margin
不为人知的margin负值的应用
weixin_44823731的博客
08-25 621
margin的负值的情况分为两种： margin-left、margin-top：当这两个的属性值为负值的时候，自身会根据负值的大小来向左和上方向偏移。 margin-right、margin-bottom：当这两个的属性值为负值的时候，自身的位置不会发生改变，但是会影响自己身后的元素。这两个为负值，相当于自己的宽度缩小（宽度缩小是表示自己占用的宽度变小，但是不会影响自身元素的显示。当负值到达-100%的时候，自身的就不占用宽度，如果由于宽度不够而导致的换行，就会偏移到原来的位置），导致后续的元素向自己偏移
margin负值的作用
01-31 83
1.有俩个边框，有不同的背景色，不管哪边高增加，另一边也变高 2、实现自适应 转载于:https://www.cnblogs.com/zhaobao1830/p/6358947.html
uniapp的margin
最新发布
07-16
需要注意的是，margin 属性还可以接受负值，用来设置负外边距，可以用来实现一些特殊的布局效果。另外，margin 属性还可以使用百分比值、em 值等作为单位。 希望以上解答对你有帮助！如果还有其他问题，请随时提问...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值