CSS布局 ——margin重叠_ty13438189519的博客-程序员宅基地

技术标签: css  margin  布局  

一、margin collapsing现象:
BFC(block formatting context)中相邻的两个block-level的盒,上一个box的下边距会跟下一个box的上边距发生叠加;margin collapse的三种情况:
1.相邻兄弟元素;
2.父级和第一个/最后一个元素;
3.空的block父子margin。
margin collapse的其他条件
1.父子重叠的其他条件
margin-top重叠:
1.父元素非块状格式化上下文(BFC)(例:overflow:hidden);
2.父元素没有border-top/padding-top设置;
3.父元素和第一个子元素之间没有inline元素分隔。
margin-bottom重叠:
1.父元素非块状格式化上下文(BFC)(例:overflow:hidden);
2.父元素没有border-bottom/padding-bottom设置;
3.父元素和最后一个子元素之间没有inline元素分隔;
4.父元素没有Height,min-height,max-height限制。
空block元素:
1.元素没有border设置;
2.元素没有padding值;
3.里面没有inline元素;
4.没有height或者min-height。
margin重叠的计算规则
1.正正取大值;
2.正反值相加;
3.负负最负值;
margin重叠举例:请移步寒冬博客:http://www.cnblogs.com/winter-cn/archive/2012/11/16/2772562.html

二、margin改变尺寸
1、margin与可视尺寸(clientWidth)
margin会影响可视尺寸但是以下两种情况不会:
a.适用于没有设定width/height的普通block元素;
b.只适用于水平尺寸。
2、margin与占据尺寸
a.block/inline-block水平元素均适用;
b.与有没有设定width/height值无关;
c.适用于水平和垂直方向

二、margin水平垂直百分比
普通元素的百分比margin都是相对于容器的宽度计算的;
绝对定位元素的百分比margin是相对于第一个非static父元素的宽度计算的。
二、深刻理解margin auto

如果一侧是定值,一侧是auto,auto为剩余空间大小
如果两侧均是auto,则平分剩余空间——即居中

img{
    width: 20px;
    margin: 0 auto;
}

图片不居中,此时图片是inline水平,就算有width,其也不会占据整个容器的行。

注意:就算容器定高,margin: auto 0 ;无法垂直居中,需要writing-model:vertical-lr更改流为垂直方向。
例如:

<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .father{
        height: 200px;
        width: 1000px;
        writing-mode:vertical-rl;
        background-color: green;
    }
    .son{
        height: 100px;
        width: 500px;
        margin:auto;
        background-color:blue;
    }
</style>
<body>
<div class="father">
        <div class="son">SON</div>
    </div>
</body>
</html>

这里写图片描述

三、负值margin的应用
1.margin负值下的两端对齐
原理:设定宽度的margin可以改变其元素宽度大小,
正值使宽度变小,负值使宽度变大

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box{
        width: 960px;
        margin: 0 auto;
        background-color: orange;
    }
    ul{
        overflow: hidden;
        padding: 0px;
        margin-right: -20px;
    }
    li{
        width:225px;
        height: 300px;
        margin-right: 20px;
        background-color:green;
        float: left;
    }
</style>
<body>
<div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
</div>
</body>
</html>

这里写图片描述

注意:ul 的 overflow: hidden;不可省略,实现ul BFC布局。
2.上下等高布局

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box{
        overflow: hidden;
        /* resize: vertical; */
        background-color: yellow;
    }
    .green, .orange{
        margin-bottom: -600px;
        padding-bottom: 620px;
        margin-left:100px;
    }
    .green{
        background-color:green;
        float: left;
    }
    .orange{
        float: left;
        background-color: orange;
    }
</style>
<body>
<div class="box">
        <div class = "green">Green</div>
        <div class = "orange">Orange</div>
</div>
</body>
</html>

这里写图片描述
关键技术:最外部div采用BFC布局,内部容器div设置大的底部边框,然后用数值相似的负外边距消除这个高度。将box设置为overflow: hidden;,列就在最高点被裁切,给每个元素设置620像素的底部内边距和-600像素的底部外边距,20像素的差值就在每个框底部形成可见的内边距。
3.margin负值下的两栏自适应布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box {
        float:left;
        width:100%;

    }
    p{
        margin-right:170px;
    }
    img{
        float:left;
        width:150px;
        margin-left:-150px;

    }

</style>
<body>
<div class="box">
        <p>Green,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪,我喜欢的喵咪</p>
</div>
<img src="1.jpg" alt="miao">
</body>
</html>

这里写图片描述
元素占据的空间会随着margin移动。img的负值margin恰好给图片预留了widt宽度。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ty13438189519/article/details/51997431

智能推荐

架构师集合之Spring的ApplicationListener(监听)_小明程序猿的博客-程序员宅基地

