前端中padding什么意思

那在了解了这样的一个核模型的四层结构之后呢，我们就要开始来学习一下怎么去设置这每个层的这样的一个尺寸，让它产生一个效果 啊。这里呢我们要先说一下，就是我们这个演示过程中啊，主要就是以这个会计元素作为一个演示，因为虽然所有的这个标签，这个 html 元素标签，他都遵循和模型的这样四层的一个结构这样的一个模式， 但是呢由于行内元素啊，他自己有个特殊性嘛，然后呢就是你在设置这些东西的时候，他可能就是表现的不那么明显，所以呢我们用这个会计元素就非常的明显，非常的直观。然后呢就是后面也会跟大家去提一下这个 行内元素，他去设置这些东西的时候啊，大概是一个怎么样的一些不一样的一个情况。那合模型呢，总共有四层，但是其实 其中一层的设置呢，我们之前已经学习过怎么去设置了，就是这个包的就是边框这一层，那我们可以看到这样的一个代码，我们可以 把这个放大一点啊，那其实这个代码中呢，我们就已经设置了这样一个 parent class with parent 这样一个元素的一个边框的一个效果。那这个边框呢就是我们在核模型里面介绍的这个边框层， 这个边框层呢也是核模型的这四个层里面唯一有样式的那一层。那另外三层，像这个 magic 外编剧、 petting 内编剧，还有这个 content 这个内容区域，那其实这三层呢都是没有样式的，你像 margin 和 padding 呢，是非常明显的，它就是一个空间，一个距离的一个作用，它就是为了产生距离，产生间隙。那 content 这个区域呢？可能有些同学会觉 会有点奇怪，因为我们之前介绍过那个背景颜色，对吧？其实有些同学会认为背景颜色可能就是 continent 的它的一种样式。背景颜色这个东西呢，其实准确来说它是一个背景当中的一种， 因为我们这个盒子啊，它是可以设置背景的，那背景的这个区域呢，它其实覆盖范围是可以改变的， 你也可以只覆盖这个框团的区域，也可以包含比如说整个包的这个区域。背景这个东西，它不仅仅可以设置颜色，也可以设置图片，可以设置渐变颜色等等。这个东西呢，它不能算是某个这样的某个层的它自己的一个样式。那我们这个 背景啊，这个背景的这个范围的覆盖啊，我们可以来看一下，他是通过哪个属性来设置的呢？他是通过这样的一个属性叫做 background clip 啊， background clip， 那他的一个默认值呢？就是这个 border box， 我们可以看到啊，这个黑色的，半透明的黑色的色块，其实就是这个背景区域所覆盖的范围。那其实说覆盖呢，其实不太准确，应该正常来讲，他既然是背景的话，他其实应该是被这个 上面的这些层给覆盖住的，那我们这里呢，是作为演示啊，所以让他在上面这样子看起来更明显，更直观一点。那所以他默认的情况下呢，这个背景的这个区域，背景的区域他是覆盖到 这个边框这个区域开始到内部的所有的这个区域，也就是说其实我们如果是按默认的状态去设置一个元素的这个背景的话，他的一个范围，边框的这个宽度的范围都包括在 内，也就是边框都是盖在这个背景上的背景的这个区域上的，那如果我们设置成这个 padding books， 那么他只会 只会从这个边框内开始，也就是这个整个的 padding 内编剧的区域开始，然后再包含这个内部的内容区 content 这个区域，那最小的呢，肯定就是这个 content books 啊，它只包含 这个内容区啊，所以这个背景的区域呢，是可以通过这三个值来进行调整的，让这个背景的区域呢，覆盖的范围不一样。 那接下来呢，我们就来先看一下啊，这个 margin 和 padding 是如何去设置的，然后我们顺便试一下这个 background clip 这样的一个属性的作用。那这个 margin 和 padding 呢，它的设置其实跟我们之前讲过的那种 拆分的属性的设置是一样的，它可以设置一个值，两个值、三个值和四个值，因为其实我们可以看到它这种都是四个方向的嘛，对吧？它这个外边距上面、下面、左边、右边，它都是有四个方向的，内边距也是一样的，跟这个边框是一样的， 都是有四个方向的。那所以呢，其实我们可以非常简单的用我们之前学过的这种逻辑来进行设置，那我们这里呢？呃，先给这个这里设置一个 子元素，那我们子元素呢，我们叫 class， 我们就叫做他叫做 child 吧， 然后我们这里把它放大一点啊，再放大一点，那这里呢，我们已经设置这个 parent 这样的一个样式，那 parent 这个类呢？它这里因为设置了这个宽度嘛，然后设置了它的这个颜， 所以呢他我们这里能看到他，因为这样的话呢，就相当于我们设置了一个核模型当中的就只设置了这样的一个边框这一层，那边框这一层他有宽度了，那是不是他我们就能看到他了？那接下来呢，我们就去设置一下这个紫元素啊， class child， 那这个紫元素呢，我们给他设置一个宽度一百 px， 然后高哦高度一百 px 宽，宽度也是一百 px 吧。然后呢我们也给他去设置一个边框吧，边框叫做 我的，我们给他设计个绿色的边框吧，那看到这样的一个效果之后呢，我们要开始去设置这样的一个外编剧啊，我们先试一下这个外编剧，那外编剧的话呢是 margin， 对吧？那这个 mlg 的话呢，也是我们刚才说的，他可以设置一个值，两个值、三个值和四个值，那四个值的话呢，肯定就是上右下左这样的一个逻辑，那一个值的话呢，就四个边的这个宽度都是一样的，就是这个外边距的宽度，那比如说我们设置一个十 x， 哎，你会发现他这个东西就会被撑开了啊，撑开了，因为复元素啊，复元素他他在没有设置这个具体的某一个具体的数值的时候，他是会， 他是会被这个内部的这个子元素内容给撑开的嘛。那我们这个宽度的这个 fit content 设置呢，其实就是为了让这个复元素的宽度跟随这个内部元素的这样的一个整体的一个宽度， 看到这个马卷这样已经起效果了，我们就看到他四个方向都是一样的这样一个宽度给撑出来，对不对？那假如说我们设两个值，比如说我们设成不一样的，那这里就是前面这个是上下， 后面这个是左右，这个逻辑我想大家现在应该还是记得的，对吧？然后我们再设置三个值，对吧？第一个肯定是上，然后对应最后一个是下，然后中间这个呢，就是左右四个值的话呢，那就是 这样的一个关系啊，上右下左，你可以对应看一下，他是不是上最少，然后左边这个最最最大啊，一百 px， 是不是他就呈现这样的一个状态，对吧？所以这个 margin 的话呢，他就是这样的一个逻辑啊，包括 padding 其实也是这样的。然后呢，其实你可以单独去设置某一边吗？ 比如说麻君 top， 我们给他设置一个三十 px， 那你这里的话呢，就相当于把前面这里的设置给覆盖了嘛，对吧？所以他这里就变变大了一些啊，这空间就变大了一些。然后这个麻君呢，其实还有个很 特别的用法，就是假如说啊，我们这里啊，我们这里只留这样一个 magic top， 假如说你给他一个负值，他其实是会产生一个 这样的一个反方向的移动的这样一个效果，一般来讲我们也很少用，但是呢，大家需要知道有这样的一种用法，那 padding 的话呢，我们就更容易了解了啊，知道了 margin 其实用 padding 就非常简单了，比如说我们这个，呃 margin， 我们还给他先设一个简单的 margin 出来是 px， 然后我们 padding， 而是二十，然后二十的话呢，我们这里要给他去设计一个呃，这样一个 background color， 然后设计一个 blue 吧， 我们要通过这个这个东西啊，来看一下他这个 padding 的一个区域的一个效果。那我们这里呢，我们刚才讲了，他这里 background clip 这个属性的，他默认是 board box， 那这样的话呢，我们 是看不出来这个 padding 的效果的，除非我们在里面去放一个文字，这样我们是能看得出来，对吧？但是呢，如果我们可以用这个 background color 把它这个改一下，其实我们也能让他看出来，直接看出来这个 pad padding 的效果， background clip 我们就改成这 content box， 哎，你就看到了这样的一个区域就变成了这么小啊，他这个背景颜色呢，就只作用于这样的一个内容区域了。然后呢 padding 也是一样，我们可以去单独的去给他设置 某一个，比如说 pad in top， 我们来一个一百 p x， 哎，他就会变成这样的一个效果啊，他就这个距离就会变得很高啊。 pad 这个属性的话呢，也同样啊，跟着 mojing 一样，他一到四个值也是可以设置的。我这里呢就不重复演示了，大家自己呢可以去试一下。

