可能用到的负边距应用

一、左右固定,中间自适应

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:0;
        min-width:600px;
    }
    .main{
        float:left;
        width:100%;
    }
    .main_body{
        margin:0 210px;
        background:#888;
        height:200px;
    }
    .left,.right{
        float:left;
        width:200px;
        height:200px;
        background:#F60;
    }
    .left{
        margin-left:-100%;
    }
    .right{
        margin-left:-200px;
    }二、负边距+定为水平居中html
<div id="test"></div>css:
    body{margin:0;padding:0;}
    #test{
        width:200px;
        height:200px;
        background:#F60;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

三、多列等高
  <div id="wrap">
        <div id="left">
            <p style="height:50px">style="height:50px"</p>
        </div>
        <div id="center">
            <p style="height:100px">style="height:100px"</p>
        </div>
        <div id="right">
            <p style="height:200px">style="height:200px"</p>
        </div>
    </div>CSS:
   body,p{
        margin:0;
        padding:0;
    }
    #wrap{
        overflow:hidden;
        width:580px;
        margin:0 auto;
    }
    #left,#center,#right{
        margin-bottom:-200px;
        padding-bottom:200px;
    }
    #left {
        float:left;
        width:140px;
        background:#777;
    }
    #center {
        float:left;
        width:300px;
        background:#888;
    }
    #right {
        float:right;
        width:140px;
        background:#999;
    }
    p {color:#FFF;text-align:center}
时间: 2024-10-23 17:22:20

可能用到的负边距应用的相关文章

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

圣杯布局如下图所示, 图一 两边的内容宽度固定,中间栏宽度自适应.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

绝对定位和负边距的应用

1.绝对定位+负边距 解决垂直居中的问题 1方法: a:父容器加相对定位 b:给字元素加绝对定位 c:top left:50% d:margintop(height),marginleft(width)取子元素的一半 2.代码举例 <style> #father{ height: 200px; width: 250px; background-color: red; margin: 0px auto; position: relative; } #son{ height: 100px; wid