ApplicationListenerApplicationEventSpring监听机制spring源码

考研英语十一附双语阅读:脱欧了连巧克力都缩水?拿什么治愈你word英国人民_源代码•宸的博客-程序员宅基地

考研长难句85~88语法和长难句85,【真题例句】Yet there are limits to what a society can spend in this pursuit. (2003-4-5)句子结构:to是介词,引导后面的所有单词做limit的定语。高频词:limit,限制。pursuit,追求。然而在这样的追求下,一个社会能够承担的费用是有限的。语法和长难句86【真题例句】 Downshifting—also known in America as "voluntary

未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序问题的解决方案_fongleeko的博客-程序员宅基地

未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序问题解决方案报错各种原因和解决方法:没有安装数据访问组件,需要安装相应版本的数据访问组件AccessDatabaseEngine,64位操作系统安装32位的AccessDatabaseEngine_x86,反之。请参考:https://blog.csdn.net/u013780740/article/detai...

android 自动对焦pk,Android拍照机皇大PK i9100对决LT18i_七濑胡桃menherachan的博客-程序员宅基地

进入2011年,三星与索尼爱立信在高端手机领域的表现非常抢眼,其中三星推出的拥有1.2GHz主频处理器的i9100(GALAXY SII)堪称最强双核Android手机,而索尼爱立信LT18i(Xperia arc S)也是凭借1.4GHz高频处理器的强劲表现也赢得了单核Android手机之王的美誉。三星i9100与索尼爱立信LT18i若但从硬件来讲,作为目前Android阵营中双核与单核手机中的...

“中国神臂”震惊海外,14年研发打破西方垄断达到国际先进水平_公众号:肉眼品世界的博客-程序员宅基地

17日下午6时许,航天员聂海胜、刘伯明和汤洪波先后进入天和核心舱,标志着中国人首次进入自己的空间站。进入空间站后,神州十二飞行乘组需要进行长达6、7个小时的出舱活动,其中一个考验是,三个航...

随便推点

Kriging插值_GentlePink的博客-程序员宅基地

首先,克里金插值内涵比较丰富,如果要细究可以学上一学期。这里简单总结一下皮毛:(来自http://blog.sina.com.cn/s/blog_61556b670100t2ki.html 致谢

python数学计算优先级_常用数学函数和运算优先级_weixin_39617044的博客-程序员宅基地

在数学之中,除了加减乘除四则运算之外——这是小学数学——还有其它更多的运算,比如乘方、开方、对数运算等等,要实现这些运算,需要用到python中的一个模块:Math> 模块(module)是python中非常重要的东西,你可以把它理解为python的扩展工具。换言之,python默认情况下提供了一些可用的东西,但是这些默认情况下提供的还远远不能满足编程实践的需要,于是就有人专门制作了另外一些工具。...

Jenkins在Mac下执行python脚本报错问题记录:SyntaxError: Non-ASCII character ‘\xe5‘ ;ImportError: No module named_我是歪歪歪呀的博客-程序员宅基地

问题一:报错:No such file or directory系统找不到指定文件路径,这个问题真的找了好久,差不多花了一个上午的时间,真的要被气死解决方案:配置里的构建原先我选择的是“执行window批处理命令”,这个是win本选择的,mac需选择“执行shell”,修改后就好了~修改为:“执行shell”问题二:报错问题:SyntaxError: Non-ASCII character '\xe5' in file run_test.py on line 1, bu...

More Effective C++ (条款21:利用重载技术避免隐式类型转换)_Unique-You的博客-程序员宅基地

1. 正如条款19和条款20所言,临时对象的构造和析构会增加程序的运行成本,因此有必要采取措施尽量避免临时对象的产生.条款20介绍了一种用于消除函数返回对象而产生临时对象的方法——RVO,但它并不能解决隐式类型转换所产生的临时对象成本问题.在某些情况下,可以考虑利用重载技术避免隐式类型转换.2. 考虑以下类UPInt类用于处理高精度整数:class UPInt{public: UPInt...

linux 装机命令,linux常用装机命令_玉米真可爱的博客-程序员宅基地

防火墙:systemctl stop firewalldsystemctl disable firewalldsystemctl list-unit-files | grep firewalldftp服务启动ftp和开机自启动命令/bin/systemctl start vsftpd.servicesystemctl enable vsftpd.serviceps -ef |grep ftpsy...

Linux为啥dns为啥安装不了,[dns] linux dns 安装配置_weixin_39999532的博客-程序员宅基地

[dns] linux dns 安装配置作者:flymasterqq:908601287blog:http://www.cnblogs.com/flymaster500/1.yum install -y bind2.不要安装bind-chroot(安装了文件配置就在/etc/var/chroot/etc/下面)3.dns配置文件位置:/etc/named.conf/etc/named.rfc191...

推荐文章

热门文章

相关标签