欢迎来到默然说话的课堂这一家呢给大家呢介绍瑞编剧属性啊，就是我们的拍顶啊。拍顶是吧？ 呃类编剧呢就叫英文单词拍定啊，那么我们拍定的话呢其实也就是 跟我们前面讲过的一样啊，就是称为锐编句啊，锐编句的位置呢就是从内容是吧？啊到这个边框之间的一个间隔啊，那么这个间隔呢也同样有四个方向啊，我们这里呢也给大家列出啊， padding top， padding right， 拍定 bot 还有拍定 left， 当然他也提供了一个拍定的这样一个综合的属性啊，就是我们平时用的比较多的应该也就是拍定吧啊呃然后他负的值呢应该就是速 值啊，带橡树单位是吧？啊它是一个距离啊它是一个距离单位那值呢也同样是可以有呃一个值是吧？啊那就是四边都有啊，就是这个 pad 嘛啊 四边都有，然后两个直呢就是第一个直是上下，第二个直是左右啊，三个直呢就是第一个是上， 第二个是左右，然后第三个是下对吧？啊那么这个是关于我们牌顶的呃大家注意一点呢，就是牌顶是不能使用复制的啊，就是 我的路已填充不可能成负的是吧？啊把边框给掏空了啊，没有这种说法是不是啊，所以这点呢大家一定要注意啊这个问题是吧。 好，那么这一讲呢我们就讲到这个地方啊，我是默然说话啊带领大家呢进入陌生的边城世界啊。呃谢谢大家。

今天记录一下内边句 panda 的 相关知识点，内边句 panda 一 共有四个属性，分别是 panda， top， right， bottom 和 left， 对 应的是上右下、左内边句。那现在咱们演示一下 潘金杠 top， 我 给一个十 p x， 现在去页面看一下刷新，那文字就和上边具有十 p x 的 边距，那在咱们的合模型里，这页这里就可以看到上面是十 ping 杠 right， 十 p， 二十 ps， 刷新，那看咱们的核模型，右边就有二十 ps 的 编剧，然后我把鼠标放在这里，这上面也会显示这个绿色的编编剧 pending 杠 bottom 写上三十 ps， 刷新，那我把鼠标放在这里，也可以看到下边的内边就变成了三十 panda 杠 left， 四十 ps， 刷新，那咱们把鼠标放在这里，可以看到左边是四十 ps 的 内边距，然后它也有复合写法，复合写法就是 panda 可以写一个值，两个值，三个值和四个值，一个值就是四个内边角，都是对应的值。然后两个就是上下和左右三个值。有一点特殊，就是上下 是单独设置的，中间这个值是设置的，左右四个值分别设置的是上右下，左十 p x， 二十 p x， 三十 p x， 四十 p x。 好， 现在去页面看一下 刷新。盒子应该是不动的，因为和咱们刚才设置的是一样的，那现在把鼠标放在这个盒模型上，可以看到内边距的尺寸。十二十，三十四十。好，截图保存。

前段开发小技巧， m t 伪类用来选择没有内容的元素，这里有两个比较有用的使用场景，一是可以用来隐藏内容为空的元素，这个 div 有 派定样式， 所以即使没有内容也会占据一定高度。在 m t 伪类里设置 display 为 n 就 可以不显示这个 div 了。 二是数据列表中没有数据时，可以给出文本提示。这个 div 里包含了一个数据列表，如果没有数据的话，可以在 m t 伪类的 after 伪元素里设置暂无数据的文本提示。

马枕是编剧， party 是填充，设置一下编剧，编剧默认是零。把 div 五的编剧设置成三十项数， 可以看到 div 五的外围被撑开了，说明上下左右的编剧都设置成了三十像素。可以对每个编剧分别进行设置，取消每个编剧的设置， 只把左边距设置成三十像素看一下，在设置 一下右边距， 设置上边句， 设置下边句，再看一下趴定，把趴定设置成三十像素， 可以看到 div 五里面被撑大了。可以对每个趴定分别进行设置，取消每个趴定的设置。 把左面趴定设置成三十像素看一下，再设置一下右边的趴定， 设置上面的 party， 设置下面的趴顶。 到这里就可以把 martin 和 padding 都弄明白了。

哈喽，大家好，我是小薇。上一期我们讲了布德拉六斯数线，这一期我们来学习一下马给和拍点。马给是一个外边句，他单一个盒子与另外一个盒子要产生距离的时候，我们可以用到马给。 如何设置外边去呢？如果我们需要对上面去进行设置，我们就给他设置 marking 干透吧，是 px。 如果是右边句，我们就给他设置 mark right。 如果是下面句，我们就给他设置 marking but。 如果是左边句，我们就设置 marking left。 然后 liking 的话也有四个显示的参数。如果是一个参数，他代表的是上下左右的外边距，都是相同的值。如果是两个 参数，第一个代表的是上下的外面句，第二个代表的是左右的外面句。如果是三个参数，第一个代表的是上面的外面句，第二个代表的是左右的外面句，第三个代表的是下边的外面句。 如果是四个参数，第一个代表的是上边句，第二个代表的是右边的外边句，第三个代表的是下面的外边句，第四个代表的是左边的外边句。也就是从上开始，然后顺时针方向依次进行设置。 我们来说一下拍点。拍点是一个内边距，他是指内容与盒子之间的距离。我们也可以进行设置他的 四个方向的值。开店的话和 money 是一样的，也是有四种形式的参数， 这里就不过多讲了。然后这里面要注意一个点是，如果是把你设置的是美颜放出的话，那设置的时候这盒子会呃水平。剧中 要注意的一点是，如果要设置发给零凹凸的话，这个盒子必须是会计元素 发根属性和派对属性。今天就将就到这，下期再见。

其实很多时候八股文是你们安的名字，他本来这些知识就在那，本来就是应该学习的这些知识，但是呢由于很多同学吧，他平时做的活吧，就是偏低端的一点的活，所以说他觉得这些知识用不上，于是呢给他取了个名字叫八股文。这些知识是很重要的。 明白明白。就是初略看一下，感觉这些自己基本上都能半斤八两吧，就是说可能不能说说的很细什么的，但是大概一个意思基本上能够扯个有的没的，还能扯一下。嗯。 呃，比方说像那个 d n s 这一块，比如说他要优化的话，你怎么去优化？嗯， d n s 的 话这个比较常见的，像在 h t l 那 边有一个 d n s 一个域解析嘛？嗯，它可以让域名换 ip， 然后可以节省这一个来回的一个 t t l 的 一个时间。嗯嗯，对。 呃。然后他还可以说有一些场景，你可能有二三级的域名的话，他可以再也是利用这个域解析一个能力，把你的后置电路的域名也帮你一起解析一下。其次呢他有个缓存嘛， dns 的 话他有本地缓存， 然后还有一些是运营商 dns 或者说 dns 可能被污染了，在 dns 被污染的时候的话了解的很详细的。那这个 hp 二的话带来了就是哪些变化啊？ 其实自己曾经有背过一段时间，包括一点零、一点一二以及三点零。嗯，然后 hd 二的话它应该主要说的是一个互联网推送跟一个多路互用，这两个记得印象比较深一点。嗯，多路互用它是解决什么问题啊？多路互用是解决什么问题？呃， 忘记了，哈哈哈。忘记了，呃，就是像这东西吧，他不全是八股文。我跟你说，我以前咱们一个学生，就是我的课程里面都聊过这个一个场景，咱们一个同学，他以前在他们公司里边就遇到了这样的一个问题，就是一个性能问题，这个性能问题呢，他又不能去上 scp 二， 那么他们就借鉴了 atp 里边很多东西，然后呢在 atp 一 点一的版本下去实现了一些性能的优化。那么如果说你这一块的知识没有掌握准确的话，可能在当时就不会想到会有这种一个方案。比方说简单举个例子，比方说，呃，输入，输入是要解决那个乱序问题嘛，对吧？传输了乱序问题， 因为 atp 一 点一呢，他处理不了乱序问题，所以说他传输呢，必须前一个请求跟后一个请求就是同一个连接里边响应顺序必须要跟发送顺序要一致。 是的，不然的话他的乱序问题他解决不了，因为他数据包是没有编号的。那当时的那个哥们他遇到一个啥问题呢？他遇到了，也就是在同一个 webshop 里边，他有很多很多的杂七杂八的数据都要通过同一个链接去发送，那么这个顺序他是不一致的，他不一致的这个顺序的话，他要解决这个顺序，他就借鉴了这个多路互用的这么一个能力啊，然后通过这个 包头，对吧？分成小包包头去进行那个回数，这个包是到底是属于哪一个块的？哪一次那个，呃，请求的包括这个 atp 二里边不是个头部压缩吗？对吧？嗯，之前哥们一个项目里边，他那个请求头里边和响应头里边加了很多的一些字，定义字段加了一大堆， 那么这一块因为他们请求特别多，打开页面的话有几百个这样的一个请求，那么他就借鉴了 atp 二里边的一个头部的能力，把这个头部呢就通过这个一个字典表，然后呢去让头部呢做了一个极大的简化。 就是有些东西吧，有些知识吧，你可能一开始你真的想不到场景，其实我也想不到场景，但是呢一些知识在脑海里面呢，如果说遇到了一些类似的情况呢？你如果说对些知识理解的够准确，够深度的话，你可以把那些东西拿出来，就会形成一些方案啊。是的是的，其实老师刚才说了， 刚才那个多路夫用的，其实你说了一些关键字，我马上就能想起来，就是有时候有一些记忆就开始模糊了。嗯嗯嗯，这里针对其他同学说一下啊，这个呢，他那个之前做过架构的，所以说他难点亮点呢，是没问题的啊，就是去怎么去把它描述出来。 如果说同学们以后平时找工作的话，缺乏难点亮点的话，不妨去看一下咱们的课程哈，我们有一个课程是个福利课程哈，叫做一线大厂核心技术方案，里面全是难点亮点， 这是个福利课程，也是咱们大师课之一啊。我们有很多大师课，包括网络的，包括工程化的，包括原码的，包括我们的核心大师课，有的是免费的，有的呢是小额的啊。小额是多小额呢？就基本上是一杯奶茶钱啊，基本上不怎么花钱的，那么那些课程呢，都可以找到咱们来领取哈，这里面每一个课程不仅对你的找工作有帮助， 包括提心啊，包括你学习以后的一些进阶知识啊，其实这里面全是进阶知识，然后呢，包括你以后的职业生涯发展啊，包括你平时工作里边的赋能啊，都是有帮助的啊，就说你把咱们大师课看完了过后，就直接提升了一个技术档次，所以其他同学还没有领到大师课的同学啊，咱们某些大师课呢，还可以免费领取啊，可能说不好以后就完全都全部付费了， 而且即便目前的付费呢，也是个小额的，对吧，以后呢可能会涨价，因此呢，同学们还没有领到咱们账号主页，点击头像进入账号主页，根据提示领取就完事了。

