妙用负边距

一、左右负边距对元素宽度的影响

先来看这样一个例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>负边距相当于增加元素宽度</title>
    <style type="text/css">
        body,ul,li {
            padding:0;
            margin:0;
        }
        ul,li {
            list-style:none;
        }
        .container {
            height:210px;
            width:480px;
            border:5px solid #000;
        }
        ul {
            height:210px;
            overflow:hidden;
        }
        li {
            color:white;
            height:100px;
            width:100px;
            background-color:blue;
            float:left;
            margin-right:20px;
            margin-bottom:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
            <li>子元素3</li>
            <li>子元素4</li>
            <li>子元素5</li>
            <li>子元素6</li>
            <li>子元素7</li>
            <li>子元素8</li>
        </ul>
    </div>
</body>
</html>

讲这个例子之前,还要先了解一下浮动原理。

浮动原理:(以左浮动为例)所有子元素向左浮动。浮动框向左移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以子元素2向左浮动直到碰到子元素1的外边距为止。其他类推,当包含框无法容纳水平排列的浮动元素时,其他浮动元素向下移动。

例子中,container宽度为480。ul元素没有设置宽度,所以它的宽度是自动的,由它里面的文档流的宽度决定(高度与此类似)。各子元素宽度为100,右外边距为20。

所以父元素ul宽度=子元素1~4宽度之和 + 子元素1~4右外边距之和。

本例中ul宽度为480,刚好等于其父元素container之后,所以子元素5自动换行然后靠左浮动。

如果把container宽度改为460,这样由于水平宽度不够,子元素4就会向下移动。想让子元素1~4仍然水平排列,可以把最右边子元素的右边距设为0。单如果这些子元素是在模板中通过循环动态输出,在循环的时候还要判断哪些子元素是靠近右边界的,这样比较麻烦。此时负边距就发挥作用了。

本例中,把子元素的父元素ul的margin-right设置为-20。这样刚好可以抵消元素4的右边距20。于是container正好可以容纳下元素1~4。

可以看出,负边距的一个应用就是缩小边距。在实际应用中,可以给父元素设置负边距,用来抵消子元素在相同方向上的边距(前提是父边距没有设置宽度或为auto)。使得整个块正好可以容纳在固定宽度的上一级块级元素中。

改动1:container宽度为460,把子元素li右边距改为30。ul右边距为-30。

此时ul宽度为100*4+30*4-30> 460。所以子元素4要向下移动。

改动2:container宽度为460,把子元素li右边距改为30。ul右边距为-60。

此时ul宽度为100*4+30*4-60 = 460。

此时子元素4不用向下移动。只是子元素1到4之间的宽度超过container宽度,所以子元素4有部分在container之外。

二、负边距对浮动元素的影响

三、负边距对绝对定位元素的影响

绝对定位元素的top、right、bottom、left等值是元素自身的边界到最近的已定位祖先元素的距离。这个自身的边界指的是margin定义的边界。所以,如果margin为正时,元素边界是向外扩张的;如果margin为负,则它的边界是向内收缩的。利用这点,可以通过绝对定位方法来实现居中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>利用负边距和绝对定位实现居中</title>
    <style type="text/css">
        body {
            padding:0;
            margin:0;
        }
        div {
            width:150px;
            height:150px;
            background:#f00;
            position:absolute;
            left:50%;
            top:50%;
        }
    </style>
</head>
<body>
    <div>块元素绝对定位,left和top值为50%。顶点A距离top和left边距均为50%。若要块元素居中,应该是中心点B距离top和left边距为50。</div>
</body>
</html>

如果不设置负边距,则是块元素的定点A在居中的位置。若要块元素居中,应该是它的中心点B在居中位置。所以要把块元素向上移动自身高度的一半,同时向左移动自身宽度的一半。代码如下:

<style type="text/css">
        body {
            padding:0;
            margin:0;
        }
        div {
            width:150px;
            height:150px;
            background:#f00;
            position:absolute;
            left:50%;
            top:50%;
                        margin-left:-50px;
                        margin-top:-50px;
        }
    </style>

参考文献:本文参考了该文:

CSS布局奇淫巧计之-强大的负边距。

时间: 2024-10-05 06:17:28

妙用负边距的相关文章

负边距实现圣杯布局以及列等高

圣杯布局如下图所示, 图一 两边的内容宽度固定,中间栏宽度自适应.html代码如下, <div class="container"> <div class='main'> <p>main</p> <p>主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干内容主干

css负边距布局

负边距布局 .container { overflow: hidden; } .wrap { width: 100%; float: left; } .body { background: red; margin-left: 120px; margin-right: 150px; } .left { background: green; margin-left:-100%; float:left; width: 120px; } .right { background: yellow; marg

(转)CSS布局-负边距-margin

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的.本文非常基础,老鸟可以略过. 负边距在普通文档流中的作用和效果 那些没有脱离文档流的元素(指不是浮动元素也不是绝对定位.固定定位的元素等),其在页面中的位置是跟随者文档流的变化而变化的.看下面这幅图: 负边距对这些由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位

负边距在布局中的使用

负边距在布局中的使用 负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现 当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top.left后元素还占据原来位置不同 当margin-bottom.margin-right设为负值的时候,元素本身没有位置变化,后面的元素会下移.右移 看几个应用场景 绝对定位元素 当元素被设置为

负边距、三栏布局(圣杯布局、双飞翼布局)

首先来了解下 一.负边距在让元素产生偏移时和position: relative有什么区别? position:relative产生偏移时,他原来的位置不会脱离文档流的,即还占用原来的空间,但负边距产生偏移时它原来的位置并不占用空间: 例如下面的代码 Document *{ margin: 0px; padding: 0px; } .up,.down,.middle{ background-color: red; height: 100px; width: 100px; } .negative-

【CSS】 布局之剖析负边距

我们都知道,一个元素框的大小是由元素内容+内边距+边框+外边距来决定的. 关于内边距padding,内边距呈现了元素的背景,其设置值是不可以为负的. 而对于外边距margin,默认为透明,设置值可以为负,其实这也就是所谓的负边距. 下面我们来分析一下margin负边距的原理. 首先我们看看下面的布局: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4

CSS之固定定位,绝对定位+负边距,双飞翼布局,属性选择器,伪类选择器补,状态伪类选择器,相邻全部兄弟选择器,取非选择器,em与rem,变形效果

固定定位: 绝对定位+负边距 !!!!!!!!!!!!!!!!!!!超重要 负边距 双飞翼布局 属性选择器 伪类选择器 补 状态伪类选择器 相邻全部兄弟选择器 取非选择器 em与rem 变形效果 固定定位: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { height: 1200px; backgr

三列布局(浮动和负边距)

浮动大概思路是将前两个元素分别向左,向右浮动, 然后第三个自然就上来了. <div class="a"></div> <div class="c"></div> <div class="b"></div> .a{ float:left; width:50px; height:70px; background:orange; } .c{ float:right; width:5

可能用到的负边距应用

一.左右固定,中间自适应 HTML: <div class="main"> <div class="main_body">Main</div> </div> <div class="left">Left</div> <div class="right">Right</div>CSS: body{ margin:0; padding: