关于margin,padding,absolute,relative对布局的一些影响和建议

时间 2019-12-08

标签关于 margin padding absolute relative 布局一些影响建议栏目 CSS 繁體版

原文原文链接

---恢复内容开始---html

　　tip：下面的内容网上各类基本的使用状况不少，我基本不写了，主要是想到一些特别的使用的时候。时间宝贵，请直接跳后面。布局

　　一。简单探讨下各个东西的使用状况（全是以div测试）post

　　　　1）margin（外边距）学习

　　　　　　1.margin也有想positon同样的top，left，bottom，right，那么它的参照物是什么测试

　　　　　　　①：不涉及postion时，设置了margin属性的元素是以离他最近的四周的元素位置为参照物。自己不脱离文档流，不以自身在文档流中的位置为参照。spa

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <div id="father" style="width:600px;height:800px;margin-top:100px;border:2px solid black;">
        <div id="son1" style="width:200px;height:100px;border:2px solid red;"></div>
        <div id="son2" style="width:200px;height:100px;margin-top:100px;margin-bottom:50px;border:2px solid blue;"></div>
        <div id="son3" style="width:200px;height:100px;border:2px solid pink;"></div>
    </div>
</body>
</html>

　　　　　　　②有postion参与的状况下，1.离margin最近的元素的position：relative，会对margin产生影响，margin是根据relative的元素所在文档流的位置来定位的（而不是视觉上的它位移事后的位置）。设计

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <div id="father" style="width:600px;height:800px;border:2px solid black;">
        <div id="son1" style="width:200px;height:100px;border:2px solid red;position:relative;top:100px;"></div>
        <div id="son2" style="width:200px;height:100px;border:2px solid blue;margin-top:100px;margin-bottom:50px;"></div>
        <div id="son3" style="width:200px;height:100px;border:2px solid pink;"></div>
    </div>
</body>
</html>

　　　　　　　③position参与的状况下，margin周围的元素potion为absolute，margin是以离的最近的处于文档流中的元素定位的。3d

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <div id="father" style="width:600px;height:800px;border:2px solid black;position:relative;">
        <div id="son1" style="width:200px;height:100px;border:2px solid red;position:absolute;top:98px;"></div>
        <div id="son2" style="width:200px;height:100px;border:2px solid blue;margin-top:100px;margin-bottom:50px;"></div>
        <div id="son3" style="width:200px;height:100px;border:2px solid pink;"></div>
    </div>
</body>
</html>

　　　　2）padding（内边距）code

　　　　　　　　这个东西怎么说呢，从正常的思惟上讲，它不是在布局定位，由于它是边框和内容之间的距离。讲道理的话，整个元素应该包括边框，内边距，内容。然而呢，由于咱们关注是内容，因此个人确能够利用内边距来改变内容的位置，可是我以为把它当作一个特殊时候用于元素的特效比较好，好比背景图片能够延伸到内边距区，超出内容区。好比它在必定程度上能够撑大整个元素。在一些特定的特地的想法时，能够帮着干不少事。可是在布局里我仍是以为margin好，虽说要照顾元素大小，bug等，由于它更符合我逻辑上布局定位。而padding，更像是把内容在元素里恰当的放置一个位置。其实不少时候想尽办法，仍是有不少方式用2者实现相同的效果。怎么说呢，看你喜欢，固然有些margin，padding自身独有的特色，你就要对应状况用了。好比我能够用margin让一个div缩到别的下面，而padding可让背景漫延出内容区。so，我以为这都是各自特色的用法。若是有人和我说“你原来是用margin的呀，这样很差，它要顾及大小，正负值。。。。”我会说“我喜欢margin，而我用margin实现一样的效果，用它并无让用户感到慢了，不一样了。只是我更习惯用margin。”每一个东西它存在了，没被5年或者10年时间吞没了，它就有它的意义。htm

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
    <div id="father" style="width:600px;height:800px;border:2px solid black;">
        <div id="son1" style="width:200px;height:100px;border:2px solid red;"></div>
        <div id="son2" style="width:200px;height:100px;border:2px solid blue;padding-top:200px;">
            <label style="border:1px solid green;">这是内容区</label>
        </div>
        <div id="son3" style="width:200px;height:100px;border:2px solid pink;"></div>
    </div>
</body>
</html>

　　　　　3）至于absolute，relative我就不测试了，这个网上的解释多少都数不清了。布局时多注意relative是自身在文档流中的位置，而不是视觉上理论上所看到想象的位置。（同个元素里有多个同级的relative）

　　二。一些思考

　　　　1）能多考虑自适应的，应更多地为自适应思考下，怎么更好的布局一个元素。

　　　　2）我我的以为尽量地少用position，特别是absolute和relative，他们就特别会惹事知道吗。absolute自己的位置没掉了，要是复杂的布局可能就会让其余元素布局乱了，而他本身呢，像个幽灵同样，很随意的浮在文档流上，却又是定死在一个地方。而后还有relative，它本身的自己仍是在文档流占着位置，别人的位置是不会受到影响，但就是它这个不会消失多少恶心。咱们得想象着它在哪里还占着位置，位置是它的高宽，咱们下面或者附近元素的定位要去依据想象那个空白的位置去作布局，由于视觉上给你的是它移动过的位置，而像不少状况，好比margin，好比relative它本身，都是依据文档流中它的位置来定位的，布局复杂的话设计和维护多少折腾人。

　　　　3）absolute太自由了，要用个relative把它套起来，这样不一样状况下不会说让那个absolute乱跑，由于relative自己在文档流，relative移动是根据自己来的，而子absolute是根据父relative来的，这样这里的absolute是间接的依据文档流的位置来定位的，哎，这就很舒服，不太容易屏幕，布局什么的变了下，就瞎跑。

　　　　4）元素布局出现很奇怪的样子，和咱们想象中的不同了。不要急，要耐心，出去走下，发个呆。都是很能够的。

　　　　　　①你先从最里面的东西检查，好比div不少个嵌套，你先看最最最里面的那个div里面的元素，检查语法问题。padding是否是少了个d写成了pading，position是否是写成了postion，中英文字符等等。

　　　　　　②最里面的元素和它的父级之间在目前加的布局样式下，理论上是否是应该想象中的那个样子。（把那个父子级单独拿出来测试下，是否是正常的。）

　　　　　　③父子级没问题，不是检查祖父级和父级之间，而是去检查父级与父级之间有没有毛病。

　　　　　　④没毛病的话，再去检查祖父级，重复②③。

　　　　　　⑤若是还找不到毛病的话，我也不知道该怎么办了，发个呆先?点个外卖？打会游戏？.....总之先别让本身那么烦

　　　　6）其余的好比%，em等也对自适应更好了。。。　　

　　　　5）其余有些想不起来了，昨天太晚了，思考的也很乱。。。

　　　　note：

　　　　　　写博客只是用于记录学习，而后多给走过的路留下点脚印，也许能帮到和我同样比较菜的新人。固然了，我是很是水，若是路过的大神前辈，多多指教下我，其实对于自适应还有不少想要去了解去学的。