最近京东上线了一个新的功能啊，叫做商品系列管理支持，也就是说什么意思呢？就是支持把同类目同品的同品牌的 s p u 绑定为 系列，然后进行前端展示，也就是说你两个 s p u， 比如说是两个，呃，这个产品啊，本身是各自独立的一个 s p u 的，那么你想要绑定在一起，方便消费者进行挑选，那么这个时候像以前 你只能什么呢？如果说你想放在一起，你只能动 sq， 呃，这个 sq 下面就是说动属性嘛，然后去加属性对不对？有可能会影响你的链接群众， 但是呢，现在就是说是一加一合并成一个大的 spu， 进行前端展示，消费者在购物选择的时候，他就可以进行，就是说直接 像属性合并的一种形式来进行展示，就这样的一种展现形式，大家可以看一下。那么这个功能它是需要怎么去呃使用的呢？首先现在属于内测阶段，如果说商家有需要，需要你自主去联系客服， 按照他们的要求步骤提交相应的申请，开通之后就可以进行使用了。那么当你开通之后，那么这个商品系列管理那么是怎么去 呃设置的？首先啊，大家可以看到这样的一个页面，也就是说怎么去，当你开通之后怎么去找？那么你需要去找到商品管理，有一个 商品管理工具箱，在商品工具箱，呃，商品管理工具箱打开之后有个商品系列管理，那么商品系列管理之后，大家点开之后就是说看到这样的 页面，在这个上角你可以看到他是有添加相应的一些什么呢？新的一些系列，对吧？那么这个时候一些新的一些系列，那这个时候根据自己的需求去添加即可，拿去添加即可。 那么针对于啊，在创建系列的时候，大家记得啊，就是这类目和品牌是无法更改的，然后其他的就是说像展示的名称可以进行修改啊，可以进行修改，那么这个时候大家需要去注意一下啊，注意一下啊， 具体的一个页面是在这，大家可以看一下，那么还有就是说什么呢？呃，后续你所创建的就是说这个系列，那么你可以进行编辑啊，并编辑，有效的你可以进行编辑，而无效的你只能进行删除，只能进行删除啊，所以在这个过程中后 去有需要的一些商家，比如说想要去合并的这些呢，可以把此功能进行利用起来。那么再次强调一下，此功能不是直接使用的，想要使用需要联系京东客服，然后按照其要求提交申请开通即可。

