css-深刻理解margin和padding

时间 2019-12-14

标签 css 深刻理解 margin padding 栏目 CSS 繁體版

原文原文链接

最近一阶段重新学习了css，发现真的有不少不少的地方都是空白的，今天咱们来总结一下margin和padding的一些鲜为人知的秘密！css

一利用float和margin实现布局

咱们首先来实现一个两列示布局html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            float: right;
            background: red;
        }
        p{
            margin-right: 110px;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</body>
</html>

大概的效果是这样的布局

随着咱们总体的width不断改变p标签自动适应，这个也是咱们最长用的两列布局或三列布局的原理。性能

而后若是咱们有这种需求，咱们须要这种布局（如图）：学习

那么咱们通常怎么作呢？咱们可能会把全部的li都加上margin-left而后咱们在吧第一个li加上margin负给拉回来，这样子来实现布局，可是这种方法有不少不少的问题，咱们若是元素不是三个，变成四个或更多，咱们就须要每个都添加margin负拉回来，因此这种方法并不可取，咱们来看下面这段代码：测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div{
            width: 1200px;
            background: #eee;
            margin: auto;
        }
        ul{
            overflow: hidden;
            padding:0; 
            margin-right: -20px;
        }
        li{
            height: 200px;
            width: 386.66px;
            margin-right: 20px;
            list-style:none;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class='div'>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

咱们能够经过设置ul的overflow：hidden；而后margin－right负来控制容器，这样达到li不换行实现布局，其实作后一个li的margin被ul拉回来了spa

这门来作一个测试，咱们给全部的li加一个border，以后添加li的数量3d

border:1px solid #000;
box-sizing: border-box;

注意，必定要添加第二行代码限制width，而后多出的1px的border会把你的width撑开，这样子你的container就会由于比内部小于6px的大小使每行第三个li下去！code

效果以下：htm

这样咱们就可以获得咱们想要的布局啦，撒花！！！

有的时候咱们会遇到一些须要水平垂直居中的场景，必须作一个相似alert弹框提醒之类的，咱们须要水平垂直居中

说到居中，咱们第一的反应必定是定位，以后咱们top，left为50%而后margin负，这种方法也是你们比较熟悉的，可是惟一的问题就是咱们须要知道元素的高和宽改改变元素的margin负，这个也是这种方法的惟一弊端，下面咱们用margin：auto来实现元素居中。

代码以下：

<!DOCTYPE html>
<html>
<head>
    <style>
        span{
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin:auto;
            background: red;
        }
    </style>
</head>
<body>
    <span class='span'></span>
</body>
</html>

这样咱们就能够不须要元素的width和height的具体来改变margin负，而用margin：auto来实现了布局。

若是你不明白这种实现原理，建议去看看盒模型！

二margin重叠问题

首先咱们知道margin重叠只发生在block元素上（不考虑float和absolute），其次父元素和子元素重叠的时候父元素没有设置border－top或者padding－top。

最后还有一个比较少见的就是咱们的父元素和子元素的第一个元素不存在inline元素分隔。

注：margin－bottom的条件多一条就是父元素并无设置height

下面咱们来

    <div class='father' >
        <div class='son'>hello</div>
    </div>

        .father{
            background: red;
        }
　　　　　.son{
　　　　　　　margin-top:80px;
        }

咱们获得这样的效果

咱们给父元素添加了背景元素，子元素margin：80px，可是咱们并无看到子元素margin，效果就像是给父元素margin同样，咱们来改变style样式

　　　　 .father{
            background: red;
            margin-top: 80px;
        }
        .son{
            
        }

　　　　 .father{
            background: red;
            margin-top: 80px;
        }
        .son{
            margin-top: 80px;
        }

咱们发现效果是同样的，咱们获得结论，由于发生了margin合并，因此失效，那么咱们怎么才能获得咱们想要的子元素margin效果呢？

咱们只须要给父元素添加border-top:1px solid #fff;咱们获得效果以下

这样咱们就获得了咱们想要的效果了！，那么这个margin合并对于咱们开发有什么用？

咱们常规开发表单的时候，咱们习惯的是把出了第一个元素的全部元素都添加margin-top: 20px ,可是这种作法并非太好，由于咱们都知道数据基本上都是从后台查出来的，咱们并不知道会有多少条出局，可能空数据或者数据量过多就会形成布局变乱，footer紧贴input的样式发生，那么咱们就能够使用margin合并来解决这个问题：

   　　 .input{
            margin-top: 30px;
            margin-bottom: 30px;
        }

咱们把全部的li添加class为input，咱们利用margin合并实现两个li间距只30px的间距，这样就解决了这个问题！

下面咱们来讲一下padding

首先咱们说一下inline元素的padding，inline元素的padding会改变元素的width，height不会改变，可是会改变元素的背景颜色。什么意思呢？咱们来看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .span{
            padding: 0px;
        }
        .div{
            padding: 20%;
            border:1px solid #000;
        }
        .div span{
            display: block;
            width: 100px;
            height: 100px;
            float: left;
            background: red;
        }
    </style>
</head>
<body>
    <p>hello</p>
    <span>
        <span>123</span>
        <span class='span'>hello</span>
        <span>123</span>
    </span>
</body>
</html>

效果以下：

而后咱们改变.span的padding

padding: 100px;

随着咱们inline元素的padding改变，咱们发现元素的height并无撑开而是把上面的hello覆盖了。

结下来咱们来利用padding来实现两个效果图：

有时候咱们想实现最下面的效果，可是咱们用｜只可以实现最上面的效果：很少说直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            padding: 10px 6px 0px;
            border-left: 2px solid #000;
            margin-left: 12px;
            font-size: 0;
        }
    </style>
</head>
<body>
    <div>登陆｜退出</div>
    <div>注册 登陆</div>
    <div>注册<span></span>登陆</div>
</body>
</html>

这样咱们利用span标签就能实现分隔符号了，那么咱们用padding还能实现什么呢？

咱们经常有一些简单的样式，若是用图片可能会多多少少影响加载性能，虽然性能不是很大，可是若是咱们能用css实现的话何乐而不为呢？

咱们实现一个这样的效果图：

其实仍是比较简单的，咱们直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .span{
            width: 150px;
            height: 30px;
            padding: 15px 0;
            border-top: 30px solid;
            border-bottom: 30px solid;
            background-color: currentColor;
            background-clip: content-box; 
        }
    </style>
</head>
<body>
    <div class='span'></div>
</body>
</html>

这样咱们就实现了最基本的padding来写一些简单的button！