最新margin自述_margin分不开，网络安全高级工程师面试题-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84267735/article/details/138825467

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

通常情况下，我会帮助一些元素让他们之间产生距离，先来看一段代码：

<!-- HTML结构 -->
<div class="boxA">a</div>
<div class="boxB">b</div>

<style>
    /* css修饰 */
    div{width: 200px;height: 200px;}
    .boxA{background: palevioletred;}
    .boxB{background: royalblue;}
</style>

两个写好的DIV元素会从上到下显示，就是上图的效果，在这里我们会发现a的下方和b的上方紧紧挨在一起的，如果想让他们分开一些，可以给a添加一个margin

<style>
    /* css修饰 */
    div{width: 200px;height: 200px;}
    .boxA{background: palevioletred;margin:20px;}
    .boxB{background: royalblue;}
</style>

为什么会变成这个样子了呢，我们本来只想让下方有距离就可以了，但是怎么感觉不一样呢？这是因为我的写法是有很多种的，可以先来研究一下有哪几种写法。

首先，刚刚写的是margin:20px，在这里如果后面写一个值的话，代表了上下左右四个方向上都会添加20像素的距离

如果你写了两个值，那么第一个值代表上下距离，第二个值代表左右；

写三个值，第一个值代表上，第二个值代表左右，第三个值代表下；

写四个值，就分别代表上、右、下、左四个方向

参考下面的图例：

其实关于我的写法，还可以写单个方向的，使用margin-top、margin-left、margin-right、margin-bottom都可以实现。

div{width: 60px;height: 60px;}
.boxA{background: palevioletred;margin-left:10px;} /*左*/
.boxB{background: royalblue; margin-right:10px;} /*右*/
.boxC{background: green; margin-bottom:10px;} /*下*/
.boxD{background: orange;margin-top:10px;} /*上*/

如上图所示

元素A，在左边有10像素的距离，

元素B，在右侧有10像素距离（不过由于浏览器默认靠左排列，这里看不出效果）

元素C，在下方有10像素距离

元素D，在上方有10像素距离

等等？！好像哪里不对？

C和D之间好像只有10像素的距离，而不是我们期望的20像素。

好吧，我承认，这是我的问题。

当元素在垂直方向上（水平方向是正常的），两个元素，分别设置了margin-top和margin-bottom，我不会叠加这两段距离，而是把它们重叠在一起了。

这有可能会造成跟你的预期不符。以后写的时候要注意哦

通常情况下，我们只需要给一个元素设置距离就好了，例如：

<style>
    /* css修饰 */
    div{width: 200px;height: 200px;}
    .boxA{background: palevioletred;margin-bottom:20px;}
    .boxB{background: royalblue;}
</style>

这样就实现了a和b之间的距离，如果要想缩短他们的距离该怎么做呢？

你只要写负值，就能实现，就像下面这样

<style>
    /* css修饰 */
    div{width: 200px;height: 200px;}
    .boxA{background: palevioletred;margin-bottom:-50px;}
    .boxB{background: royalblue;}


### 给大家的福利


**零基础入门**


对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。


![](https://img-blog.csdnimg.cn/img_convert/95608e9062782d28f4f04f821405d99a.png)


同时每个成长路线对应的板块都有配套的视频提供：


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a91b9e8100834e9291cfcf1695d8cd42.png#pic_center)


因篇幅有限，仅展示部分资料


网络安全面试题


![](https://img-blog.csdnimg.cn/img_convert/80674985176a4889f7bb130756893764.png)


绿盟护网行动


![](https://img-blog.csdnimg.cn/img_convert/9f3395407120bb0e1b5bf17bb6b6c743.png)


还有大家最喜欢的黑客技术


![](https://img-blog.csdnimg.cn/img_convert/5912337446dee53639406fead3d3f03c.jpeg)


**网络安全源码合集+工具包**


![](https://img-blog.csdnimg.cn/img_convert/5072ce807750c7ec721c2501c29cb7d5.png)


![](https://img-blog.csdnimg.cn/img_convert/4a5f4281817dc4613353c120c9543810.png)

**所有资料共282G**，朋友们如果有需要全套《网络安全入门+黑客进阶学习资源包》，可以扫描下方二维码领取（如遇扫码问题，可以在评论区留言领取哦）~




**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.youkuaiyun.com/forums/4f45ff00ff254613a03fab5e56a57acb)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**