|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-6-9 17:28 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
首先请出我们祖传盒子图：
具备内容、填充、边框、边界这些属性，能包含其他元素的容器都是盒子。
在进行网页制作时都会遇到为元素设定边距的情况，边距又分为内边距和外边距，即 margin 和 padding。
margin 是盒子的外边距，即盒子与盒子之间的距离，而 padding 是内边距，是盒子的边与盒子内部元素的距离。
margin 和 padding 是在 html 中的盒模型的基础上出现的，
通过使用单独的属性，可以对上、右、下、左的外边距进行设置。
也可以使用简写的外边距属性同时改变所有的外边距。
margin 始终是透明的。
margin 通过使用单独的属性，可以对上、右、下、左的外边距进行设置。
即：margin-top、margin-right、margin-bottom、margin-left 。
margin 只有一个值表示上右下左，如果 margin 只有两个值第一个值表示上下，第二个值为左右。
margin有三个值 表示上左右下，margin 有四个值表示上下左右四个方向。
padding 属性设置元素的内边距，属性定义元素边框与元素内容之间的空间。
padding 属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
行内非替换元素上设置的内边距不会影响行高计算；
因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。
元素的背景会延伸穿过内边距。
margin 和 padding 的区别
我们以 DIV 为一个盒子为例，既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西。
而里面存放东西的区域我们给他起个名字叫 “content(内容)”，而盒子的纸壁给他起个名字叫 “border(边框)”。
如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，
所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫 “padding(内边距)”。
如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为 "margin(外边距)"。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） |
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-5-20 08:09:38
置顶卡
千斤顶
显身卡
发表于 2020-5-20 08:46:21
发表于 2020-5-30 20:28:32