咱们这节课呢来讲 c s s 盒子模型，这个盒子模型非常非常重要，因为我们在布局的时候一定会用到它，所以它是布局必用的。这部分呢大家一定要好好听。 我们先来看关于它的概念，它说所有的 html 元素啊，都可以看作是盒子。那么在 css 中啊， box model 这一术语呢，是用来设计和布局时使用的，这个 box model 翻译过来不就是盒子模型吗？它的作用就是啊设计和布局， 对吧？那么 css 盒子模型啊，本质上是一个盒子封装周围的 html 元素，它包含四个重要的内容，分别是外编辑、边框、内编辑和实际内容。我们来看下面这张图， 中间这个一百乘一百就是我们的实际内容。比如一个元素，你设置它的宽度为高度是一百乘一百，那这就是它的实际大小。然后我们再给他一些空隙，这个空隙呢就是内边句，在内边句 外层可以再增加一个边框，我们之前写过，给一个盒子增加一个边框，你就能看到它了，对吧？在边框的外围呢，还有一个区域，这个区域呢就叫外边框，所以由这四部分组成了一个标准的盒子模型。 如果这么说，大家还是无法理解外边距、边框、内边距和实际内容呢？我们再来细致的看一下什么是外边距。 magic 清除边框外的区域，外边框是透明的，指的就是我们这个区域， 看到了吗？它是完全透明的，然后再往里一层是边框，围绕着内边距和内容，外边框内容外的一个边框指的就是这个区域，黄色这个区域它是个边框，比如说二像素或者三像素的一个粗细边框，再往里去就是内边距。 内边句呢，他本身也是透明的，但是一般是与你的内容合成一体，就是指的是这个区域，然后再往里呢，就是我们的内容，就是盒子的大小，包含你显示的文本啊，图像等等，就是这个蓝色区域，就这个样子了。 好，我们用一个生活中例子去理解他啊，你比如说我们把这个盒子模型可以看作是生活中的快递，那么内容部分就等于你所买的食物，比如说你买了一个玻璃杯，那个玻璃杯就是你大小就是你当前这个食物嘛。 然后内边就呢等于快递盒子中的泡沫，因为这个玻璃杯它易碎呀，所以在发快递的时候，我们是不是在外层都会裹一层泡沫呀？防止他磕碰，对吧？然后在泡沫的外层，我们还会再怎样增加一个盒子，那这个盒子相当于边框， 然后外边就等同于两个盒子之间的距离，比如说你买买了很多个快递，对吧？那么快递 挨着一起一摆放，它们中间肯定有一点点空隙，这空隙可大可小，对不对？那个空隙指的就是外边句的效果，就是这个样子， 能理解吗？那我们通过具体代码来给大家演示一下吧。好吧，打开我们的开发者工具，在这里呢，我们新建一个文件叫 index 点 html， 然后补全一下，我直接给一个 div， 指定个 class 为 box， 这就是我们的盒子。然后我们 给这个盒子呢去添加盒子模型，那有点 box 对 不对？首先我们设置一下宽度为一百像素，设置下高度为一百像素，为了我们能看到它，我再给它一个背景颜色，比如说背景颜色为红色，此时我们这里的 宽度和高度其实就是 content 内容本身， c o n t n t 就是 content， 我们右键运行浏览器当中，你可以看到一个一百乘一百的盒子，对不对？然后我们再给他一个内边句，判定属性，判定属性，我们比如说给一个三二十像素， 翻回来一刷新，你有没有感觉这个盒子变大了呀？其实真正的盒子只有，哎，我们把这个颜色改一下，别改成红色，改成 blue 啊，要不然它跟我的画笔同样了。呃，重复了，它真正的盒子其实只有这么大一点，然后这个，这和这以及这都是内边句，将它撑开了， 因为内边句也要占据空间啊，所以把它撑开了，这个是我们的内边句，也就是啊 panda。 然后除了那边就我们还可以再增加一个边框，比如说来一个五像素的边框 啊，这是代表五像素， sorry 的 代表实线， red 呢，代表是边框的颜色，比如边框的颜色，我们给个 green 吧，给一个绿色，可以吧？那这里我们再来看效果刷新， 哎，五像素有点太小了，来个十像素吧，大家看的清晰，你看一下这个绿色围绕的他这个地方，绿色这个区域呢，就是边框啊，所以这里边就是边框， 指的就是包点。然后除了他呢，我们还有一个攀定啊，不是攀定，还有一个 magic 属性，它是外边距，比如外边距，我给一个五十像素，那翻回来你会发现它向右下角移动了，其实整个盒子大小是这么大， 然后这这这这是多少？是五十像素？是它的外边距。 magic， 好， 这是 y 边句。 mark， 好， 我们 m 改成小写啊，这个 c 也改成小写，统一规范好。这个四个元素内容组成了一个标准的盒子模型， 所以大家看到它其实真正的盒子大小这样，你不信，我们可以在这个下面再放一个元素，放一个 p 标签，写一个，哈哈 啊，写个汉语，哈哈，保存。我们这个在哪儿？它是紧挨着盒在这儿放吗？不是的，是在这儿，我们刷新看一眼，是不是在这儿， 因为什么？因为这个空间是五十像素的外边距，虽然它是透明的，是空白的，你看不到的，但它是有的。你可以这样右键点检查，然后把它往左拖一拖啊，然后你选中这个 div， 你会发现，当我选中这个 d i v 元素的时候，在我的左侧，这个元素真正的大小是这么大。中间这个区你看 不难看到，中间这儿的区域呢是元素本身的大小，这个区域呢是你的内边区，这个区域呢是你的边框，最外层这个区域呢是你的外边框，也就是 mod， 你也可以在下面这里看到，元素本身是一百乘一百，内边距为二十像素，包的的边框为十像素，这里的九点六六，是不是特别准确啊？但它其实是十像素，外边距是五十像素，所以由这样的组，这样的组成一个完整的盒子，看到了吗？ 这就是一个标准的盒子，完整的盒子大小，这对我们来说并不难理解，对不对？好，那接下来我们要讲的是什么呢？是把这几个内容拆开来一个一个细说， 当然这个内容本身就没什么可细说的了，你的宽度、高度就是内容本身我们要细说的。首先从内边句开始，我们将这个内边句注视一下，这个内边句他的写法有三种，一种是像我们刚刚写一个五十像素或者二十像素，这个呢是 一个属性，代表四个方向，你看看这，你看一下，看这，我们选中这个元素啊， 你看他这个外边就二十像素，分别是上右下左四个方向，二十，对不对？我们也可以这样来设置，设置上下为一个大小，左右一个大小，那这个代码就会这么来写，第一个代表上下二十像素，第二个来个四十像素代表左右。 翻回来刷新你会发现上下为二十像素，左右为四十像素，看这里对不对？然后你可以看到这个明显一个正方形变成一个长方形了，因为他的哎，因为他的这个左右比上下要大二十像素，所以变成了一个长方形，对不对？ 是不是？好？当然你除了刚刚我们写的这样的写法之外呢？呃，这要我们加个注示啊，就是，呃，二十 p x 代表是上下，对不对？四十 p x 代表的是左右， 你还可以再将它分开，分成四个值来进行编写，就是它四个值分别代表 上右下左依次排列。比如说我们上是二十像素，又是三十像素，下是四十像素，左是五十像素，那翻回来我们再来刷新，你看，上为二十，右为三十，下为四十，左为五十，你也可以这么来进行设计， 也是没有问题的。就四个方向，分别的那边就不一样，你看到我们选中的时候，明显在左侧这里，这特别小，这大了一点，这更大了，这最大，是不是啊？是可以这么来设置的，这四个值，注意它的方向，分别代表上右下，左 上右下左，分别代表这四个方向，这是这么来写的，好，我们把注视掉，把第一个放开啊，就上下左右都给他二十像素，这是判定属性的一个写法，并不难理解对不对？ 然后我们再来说这个边框，这个边框的写法标准默认就这样来写它的第一个值，我们在这加注式啊， 第一个，这个实像素啊，代表是边框的，哎，加个冒号吧啊，代表是边框的粗细， 代表边框的粗细。第二个值，这个 sorry 的 代表是边框的样式，这个样式除了有实线，还有其他的效果，我们来写一下啊，还是二十像素，然后空格，你看有 sorry 的， 还有什么呢？还有像呃，虚线，还有这个，嗯，双实线等等的，这个不同的，这个这个样式， 我们这样打开它，我们在这里加一下，通过它我们看包的属性有哪些啊？就包的属性，包的边框属性有哪些，对不对？看一下它是怎么来给我们回复的 啊？哎，他这个说的啊，在这呢，大家看视力，在这呢，这是一个，这是一个，对不对？这又是一个，我们先用这个属性，大家来看一眼，它代表的是什么样的效果，颜色呢？依然是给一个红色吧，翻回来我们刷新，大家看一下， 它是一个，这个二十太大了，给个实像素，它是一个虚线，看到了吗？它是个虚线，然后这个是实线，而这个呢，它是一个 点的效果，看到了吗？然后这个呢是双实线， double， 看到吗？双实线，所以它一共就这样四个属性，我们把这四个属性呢在这里分别来写一下啊，把这个先收起来啊，这样来写啊。第一个这个代表什么？虚线， 这个呢是实线， 实线七，然后这个呢是也是个虚线，不过用圆点虚线它是对不对？它是圆点虚线，然后最后一个这个是 double， 双实线， 双实线，好，这是它所给我们的四个属性，然后最后一个代表颜色，可以写具体的值，红色，对吧？你也可以将它这个我们还是变成一个实线啊。 sorry， 还是变成变成一个实线，你也可以写成一个井 f f 零零 零零啊，我们这样 ff 吧，这样的话它就变成了一个，嗯，粉色的，对不对？就是我们的那个 pink 那 个属性，对不对？翻回来我们再来看，刷新是变成粉色了，也可以这样来表现，比如说颜色值啊， 值可以是什么？可以是单词，也可以是十六进制，对不对？还可以是 r g b 和 r g b a， 跟我们之前所讲的颜色一样，比如说我用 r g b 给一个二五五零，二五五，这不也是一个粉色吗？那这样二五五零， 这是一个黄色，对吧？你看它就变成了黄色，对不对？或者再加一个二 g b a， 那 第二个第三个属性呢？就是透明度，零点五，就是半透明，看变成这个颜色了，如果一呢就是完全不透明，就是黄色，零是完全透明，你就看不到它了，看到了吗？ 对不对？所以这个颜色跟我们之前所讲的颜色值呢，是保持一致的。最后我们再来说这个 y 边距 margin， 它跟内边距一样，可以写成， 可以写成一个值，一个值一个值代表四个方向，可以写成两个值， 分代表上下和左右，对不对？也可以写成四个值，代表 上右下左，是不是也可以写成四个字，代表上右下左？我就不演示了，大家自己去测试。 当然我们除了这么来写，你会发现在它的编写方法中，攀登和攀登它还给你用，写法就是你如果记不住上右下左，那你就这样攀登 top 就 代表上一百像素，攀登 right 代表右一百像素，然后攀登 bottom 代表下为一百像素，我们都写一百啊， 然后 marking left， 一 百像素，也可以分别用这样的写法来表现。当然 panning 有 没有， panning 也有 left， 大家可以看到 left， top， bottom， right 四个方向也都是有的，对不对？我们就不依次演示了。但你知道如果你记不清上右下左，因为这个容易被遗忘嘛，那你就用这个 top， right， bottom， left 来定义上下左右四个方向的空隙值，也是没有任何问题的。 这个呢，就是我们的盒子模型，是不是理解起来也没有那么难呀，我们这些属性呢，都需要记住，而且其实在之前的课程当中，我们也是用过一点点的，对不对？ ok， 那 么呃，盒子模型这部分的呢，我们就先说到这里。

