CSS之边距与轮廓

马黑黑

我们已经知道，任何web可视元素，即有外观的对象，都拥有边距，但你可能不知道元素还拥有轮廓。先来复习一下边距。

元素有两种边距：外边距和内边距。请观察以下示范的元素Son和Daughter在框内的表现：Son与父框之间有20px的外边距，内边距为10px，而Daughter既没有外边距也没有内边距——

Son - 儿子

Daughter - 女儿

外边距就是margin，是元素边框（border）以外的距离，可以理解为动物世界里领地意识下的社交距离，它是web元素与周边元素是否亲密接触的属性，为0则和周边元素可能亲个嘴——只是可能，恰巧周边某个元素的margin也为0时这事就不好意思啦肯定会发生。

内边距就是padding，是元素边框与里内元素的距离。如果边框是皮、内元素是骨头，那么，内边距就是皮下脂肪，骨感美皮下脂肪少甚至没有，所谓皮包骨，这是padding值太小甚至为0的缘故，丰满美则不然，皮下脂肪厚，即padding值大，皮与骨之间拉开距离，显得微胖、胖并对骨架有保护作用（因而年老之后风采依旧）。

一切都要合适才好：margin与padding之值多少，根据需要设定，一切服务于web的功能需求。

前面我们提到领地意识。margin可以视为元素这些动物的领地意识表现。但只是之一，属生活区域，还有个活动区域，叫轮廓，叫out-line。依然以上一个示范例子演示，不同的是，我们分别给Son和Daughter都加入了轮廓（outline）及其轮廓距离（outline-offset）：

Son - 儿子

Daughter - 女儿

Son和Daughter的点状线框就是轮廓边框，从此往里到其边框（border）之间的距离是轮廓距离。再仔细观察Daughter轮廓边框的情况，它不仅侵占了Son的领地，还突破了父框的限制，是不是很霸道呢？呵呵，其实这是因为我们把Daughter的轮廓距离设置得大了一些的缘故，而轮廓（outline）及其轮廓距离（outline-offset）不是实体存在，意思是它不实际占地儿，只是虚张声势而已，换言之，与padding不同，元素的outline不计入自身的width值，与margin不同，元素的outline不会影响它与周边元素的距离。

		轮廓的设置（语句与border无异）：
		
			outline: 1px solid #ff0000;
			outline-offset: 20px;
			
	

思考题：只许单独使用一个 div ，如何做出有四条边框线的效果？

二〇二二年一月十日    

红影

先不回答问题，先请教一下，outline不是实体存在，也就不是没法往里面填东西也无法渲染的吧，那么它到底是派什么用途的呢？

红影

可以突破父框边距，且对布局没什么影响，这个outline用来做边线倒是挺不错的呢

红影

黑黑辛苦了

马黑黑

红影 发表于 2022-1-10 10:04
先不回答问题，先请教一下，outline不是实体存在，也就不是没法往里面填东西也无法渲染的吧，那么它到底是 ...

outline-offset是不能设置颜色、放东西之类的，outline则是可以设置大小、颜色、粗细。轮廓主要用于修饰元素的外部边缘，需要合理设置，它能被浏览器渲染出效果，比如题目提出的达成功能。

马黑黑

红影 发表于 2022-1-10 10:30
黑黑辛苦了

手掌辛苦！

红影

马黑黑 发表于 2022-1-10 10:31
outline-offset是不能设置颜色、放东西之类的，outline则是可以设置大小、颜色、粗细。轮廓主要用于修饰 ...

嗯嗯，一般边界就分得这么细，css还真很注重细节。

红影

马黑黑 发表于 2022-1-10 10:32
手掌辛苦！

今天要熬腊八粥，手掌要搅动粥，的确辛苦

马黑黑

红影 发表于 2022-1-10 11:13
今天要熬腊八粥，手掌要搅动粥，的确辛苦

传统是，到了腊八，就算开始过年了

马黑黑

红影 发表于 2022-1-10 11:13
嗯嗯，一般边界就分得这么细，css还真很注重细节。

很多大虾都说，开发浏览器不亚于开发一个操作系统。就是因为web制定的东东都是细节化了的。

红影

马黑黑 发表于 2022-1-10 11:14
传统是，到了腊八，就算开始过年了

不管怎么进入过年时候了，还是开心的。

红影

马黑黑 发表于 2022-1-10 11:16
很多大虾都说，开发浏览器不亚于开发一个操作系统。就是因为web制定的东东都是细节化了的。

嗯嗯，太不容易了。

马黑黑

红影 发表于 2022-1-10 19:57
嗯嗯，太不容易了。

据说华为正在开发自己内核的浏览器。如是，我支持。

马黑黑

红影 发表于 2022-1-10 19:55
不管怎么进入过年时候了，还是开心的。

我们过两个年，太浪费时间，我觉得

小辣椒

还是抽空多上来看看，这些小辣椒都不会的

马黑黑

小辣椒 发表于 2022-1-10 20:11
还是抽空多上来看看，这些小辣椒都不会的

学无止境

小辣椒

马黑黑 发表于 2022-1-10 20:12
学无止境

是啊，黑黑你会的太多了

小辣椒

马黑黑 发表于 2022-1-10 20:12
学无止境

黑黑，现在发现我css和html很容易混做，这次我发现，加框架里面的图片不能上下移动，我加了TOP: 没有效果出来，最后我就统统做了png，整体就没有很漂亮，后面有时间就加动图，这样可能效果会好一点

【流年-色彩】我们是相亲相爱的一家人
https://www.huachaowang.com/foru ... 40&fromuid=4275
(出处: 花潮论坛)

马黑黑

小辣椒 发表于 2022-1-10 21:12
黑黑，现在发现我css和html很容易混做，这次我发现，加框架里面的图片不能上下移动，我加了TOP: 没有效果 ...

这个我看了。

关于CSS：它在论坛可以用页内嵌入式和行内嵌入式书写——

① 页内统一写自己帖子需要的CSS代码：

<style type="text/css">
.myDiv {
    position: relative;
    left: -200px;
    top: 50px;
   width: 1000px;
    height: 460px;
    color: #000;
   border: 2px solid #ccc;
}
</style>

上面，写了一个自定义的名叫 myDiv 的CSS样式表，你应该能看懂。然后，HTML代码调用上面的CSS样式表：

<div class="myDiv">
    <!--  这里是帖子其余代码  -->
</div>

② 在 HTML 相关标签代码直接使用CSS，你用过的，下面的HTML代码例句，红色部分就是行内嵌入式的CSS代码：

<div style="position: relative; left:-200px; top: 50px; width:1000px; height: 460px;color:#aaa; border: 2px solid #aaa;">
    <!-- 这里是帖子其他代码 -->
</div>

红影

马黑黑 发表于 2022-1-10 20:00
据说华为正在开发自己内核的浏览器。如是，我支持。

好事情，跟在黑黑后面支持