CSS之边距与轮廓
本帖最后由 马黑黑 于 2022-1-10 09:31 编辑 <br /><br /><style>.dMain { margin:0 auto; padding: 10px; width:720px; border:3px double cadetblue; outline:3px double steelblue;outline-offset:1px; }
.dMain p {text-indent: 2em; margin:6px 0; }
.fBox1 {
margin: 0 auto;
width: 400px;
height: 100px;
border:1px solid olive;
display: flex;
}
.fBox1 div:nth-child(1) {
margin: 20px;
padding: 10px;
border: 1px solid chocolate;
width:50%;
}
.fBox1 div:nth-child(2) {
margin: 0;
padding: 0;
border: 1px solid tomato;
width:50%;
}
</style>
<div class="dMain">
<p>我们已经知道，任何web可视元素，即有外观的对象，都拥有边距，但你可能不知道元素还拥有轮廓。先来复习一下边距。</p>
<p>元素有两种边距：外边距和内边距。请观察以下示范的元素Son和Daughter在框内的表现：Son与父框之间有20px的外边距，内边距为10px，而Daughter既没有外边距也没有内边距——</p>
<div class="fBox1">
<div>Son - 儿子</div>
<div>Daughter - 女儿</div>
</div>
<p>外边距就是margin，是元素边框（border）以外的距离，可以理解为动物世界里领地意识下的社交距离，它是web元素与周边元素是否亲密接触的属性，为0则和周边元素可能亲个嘴——只是可能，恰巧周边某个元素的margin也为0时这事就不好意思啦肯定会发生。</p>
<p>内边距就是padding，是元素边框与里内元素的距离。如果边框是皮、内元素是骨头，那么，内边距就是皮下脂肪，骨感美皮下脂肪少甚至没有，所谓皮包骨，这是padding值太小甚至为0的缘故，丰满美则不然，皮下脂肪厚，即padding值大，皮与骨之间拉开距离，显得微胖、胖并对骨架有保护作用（因而年老之后风采依旧）。</p>
<p>一切都要合适才好：margin与padding之值多少，根据需要设定，一切服务于web的功能需求。</p>
<p>前面我们提到领地意识。margin可以视为元素这些动物的领地意识表现。但只是之一，属生活区域，还有个活动区域，叫轮廓，叫out-line。依然以上一个示范例子演示，不同的是，我们分别给Son和Daughter都加入了轮廓（outline）及其轮廓距离（outline-offset）：</p>
<div class="fBox1">
<div style="outline:1px dotted navy;outline-offset:10px;">Son - 儿子</div>
<div style="outline:1px dotted orangered; outline-offset:30px;">Daughter - 女儿</div>
</div>
<p>Son和Daughter的点状线框就是轮廓边框，从此往里到其边框（border）之间的距离是轮廓距离。再仔细观察Daughter轮廓边框的情况，它不仅侵占了Son的领地，还突破了父框的限制，是不是很霸道呢？呵呵，其实这是因为我们把Daughter的轮廓距离设置得大了一些的缘故，而轮廓（outline）及其轮廓距离（outline-offset）不是实体存在，意思是它不实际占地儿，只是虚张声势而已，换言之，与padding不同，元素的outline不计入自身的width值，与margin不同，元素的outline不会影响它与周边元素的距离。</p>
<pre> 轮廓的设置（语句与border无异）：
outline: 1px solid #ff0000;
outline-offset: 20px;
</pre>
<p>思考题：只许单独使用一个 div ，如何做出有四条边框线的效果？</p>
<p style="text-align:right;">二〇二二年一月十日 </p>
</div>
先不回答问题，先请教一下，outline不是实体存在，也就不是没法往里面填东西也无法渲染的吧，那么它到底是派什么用途的呢？ 可以突破父框边距，且对布局没什么影响，这个outline用来做边线倒是挺不错的呢{:4_187:} 黑黑辛苦了{:4_187:} 红影 发表于 2022-1-10 10:04
先不回答问题，先请教一下，outline不是实体存在，也就不是没法往里面填东西也无法渲染的吧，那么它到底是 ...
outline-offset是不能设置颜色、放东西之类的，outline则是可以设置大小、颜色、粗细。轮廓主要用于修饰元素的外部边缘，需要合理设置，它能被浏览器渲染出效果，比如题目提出的达成功能。 红影 发表于 2022-1-10 10:30
黑黑辛苦了
手掌辛苦！{:4_170:} 马黑黑 发表于 2022-1-10 10:31
outline-offset是不能设置颜色、放东西之类的，outline则是可以设置大小、颜色、粗细。轮廓主要用于修饰 ...
嗯嗯，一般边界就分得这么细，css还真很注重细节。 马黑黑 发表于 2022-1-10 10:32
手掌辛苦！
今天要熬腊八粥，手掌要搅动粥，的确辛苦{:4_173:} 红影 发表于 2022-1-10 11:13
今天要熬腊八粥，手掌要搅动粥，的确辛苦
传统是，到了腊八，就算开始过年了 红影 发表于 2022-1-10 11:13
嗯嗯，一般边界就分得这么细，css还真很注重细节。
很多大虾都说，开发浏览器不亚于开发一个操作系统。就是因为web制定的东东都是细节化了的。 马黑黑 发表于 2022-1-10 11:14
传统是，到了腊八，就算开始过年了
不管怎么进入过年时候了，还是开心的。 马黑黑 发表于 2022-1-10 11:16
很多大虾都说，开发浏览器不亚于开发一个操作系统。就是因为web制定的东东都是细节化了的。
嗯嗯，太不容易了。{:4_204:} 红影 发表于 2022-1-10 19:57
嗯嗯，太不容易了。
据说华为正在开发自己内核的浏览器。如是，我支持。 红影 发表于 2022-1-10 19:55
不管怎么进入过年时候了，还是开心的。
我们过两个年，太浪费时间，我觉得 还是抽空多上来看看，这些小辣椒都不会的{:4_198:} 小辣椒 发表于 2022-1-10 20:11
还是抽空多上来看看，这些小辣椒都不会的
学无止境 马黑黑 发表于 2022-1-10 20:12
学无止境
是啊，黑黑你会的太多了 马黑黑 发表于 2022-1-10 20:12
学无止境
黑黑，现在发现我css和html很容易混做，这次我发现，加框架里面的图片不能上下移动，我加了TOP: 没有效果出来，最后我就统统做了png，整体就没有很漂亮，后面有时间就加动图，这样可能效果会好一点
【流年-色彩】我们是相亲相爱的一家人
https://www.huachaowang.com/forum.php?mod=viewthread&tid=55940&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
据说华为正在开发自己内核的浏览器。如是，我支持。
好事情，跟在黑黑后面支持{:4_204:}