斯拉特布局之偏定布局泰迪在弗拉特中用的也挺多的，是一个最基础的空间功能，单一就是给子节点设置判定属性，也就是未捕前盾所说的设置。内编剧 play 的布局分为两种情况，当 qia 的未空时，会产生一个宽 vlog、 加 rat、 高为 top 加包等的区域。当 trl 的布为空时， play 会将布局约束传递给 tlog。 缩小 qia 的布局尺寸， 在翘的周围创建空白区域。当数值增加时，红色部分的宽度和高度都在减少，周围空白区域在增加，这就是攀顶对子接点约束尺寸的表现。单人也可以设置一条或多条边的那边去，虽然卡梯那也能够实现这样的效果，但是在这 这种单一的间距场景中使用喷顶比卡梯那的成本要小很多，毕竟卡梯那是一个组合空间。好啦，我们下期见啦！ 你是不是还有很多前端问题没有找到解决办法？为了更好的为大家解答前端的问题，我们将不定期开展免费培训活动，有兴趣的小伙伴可以在我们的官网报名， 前端大神一对一指导，而且完全是免费的，你还在等什么，快点报名吧！

呃，我们讲到面试题啊， undefined， non 和 n a n 的 区别啊。 嗯， undefined 是 咱们这个基础数据类型之一啊， g s 的 基础数据类型之一，意思是不存在。呃，咱们这是可以理解为真空。呃，比 non 还空啊，变量没有负值情况下它会。嗯，就是 undefined n 是 基，也是基础数据类型之一啊，意思是空内容，我们可以为这个变量啊，复制一个 n， 但是在不复任何值的情况下，它它就是 undefine。 我，我这总结了一个很更好理解的啊，那我们可以想象成数字中的零，它算是零啊，零咱们都知道是代表没有啊，但是它并不是空的啊，它，它有一个占位符是零啊， on different， on different 的是连零都没有。 n n 来表示一个不是数字啊，一个嗯，不能被解析的数字啊。 呃，我这了也准备了几道题啊。呃，这个是在笔试或者是面试当中会问出来的，我们看看啊，他前面是。呃，是否自己等于等于自己啊， 那后边是两两相等，一个全等，一个是是是否相等啊，我们看一下这这个答案。 呃，这里很那啥啊，我们看第一个，呃， non 全等于 non 是 正确的啊。 on the find 全等于 on the find， 这，这里是啥？但是不是数字等于不是数数字啊。 呃，这个是，这两个是不全等的啊。呃，我们再来看一个，两个等于号，把这个删，删它一个删它一个等于号，也也是一样的啊， 然后那全等于 undefined 也是。呃， files 啊， 这个两个等于号的 no 等于 ondefine 的， 这个是，这个是处啊。对，这，这是，这为真哪？二十二行，二十二行是这个，这，这是为真哪两个等于号是成立的，三个等于号是不成立的。下面这两个呢？ 嗯，这是二十四行和二十五行，二十四行和二十五行是两个 false 啊，这两个是不相等的， 最后两个我们看最后两个也是不相同的。呃，这个需要大家记住一下，如果不太好理解的话，把这个答案需要就记住一下。嗯，笔试的时候很有可能会碰到。好，这节课就到这里下课。