css负外边距怎么实现

发布时间:2022-03-10 16:05:28 作者:iii
来源:亿速云 阅读:119

这篇文章主要介绍“css负外边距怎么实现”,在日常操作中,相信很多人在css负外边距怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css负外边距怎么实现”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

    负边距介绍

    负边距的使用如下:

    #content{margin-left:-100px;}

    负边距通常在小范围使用。但是接下来你会看到,它能做的事情很多。下面是一些你应该知道的关于负边距的事情:

    他们是完全有效的CSS

    这不是在跟你开玩笑。W3C甚至都说,在外边框中使用负边距是允许的。

    负边距不是在hack

    这是尤其正确的。正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack

    它符合正常的文档流

    当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。所以付过你使用负边距把元素向上微调的话,所有后面的元素也会向上微调。

    它是相当好的兼容性

    负边距基本上被所有现代的浏览器支持(IE6的大部分情况也是)

    当使用了float之后,会有不同的表现

    负边距不是你平常使用的属性,所以使用的时候要格外小心。

    Dreamweaver不理解它

    负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢?与其共事呢?

    负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。

    在static元素中使用负边距:

    1.gif

    一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用负边距之后的情况。

    当一个static元素在top/left使用负边距时,它把元素向这个特定的方向拉,比如

    /*Movestheelement10pxupwards*/

    #mydiv1{margin-top:-10px;}

    但是当你将负边距设置为相对bottom/right时,它并不会把元素向下或右拉,相反,它会把后面的元素往里面拉,从而覆盖自己。

    /*

    所有在#mydiv1后面的元素都会向上

    移动10px,而#mydiv1一点都不会移动

    */#mydiv1{margin-bottom:-10px;}

    如果宽度没有设置,左右负边距会把元素向两个方向拉以增加宽度。在这里margin的作用相当于padding

    在浮动中使用负边距

    加入下面就是我们的html代码:

    <divid="mydiv1">First</div>

    <divid="mydiv2">Second</div>

    如果对一个浮动的元素使用负边距,它会产生一个空白,其他元素就可以覆盖这一部分。这个技巧可以很好地用户流式布局。比如有一列宽度100%,另一列有固定的宽度,比如说100px。

    #mydiv1{float:left;margin-right:-100px;}

    如果两个元素都使用了左浮动并且设置margin-right:-20px。#mydiv2会把#mydiv1看成宽度缩小20px(所以会覆盖一部分),但是有趣的是#mydiv1并不会有任何变化,而是依然保持原先的宽度。

    如果负边距和宽度一样大的话,它就会被完全覆盖掉。因为外边距,内边距,边框和内容加起来等于元素的宽度。如果负外边距等于元素的宽度的话,那么该元素的宽度就会变成0px。

    学以致用

    既然我们知道使用负边距在CSS2中是有效的,使用它可以给我们提供一些非常有趣的CSS技巧。

    把单个列表变成三列

    如果你有一个列表垂直方向太长了,为什么不把它分成几列呢?负边距可以让你在不增加任何浮动和标签的情况下完成。你会发现用负边距实现这个是多么地简单,就像下面:

    HTML:

    <ul>

    <liclass="col1">Eggs</li>

    <liclass="col1">Ham<li>

    <liclass="col2top">Bread<li>

    <liclass="col2">Butter<li>

    <liclass="col3top">Flour<li>

    <liclass="col3">Cream</li>

    </ul>

    CSS

    ul{list-style:none;}

    li{line-height:1.3em;}

    .col2{margin-left:100px;}

    .col3{margin-left:200px;}

    .top{margin-top:-2.6em;}/*theclincher*/

    通过对.top的添加margin-top:-2.6em。所有的元素会完美的对齐好。使用负边距会比使用相对定位好很多,因为你只需要给新的一列的第一个元素添加负边距即可。

到此,关于“css负外边距怎么实现”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. css负外边距是什么
  2. css如何利用负margin实现平均布局

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:CSS的字体单位px,em,rem和%怎么用

下一篇:CSS的clear:both清除浮动怎么运用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》