哈喽,大家好,今天我们讲一个词, margin。 那大家有没有一个疑问,在我们打印 a 四纸的时候,旁边有很多的留白和空白,那他们是做什么用的呢?今天学完 margin, 你就会豁然开朗。 margin 前面的 marge 来自于 mark, 表示做标记,做标识,那 in 呢?表示在里面,所以呢, margin 的字面意思就是在里面做标记, 所以大家现在知道留白的作用了吗?那由于呢,留白是在页面的边缘,所以呢, margin 又隐身出了边缘的意思,比如 people living on the margins of society。 处在社会边缘的人,比如像我这样的人 还在人海里浮沉。 martin, 你学会了吗?
粉丝1976获赞2.5万

盒子模型在前端页面布局的时候起着非常重要的一块作用,那比如这是我们前端的一个页面,页面中有新闻模块, 有产品模块等等,还有其他的一些模块。在这些模块中,模块与模块之间的距离我们需要控制,然后模块与内容之间的距离我们也需要控制,这一块就需要用到我们所说到的合资模型。 盒子模型有四大块,第一大块包等,第二大块牌顶,第三大块马俊,第四大块内容。好,这一个怎么样来去记呢?那大家可以想象成当前这个是我们收到的快递,你手拿到快递那个箱子,那它实际上就是马俊的位置, 那当前承载快递的箱子就是包袋好,箱子里面是不是你会购买一些东西,比如说一些易碎品,那他会有个填充物,这个填充物他实际就是一个拍点,那你所买回来的这个东西就称之为内容 好,再来重复一下啊,那像这一块距离的话呢,称之为马俊好,这个黑色的边框这个地方是包的,也就是我们说到的盒子这一块距离距离内容里面啊,这个区间,这个地方是拍的, 这里就是内容,这是就是盒子模型。那同样的这个搬到我们当前页面布局中好,这个是包的,他与他之间 这个距离,我们需要用到 money 好,盒子里面的这个距离,比如说我们有一些内容好内容的话呢,不想让他靠近边,那这是我们需要设置他的一个拍定值, 同样的道理,好,这一块我们也需是需要设定他的妈定制好这一块,哎,还有这一块也是妈定制,那盒子这块肯定就是包的有点,哎,这块也是包的好,那包的里面这一块内容距离内容的话,他就是设置的牌顶, 但是针对这样的一个布局有看到的吧?位置有些都是间距,有些都是不规则的。好,这时候我们就需要通过他 的参数来去设定。好像当前这样的一个盒子,我想让他四个边,就是上下左右四个边撑开相同的位置,那可以直接通过第一种写法,如果是像这种,哎,我上下左右的距离上下距离 比较宽一些,那我们可以通过这个方式,哎,设定两个值,上下的值是一样的,哎,左右的值是一样的。好,那我们这个时候可以用第二种方式, 那第三种方式的话呢,就是上左右下,上左右下。 好,是是这样的一个情况,也说左右的间距是一样的,你比如说像这种,哎,左右的间距是一样的,有可能上边或者下边的距离他不一样,那我们就需要用到第三种线 法,第四种写法的话呢,就是四个边都不同,哎,上下左右四个边的位置都不同,那就是我们可以用到它这个写法是上右下左,也说他会首先先要上右下左上的话呢,是一, 这边就是二,这里是三,这里是四,但是这个纸你可以根据自己需求去改,这个也 非常好记,就是按照时钟的一个顺时针去记就可以了,对吧?好,那还有一个是这种写法,有很多同学会发现了,是吧? moneying 零凹凸,这个呢是居中自动的意思, 也说他有点跟这个类似的,这个是上下左右。好,那这个呢?就是说到的上下为零,左右自动。那在咱们页面中时间看到 就是上下为零,上面为零贴合在这里左右自动,那他会根据你当前浏览器的一个宽度来自动去分配啊。这个就是 等剧中,但是这里面的这些值啊,比如说我不想让他为二,那这个时候我也不确定他的值为多少。那你可以直接用一个凹凸去代替啊。如果是你不想用凹凸,比如说这个地方我要换成四也是可以的,好吧?

哈喽,九省啊,有海你要塞了啊!所谓妈吉奈,其实很简单,就是借贷投资。妈吉给成就是英文的,妈整的英语原本指的是保证金的意思, 如果你想用孖展的话呢,首先你需要在证券公司开了一个孖展账户,并存入一笔钱作为保证金。然后呢,再以这笔保证金作为担保,向证券公司借钱,扩大自己的投资本钱。 炒蚂蚱的意思呢,其实是透过杠杆效应放大投资回报,用较少的本金来操作更大的投资。这样投资的意义在于,当你买的股票赚钱的时候,当然他给你的回报就更大了,甚至可以是原本你投资收益的数十倍甚至数百倍。 但同样道理啊,一旦股票亏险的时候,当然了,你已经想象到了,亏的比你本来多更多,风险非常高的哦。我们呢,在猫展上 存入的保证金,如果你买的股票价格下跌到不足以维持指定吗产比率或者保证金比率的时候,证券公司就会要求你追加保证金,也就是我们常常说的首创或者是 comazy, 让账户的保证金回到了指定水平。如果这个时候你不进行补仓,证券公司就可以强行出售你孖展账户内的市场股票,也就是我们常说的咱们。 而一旦攒钞后,外出的股票所得资金仍不足以偿还之前的蚂蚱贷款的话,证券公司还会向你追讨额外的还款。听起来是不是很吓人呢? 所以啊,我们在明白了孖展的基本道理之后,我们要知道,选择炒孖展的先决条件是自己要对自己所买的股票有充足的判断和认知,一旦犯错了,你有可能连本带利,输的干 干干净净,甚至搞不好还要倒赔钱。哦,现在你知道什么叫马长了吧?那先不说了,好好研究一下,我会发工资呢,拜拜。

大家好,欢迎收看本期的元义记单词,本期要讲的单词是 margin, 这个词可以表示夜边空白、领先幅度、利润余地,边远等等。事宜虽然多,但其实这么多事宜都可以用一张图来解释,就是下面这张图, 白色的这一小条就代表 martin, 这就是 martin 的原意,没看明白的话不要着急,我们代入到具体的事意里来看。第一个页边空白指的是书或者文档中边缘没有字的部分,这个就不用解释了吧,看图就很容易能理解。白色部分就是页边空白, martin。 第二个获胜者领先的幅度差数还是刚才这张图,如果大框表示第一名的成绩,黄色的小框代表第二名的成绩,那么第一名领先第二名的就是两者的差,也就是白色部分面积,这就是 martin。 再看看例子,体会一下, is that for a long minnesota danny chunkers increases margin。 第三个,利润还是这张图,如果大矿表示收入,黄色的小矿表示成本,那么利润就是收入减去成本,所以白色部分两者相差的部分就代表了利润。 结合图是不是很容易理解?看个例子, air fresheners are high margin right at thirty cents osalia right。 第四个余地指的是你为了保证事情做成,留出的备用的时间前或者犯错的余地。 还是这张图,比如你的能力是大框面积,假如说是一百,但是为了确保成功,你选择追求八十难度的任务,也就是黄色小框的面积。所以白色部分就是你留给自己的余地,以防万一有什么意外情况 或者自己犯错。有个常用短语就是 margin of arrow, 可以表示犯错的余地。 sorry were they no, no, no you're not even don't worry twenty's the margin of error 也可以表示误差范围, 因为误差就是允许存在的错误。 florrick mrs florrick would win by aid points margin of error three points。 第五个,地狱或者水域的边缘。这个就不用解释了吧。白色部分就是边缘部分。 martin 第六个,汉语边缘这个词类似,也可以表示文化上的边缘,比如社会边缘。 martin of society so the two female victims were reserved in studious parker mills lived quietly in the margins of conventional society。

摩尔井边缘余地还是差额? 摩尔枕有很多看起来啊不太相关的意思,边缘余地差额,这个怎么记呢?摩尔枕实际上与摩尔标记是同源的,表示地图上标记的领土的边境线,进一步表示边境的狭长地带,也就是边缘的部分。譬如啊 boyboy 摩尔枕, 夜边空白,很宽的一本书,名字叫做山脉呢,位于城市的北部边缘。李邦的 morgens style, 生活在社会的边缘, 将流出的空隙作为缓冲的用途,就是摩尔枕表示余地的含义。例如 tboys fd 摩尔枕保持安全编剧,而摩尔镇的贝尔人,误差的余地,也就是误差允许的范围。从数量的 角度看,摩尔指尼呢,如果两者相等,就会完全重合,而如果两者之间存在差距,就会形成像缝隙一样。比如那 boysurysuris, 那摩尔指尼一个子弹呢,差点就击中了他的心脏,错开一点,也就形成了缝隙。 vnboyy 摩尔指尼一大比分获胜。 blus profrimift box, 毛利率百分之五十,也就是收入扣除成本形成的差额。玩枕的三个意思,你学会了吗?

八点是夜边空白,大家 a 四纸吗?包括你的讲义,你的书不有个夜边空白方便记笔记的吗? blank 呢,就是空白了, 脑袋一片空白,没有表情,空白了,蒙了。而这个 margin 很重要。这次主要是夜边空白,然后夜边空白意味着什么?那个夜边的那个空白是你可以记笔记用的对吧?所以那个地方其实相当于是一个给你留的一个空间哎,相当于给你这个余地,对不对?所以夜边空白,边缘就相当于是个余地 哎,这样的话,你看这个意思来了,相当于是一个余地,一个幅度差额。利润空间叫 margin。 尤其是这个利润空间啊,这个还是比较重要的,各位。哎,留下的这个页面空白,现在这是个叉额,这是个幅度,这是一个空间,叫 margin。

好,另外呢,由于 s 加和 s 减它分别在这两条线上,所以我们可以得出啊,这个方程方程式 w, s 加减加上 b, 它等于多少呢?它等于一, 因为 x 加在这条线上,然后这条线的啊,这个方程是 w 加 w 加 b 等于一嘛,然后另外呢, x 减 x 减 加上 b 等于负亿,所以这是我们根据定义来获得的。然后另外呢,我们刚才提到 这是第一个式子,那第一个式子里面其实就是 x 加,我表示成了 x 线加上,比如说某一个蓝的加上 w 的形式,所以接下来呢,我把这个一呢带到咱们这个式子里面, 就是把这个一呢带到咱们第一个式子里面,那这个时候呢,咱们就可以得到什么呢?把这个第一个第一项表示成 w 全是 boos。 x 减加上蓝的 w, 然后呢加上 b 等于一,也就说把这里的 x 加呢,用它来表示了,所以我得到了呃,这样的一个项, 然后这个项呢,我们可以稍微的展开,然后展开完之后呢,就得到 wx 减加上栏目的乘上 w 全是 boss 乘上 w, 然后呢加上 b 等于一,然后在这个式子里面可以看到这个部分加上 这个部分,那这两个相加,其实刚好是就这个值负一的值,对吧?所以呢,我们得到的是狼大乘上乘上它减去负一, 因为这两个项的之和等于负一,是通过他来获得的,对吧?然后呢,他等于一, 所以这个什么意思呢?就是狼的乘上它等于二,所以从这个式子里面可以得到狼的等于多少呢?狼的等于二,除以 w 全速等于 w, 所以这个呢,也是一个非常重要的一个中间的过程,那有了它之后,我们接下来其实就可以表示成表示这个门景了, 所以这个时候马尔警我们可以表示,我们可以来看一下,马尔警刚才写了他等于 x 加上减去 x 减的他们俩的一个垂直距离, 然后,然后呢? x 加我可以表示成 x 减加上狼的乘上 w, 然后呢他减去 x 减,那这个时候我们可以发现 s 减和 x 间可以他他俩可以抵消掉,所以剩下的就是狼的乘上 w, 对吧?所以这个玩具呢可以得到狼的呈上 w, 而且我知道狼的只呢是这个值,对吧?我知道这个狼的只是这个值,所以我们把第二项带到这里面,把它带到这里面,那带到 到这里面之后呢,我们就得到啥呢?等于二除以,然后这里的栏目的跟啊,咱们分母里面的某一个栏目的会抵消掉,对吧?那最后我得出来的是 w, 他的一个 其实是他这个闹他这个范数,所以我最后得出来的是我的门禁呢,他刚好等于他,所以这就意味着什么呢?我要去最大化门禁,就意味其实就是我要去 max max 二除以 w 的函数,他这个 no, 这是我们最终的一个答案,所以这是我的目标函数,我要去最大化二除以 w 的 no, 因为这个纸呢,其实就等于这里的满井,这个满井等于他,好,那这是我们通过一系列的几何的运算呢,最后得出了啊,这个满井的一个表示方法,所以你可以看到在这个满井里面呢,我们有参数叫 w, 所以我们已经把我的门仅表示成了带有参数的一种一种形式,所以接下来呢,其实就进入我们的优化的阶段了,因为我知道怎么去表示他,所以我接下来通过最大化这个式子的方式来去求出最好的 w 这个结。

以前的我 marginalt 好难学,所以一直让他吃灰,现在的我 marginalt 真香,一起跟着视频做一遍,立刻上手 marginalt 吧! 点击左上角导入,就可以通过文件或者 wifi 导入你想要使用的文档,导入以后就可以进入到阅读界面。 在阅读界面当中,我们点击学习按钮,就可以进入到左边是脑图,右边是阅读的这个界面当中。如果我们在 pdf 上使用 ipad pencil 进行标记, 在标记了以后,选择一种颜色,在我们的左侧就会自动生成一张脑图的卡片,如果继续选择 就可以继续生成,这样我们就可以边阅读边进行标记了。我们可以通过拖拽下面的这个把手调整两个界面的大小。 我们刚才生成的卡片相互之间的关系是独立的,如果我们要让他形成脑图的逻辑关系,我们可以采用拖拽的办法。如果我们选中一张卡片,然后拖拽到另外一个卡片上,他就会形成这个卡片的子结点,同样我们可以把这张也拖拽到这个上面,他就形成了两个子结点。 如果我们把子结点再次错拽到这个负结点,它就会形成一个合并。 在我们阅读的时候,可能已经阅读到没有标记的地方了,这时候如果我们要 回到曾经做过标记的地方,我们不用去翻页,我们只需要在对应的卡片上单击一下,他就会直接回到这个卡片所在的位置。 如果我们选用了上方的这个框选工具,在我们划一个方框的时候, 这个标记也会被同步到卡片里,这时如果我们在选择绘画标记,我们就可以在这个方框里书写一些内容。我们可以选择笔刷的形状,比如现在是钢笔, 当我们在这边书写完了之后,这个卡片的脑图这一端也会形成和阅读端标记一模一样的这个记号。但如果我们在卡片外面写,他就不会有任何变化,那么这个卡片 如果我们把他的大小调整之后,他也会把之前写过的内容同步到脑图当中。 任何一张卡片我们都可以对他进行标记和注视。具体的方法是单击这张卡片,右下角会出现一个三角形的按钮,我们双击这个按钮就可以调出这个评论。这时候我们可以对这这张卡片进行音频的注视,你可以直接调取 mp 三文件或者使用麦克风 进行现场录制,也可以采用相机调取照片素材或者直接拍照。还可以对这张卡片进行标签分类的管理。 每一张卡片我们都可以对他进行颜色的更改,点击这个调色盘,我们就可以对不同的内容进行颜色的标记, 比如标题我们可以标记成绿色,主干内容可以标记为黄色,如果是分支内容,我们还可以标记成更多的颜色。 我们在阅读的时候经常会需要搜索或者翻译,这时候我们可以用 marjorno 自带的搜索工具,比如我们看到了一个词 想要查询,这时候我们可以选择字典或者研究,字典的话就是 ipad 自带的字典,研究的话就是搜索网页,你可以在解锁的页面里右下角有设置按钮,可以选择不同的搜索引擎,例如翻译,可以选择谷歌翻译或者百度翻译,而且这个是没有翻墙限制的。 看到现在实际上就是谷歌翻译再翻译这个段子,这里也可以翻译大段的文字。 对于同一个文档来说,如果我们要阅读 前后两个不一样的位置,在同一个页面,我们就需要来回翻动,很不方便。这时候我们可以打开多文档分割视图,然后选择两个,这时候他就会分成两个窗口来方便我们的查找和阅读。当然如果 我们需要同时阅读两本书,我们可以点击这个管理,然后添加某一本我们希望同时阅读的书籍,然后 在上方拖拽,就可以让对应的窗口显示对应的书籍,从而达到参照阅读的作用。 翻译出来的内容可以直接拖拽到卡片里形成注视。另外生成的脑图还可以用大纲模式导出成 word 等格式,方便打印和分享。更详细内容可以看视频下面我之前写的文章,如果这个视频有用,记得三联支持一下再走哦。

majin 定义了三个词,分割线那里 marjin 定义了三个词, 在第六个视频, div 元素马金属性介绍,我看一看第六个视频有没有讲清楚哈?第六个视频里面有第六个视频, 第六个视频应该是只介绍了马警的 抹紧的四个方向,抹紧的四个方向, 这个马井呢?他有四个方向,马井有四个方向, 马金啊, top, lift, 还有就是 bottom 啊, 我给大家我看一看马井四个字的含义,应该是四个字啊, 马警呢?他是在这个位置,我们用了 十一 px, 五 px, 零的这一种表述方式,这一种表述方式,那么在这里我们给他加 一个马井,给大家展示一下,我在这里直接给他加一个属性,马井啊,五 px 啊,六 px, 然后七 px, 八 px。 好,大家看现在我的操作实际上也是调试的一个手段,在 看是哪个视频, 就在这个视频,我们就要求, 哦,在下一个视频,我们要求你动态给元素添属性,现在 我就是动态给他添了一个麻筋,那刚才我敲了四个方向的麻筋,麻筋,五 px, 六 px, 七 px, 八 px, 就对应着刚才同学问的这一个问题 啊,三个字分别针对哪些?分割线那里实际上是四个字,我只打了前面的三个,后面没打,他会自动补气, 我我我再来打一次,大家看一看,我这里输一个五 p x, 大家会发现在这里啊,上左上是五 px 啊,右是五 px, 下 下面是五 px, 左边是五 px。 好,我再说一个六 px, 大家会发现,上是五 px, 下是五 px, 左是六 px, 右是六 px。 好,我再来数七 px, 大家会发现上是五 px, 左右是六 px, 下是七 px, 我再数一个八 px, 大家会发现上五 px 又六 px 啊,下七 px, 左八 px。 所以这个马警我在这里输的就是上 右下左上右下左这四个方向。这四个方向,那如果你不输, 哎后最后一个不输,那他会默认的让左右是等的,也就是最后一个就等于六 px, 最后一个就等于六 px, 也就是你没有输入的这个就是六 px, 那我七 px 不输, 默认的上下是五 px, 左右是六 px, 那我六 px 也不输入,那默认,所以 有的都是五 px。 这就是我们马井里面的 这四个方向。这四个方向,那讲了这四个方向,我们再来隐身一下。马井除了马井以外,还有马金奈夫特这一些属性哈,他可以分别自己设。 刚才这种情况就是统一射啊,所有的全部给你射了。这是马金 top 啊,这是马金 right, 这是马金波特,这是马金 nift, 这是统一瘦,你也可以单独瘦,单独瘦就是我们直接翘 马金 nift。 这样。单独搜啊,单独搜,单独搜啊。假设我是个十 px, 我可以单独搜,单独搜。这就是啊,刚才这一个同学在问马景的 啊,四个方向的问题啊,四个方向的问题。

今天呢,我们来讲一个单词,这个单词是 margin, 这个单词的意思是边远的意思,那怎么去记它呢?你听这个单词的发音听起来是不是特别像马晶?那么我们知道一个名人叫 马丁路德金,那么马金这两个字呢?就是马丁路德金这个名字的边缘,所以呢 margin 这个单词的意思是边缘的意思,你学会了吗?

经济学的边际主义是一种基于边际妈阵概念的理论方法。他强调个体在做决策时考虑的是最后一单位边际单位的变化,而不是总体的变化。这种方法的核心思想是,人们在决策时通常会考虑添加或减少一单位的东西,而不是整体的量。 具体来说,边际主义关注的是边际成本和边际效益。边际成本是指增加一单位产品或服务所需要的额外成本,而边际效益是指增加一单位产品或服务所带来的额外收益或满足感。 决策者通常会在边际成本等于边际效益的情况下做出最理性的决策。以消费为例,边际主义告诉我们,人们在考虑购买一件商品时,并不是看整体的价格,而是考虑最后一件商品的价格 是否值得购买。如果最后一件商品的边际效益对个体的满足感或需求的增加大于其边际成本购买这件商品的额外花费,那么理性的决策就是购买这一单位商品。边际主义在生产中也很重要,企业在决定是否生产额外的产品时, 会考虑最后一单位产品的边际成本和边际收益,只有当边际收益大于边际成本时,企业才会继续生产。总体而言,经济学的边际主义强调了在决策中考虑最后一单位的变化,为经济学家提供了一个更具体和实用的分析工具。

好,接下来呢,咱们带同学们来认识一下行内元素的 morting 和 pling 的无效情况。 咱们在实际布局中啊,其实会经常给盒子呢设置 mongy 啊,或者拍的来空出相应的距离出来。那 那咱们在实际布局的时候呢,其实使用块元素来当做盒子布局用的是最多的,但是呢,咱们还是由少部分情况需要给咱们的行内元素呢设置相应的距离的,那这个时候呢,咱们可能需要给行内元素设置相关的 mogelid, 但同学们在给行的元素设置 max 和拍定的时候需要小心哦。那其实针对于行的元素来说,在水平方向上的 max 和拍定呢,布局中完全是有效果的,同学们去 设置完全是没有问题的。但是呢,行内元素有一个特点,就是对于垂直方向上的 morting 和 pard 呢,他们在布局中是无效的,同学们在开发中就没有必要去设置了。 那么为了让同学们更加直观的看到咱们行内元素的 morningpard 无效的情况,那这里呢,老师准备了一个小的案例,咱们通过案例呢来进行分析。 那在案例中呢,老师写了这么一个结构,咱们上和下各自放了两个 div, 表示咱们布局中的上下两个盒子, 而在两个盒子中间呢,咱们放了三个行的元素,也就是三个子弹标签,并且呢老师已经去除掉所有标签默认的妈整个拍顶 先给上下两个 drv 呢设置的宽高和背景颜色,那待会咱们的做法就是给里面的死板标签设置不同方向的马这个拍顶来看一下能否正常在布局中生效哦, 好,那首先咱们找到词片标签,咱们先以水平方向为例,来演示水平方向上的 morning 跟 plad 在布局中有效的情况。那咱们先找到词片标签,设置一个 mongel love you, 比如说为一百 px, 那写完之后咱们来去刷新,哎,很明显会发现当前随便标签左侧的拉近呢,生效了,存在相应的距离,那左侧的拉进行,那咱们来试一下右侧的怎么改成 妈劲高 red 改完了之后,咱们来去刷新哎,右侧的妈劲呢,同样也是能生效的,证明水平方向的妈劲呢,完全没有问题, 那 mogel 可以。咱们再来演示一下拍顶,比如说 pradel like 为一百 px, 写完之后咱们来去刷新, 同样左间距呢,也是空开的,那咱们再把 like 改成 ret 之后,此时来去刷新右边的间距呢,也是完全没问题的, 所以两者合在一块,咱们可以记住好内元素的水平方向吗?这个拍的呢,布局中是有效果的。好,有效的。介绍完之后,那接下来咱们来介绍一下两个无效的情况。 咱们针对于垂直方向的妈,这个拍顶呢,咱们分别来演示一下,比如说咱们设置一个妈之音杠 top 为一百 px, 那如果他能生效,咱们的死板标签应该会往下移动,与上方的盒子呢,空出一百 ps 的距离, 那此时咱们来去刷新,哎,怎么会发现 monet top 他有效果吗?明显是没效果的。当然咱们再把 top 值改成咱们所对应的波蹭之后,此时来去刷新, 同样也是没有任何的作用的好,那吗这不行,咱们来试一试 party 可不可以哦?咱们找到 span 设置一个 party 杠 top 为一百 px, 洗完之后咱们来去 去刷新同样也是没有效果的。怎么把 top 改成咱们的波层,改完了之后来去刷新 同样也是无效的?那咱们将刚才所演示的结果汇总起来,就是咱们针对于行内元素来说呢,他垂直方向上的 mouse 和拍顶呢,在布局中是无效的, 就算咱们设置上去之后,他对于布局来说也是无法空出任何的距离的。好,那说到这里呢,咱们就带同学们介绍完了行内元素的妈整个拍定无效的情况。 那针对于行内元素来说,水平方向上的 mogeligirid 呢?咱们在布局中设置呢,完全是有效果的。但是针对于垂直方向的 mogeligirigigigigigigigigigigiad 来说,对于 行内元素在布局中是无效的。咱们在后面写项目的时候,咱们需要避免给行内元素设置垂直方向的 money 和拍定哦。

好,接下来呢,咱们来带同学们去学习 mogel 当方向设置的小应用,那么咱们在实际开发的时候啊,会经常遇到我们要让某个盒子呢进行不同方向的移动, 那么如果咱们想完成让盒子往不同方向移动的效果呢?那其实使用刚才咱们所讲到的 morting 的单方向设置呢,就能进行相应的控制, 那么这里为了让同学们在后面的项目中更好的容易上手,那这呢咱们给同学们分别介绍一下,妈咪能怎么样做到让咱们的盒子呢往不同的方向移动。 那这里呢,老师给同学们准备好了一个案例,网页的结构呢是这样子的,页面中有两个 div 标签,分别是 如印这个盒子盒不录这么一个盒子,而且在最开始的时候呢,为了排除浏览器默认 monitingpid 的影响,咱们首先通过同步入选的器找到了所有的标签,去除掉了默认的 money 和 party, 并且呢咱们还给 div 设置了固定的宽和高都为三百 px, 而且咱们还给两个盒子呢设置了他们各自不同的绿色和蓝色,那最后的效果呢,就看左边所展示的情况。 好,那现在呢,咱们的想法就是给当前的 green 这么一个盒子呢设置不同方向上的 morting, 来看他能让盒子呢如何进行移动。那首先我们先来看水平方向上的 情况哦,那么为了给同学们去演示水平方向上抹镜的情况,那老师需要把两个盒子呢让他们一行中显示更加能清晰的看到抹镜的影响。 那么同学们想一想,咱们如何让咱们两个 drv 盒子一行中显示,而且还能有他所固定的大小呢?哎, 对的,那咱们想要我们单行的 drv 一行中显示,并且可以设置宽高,那不就是好那块元素的特点吗? 那这边咱们只需要把所有的 drv 全都转换成行内块元素呢就行了,那转换成行内快元素的代码同学们还记得吗?哎,叫做 dsplay, 属性之为 enongeluck 就可以了。好,洗完之后咱们来去刷新当前的盒子呢,已经一行中显示水平布局了。 好,水平布局了之后,接下来咱们通过给 green 这个盒子设置左右的 mrjing, 来看他对网页中的布局有什么样的影响哦。首先咱们给当前的 green 盒子呢设置一个 matel max, 比如说为一百 px, 那么这行代码的含义就是让我们当前绿盒子的左边呢空出一段距离出来。那同学们可以把网页中两个 drv 呢当做是一间房子,里面的 两个人好比是两位同学并排坐着的。那么现在呢,这位绿色的同学往左边呢串了一 脚,他的脚呢有一百 px 呢这么长,那么踹完了之后,那墙明显是踹不倒的,那他只能自己怎么样呢?往后倒呗。那所以此时咱们来去刷新 哎,明显会发现当前绿色的盒子呢往右跑了,并且绿色盒子往右移动的同时,带着他旁边的同桌也往右移动了。那这呢是咱们 monelaft 的效果,让当前的盒子呢往右移动, 好比是一个人呢踹墙,墙踹不动,只能自己呢往反方向弹过去了。好,那么演示完咱们 mglaft 之后,怎么把代码先注射掉起来去刷新?那他现在呢,是没有 mg 的影响的。那此时咱们找到当前的绿盒 字,给大家设置一个妈金杠 red 属性之为一百 ps。 那么他的效果长什么样子的呢?哎, 就类似于当前的绿盒子呢,不再往左边踹墙了,而去踹他右边的同桌了,那这个同桌被他踹了之后肯定就往右边跑啊,所以此时咱们来去刷新, 咱们左侧的绿盒子呢,靠着墙没有动,然后他右侧的蓝盒子呢往右移动了,所以 matet reat 的效果呢,他可以做到让右边的盒子往右移动了。好, 那说到这里呢,咱们带着同学们演示了水平方向妈精能让盒子呢怎样去移动?那接下来呢,咱们给同学们演示一下 有关于垂直方向 marj 能让盒子怎么样去移动。那么为了让同学们更好的看到垂直方向 marjing 对于布局的影响呢?那首先老师需要让盒子呢恢复原状,让他们垂直布局, 让他们垂直布局也非常的简单哦,咱们只要把迪斯科勒,英兰布拉克呢给去掉就行了,因为块元素呢,默认就是垂直布局的哦,此事来续,刷新 完全是没有问题的。那同样现在呢,咱们给绿盒子设置一个妈金刚 top, 值为一百 px。 那同样的道理,好比是当前的绿盒子呢,还是往上踹浏览器的边界,好比是踹墙,那墙踹不动,只能自己呢往反方向弹喽。 所以此时来去刷新,盒子呢往下移动了,并且带着他下面的盒子呢,也往下移动了。所以呢, maten to 的效果就是他能做到让当前的盒子呢往下进行移动哦,好, 演示完了吗?进套步之后,咱们来去刷新恢复原状。那咱们再来演示一下吗,进杠波特他所对的效果呢?长成什么样子的哦, 那老师写完妈巾包腾为一百撇死之后,此时呢,就好比是绿盒子往下踹,一脚踹他下面这个人, 那下面这个蓝盒子呢,背出来之后肯定往下面躲啊,所以此时来去刷新,那这就是妈巾包臀的效果,他能做到让他下方的盒子呢往下移动, 而自己呢是没有移动的呦,好,那说到这里呢,咱们带着同学们介绍完了 morty 当 方向设置的小应用。那同学们需要知道哦,咱们 monelax 能让当前的盒子呢往右移动,而咱们的 monelat 呢,能让右边的盒子往右进行移动, 而咱们的马金套板呢,是让自个往下移动,而马金杠包特呢,是让他下边的盒子呢往下移动。相关的应用场景同学们需要大概认识一下哦, 那么后面在实际的项目中,也会带同学们通过案例的形式来不断的练习和巩固。好,说到这里呢,咱们就带同学们介绍完了妈咪单方向设计的小应用。

大家好,今天我们讲一下这个 margin 属性。 margin 属性呢,就是指空间了与其他的空间之间那个边缘的距离。 那么我们还是打开这个 vs 二零二二创建新项目,点击下一步项目名称呢,我们就填 magic 出现 再点创建。 我们做网页的朋友呢,可能对这个呃就是 margin 属性呢,比较熟悉,这个用的比较多。那么呢, 在在这个 when form 里面呢,哎, margin 属性可能用的不是那么多啊,我们先看一下, 先放一个。我们先演示一下看看啊,先放一个这个按钮。 那么呢我们可以看到啊,这个按钮上面呢,它有这个 main 属性默认呢,这个全部写的是三啊。相对于那个属性呢,它是三个像素。那么呢我们可以看 左上右下可以分别设置。这个左上右下可以分别设置。如果我们在这个 word 里面呢,全部改一下 就全部改了,我们也可以特别指定,比如说特别指定这个,哎,左右是八啊。 那么呢,在我们自己布局这个空间的时候啊,好,我们现在这两个呃按钮它都有了一个设置 mark 属性。 但是如如果我们自己这么放的话啊,他这个编剧啊,他是不受那个 magic 属性的限制的。我们可以看到啊,这个是不受限制的。我们运行一下看。 我们可以看到这两个按钮之间呢,哎,他设置的那个编剧啊,他的属性没有起到什么作用。那么是不是我们这个 magic 属性在 winform 里面就没有地方可以用了呢?那我们现在来演示一下哎, 哪些地方是可以用到的好,我们把它删除啊。那么我们现在啊,放一个 florid alt 拍了空间啊, 这个呢,这个空间呢,它跟 panel 空间有区别。 panel 空间呢,是我们放空空间到上面来,要自己去设置空间的位置。那么呢,这个空间呢,它可以哎,是一个牛布局的空间, 可以自己去摆那个里面的一个一个去啊,自动放那个空间的 呃,那个位置好,我们现在把这个边距啊边框设置一个单线边框,方便我们这边在看呃,然后呢,我们方便演示了把,那 这个是否自动出现滚动条啊,哎,改成四好。那么我们现在啊,在这个 form 的 shown, shown 事件啊,呃,窗体第一次显示的时候发生啊,就是说 shown 事件写一写一个代码。我们在那个呃 留布局空间里面呢,给它哎,加载一百个那个按钮, 嗯,实力画一个按钮。 那么呢,我们指定这个空间的 margin 属性啊,等于。 那么呢,比如说我们把它空间的哎,所有的边界都指定为八。好 在那个牛布局空间里面呢,把它添加进去, 我们运行一下看看啊。 那么呢,哎,这个按钮啊,他就按这个自动哎,再添加到里面了, 哎,它呢按我们设置的编剧。那么我们现在啊把那个按钮呢,编剧啊,给它设置大一点,比如说我们设置成二十, 那么呢,哎,他这编剧就呃每个空间之间的这个编剧啊,他就变大了。 嗯,或者呢,我们还可以把它每一行之间的上下编句设置少一点, 可以分别设置他的左右边距和上下边距。那么我们这里第一个是左边距,左边距我们比如说成设置是八,上边距呢,设置成好,我们把左边距设置成二十,上边距设置成八 哎,右边距哎,也给他设置成二十,下边距设置成八。让我们看一下那个效果 是吧。这个他就上下编辑设置小之后啊,他就变得密一些了哎。 嗯,可以让这个 out to size 设置为真啊,不然的它的上面的字啊,显示不出来。 好,这样呢,我们就可以看到啊,这个按钮啊。他 嗯,都加载上来了。是按照我们设置的空间之间。嗯,空间之间。它那个相当于一个外编剧啊来加载的。当然我们也可以呃,加载 label 空间也是可以的,其他空间都是可以这么 哎去加载的哎。好,我们演示一下那个 labor 空间啊, 给他设置一个有边框根线边框。 好,我们来指定一下这个 labor 的挖井空间。 它这个有三种写法, 我们就随便写一下吧。啊,在三十 运行一下看看。好,上面呢是按钮啊,下面呢又是这个 labor 空间 啊。这个就是我们这个今天讲的呃,马空间的马井出现啊。今天就讲到这里,如果大家觉得可能以后能用到了,可以帮忙点赞关注收藏一下啊,谢谢。

大家好,今天为大家介绍的是一款高能笔记和学习软件妈真的 three, 相信有不少伙伴听说过他,今天我们将系统的介绍他的功能与使用方法,保证大家可以快速上手。 margin note three 是一款结合阅读、学习、复习多模式的笔记软件,但部分伙伴会因为 margin note 具有较高的使用学习成本而放弃使用。其实 margin note three 的使用逻辑非常简单,分为文档、学习、复习三个模块, 碎片化加网络化加重复化等于内化对应学习的全流程,掌握软件的使用逻辑即可轻松入门。首先我们将介绍文档功能,文档功能覆盖了用户的知识获取阶段,可以简单的将其理解为 为文献阅读器,它可以支持增加手写笔记,也可以作为学习功能与复习功能的入口。使用的第一步是文件导入, 点击页面左上的导入键,选择合适的文件来源即可。在 models three 中打开该文件。软件不仅支持 pdf 文档导入,也可以支持 epop 和网页格式文件,有助于用户使用该软件阅读更多电子书籍。打开文件后的页面如右图所示, 主要功能包括摘录与批注两种。摘录是 marginals three 的特色功能,摘录的内容会在笔记本中转化成卡片形式, 可形成学习模式的脑图构建以及复习模式的记忆卡片摘录的工具有文本选择、矩形选区和自由选区三种。文本选择负责对 文本进行摘录,选区工具则针对图片或区域进行截图摘录。点击摘录内容,可以添加摘录卡片的标题以及评论,也可以添加标签, 同时可以将该卡片添加到脑图,也可以添加到记忆卡片中,方便之后的学习与复习。选中摘录中的某个词汇,可以进行朗读、查词和研究。 朗读功能可以帮助用户准确掌握该词汇的发音。词典可以直接解析该词汇的含义。研究则会围绕该术语进行网页检索,包括与该词相关的网页内容、学术研究、问答、 图片翻译等内容。批注包括手写与打字输入两种方式,批注内容则仅留存在文件中,在文本打印时仍然可以看到点。 点击裁编留白按钮,可以开启裁编留白功能,选择合适的留白尺寸,可以为文档增加位置,为用户提供更多批注笔记空间。 在该软件中,摘录与批注应急都流存在对应笔记本上,用户可以在阅览模式下通过新建笔记本建立新的图层,重新进行学习。该功能可用于用户对文章的二次学习以及对试题的多次作答。 学习板块代表了知识重组的过程,用户可以根据自己对知识的理解需求 来提取知识要点。例如,可以点击学习模式按钮进入学习模式来构建脑图。摘录可以自动转化为脑图,并且可以对摘录内容添加标题与评论,还可 添加相关图片、网页链接等资源作为笔记的补充。可以为摘录选择不同的颜色以及不同的标签进行分类。摘录可以按照三种方式插入脑图,分别是按文档目录分组、按文档分组以及插入选定位置。 前两者都是根据文档内的逻辑或多篇文档分类对脑图进行组织,后一种则更适合用户散打文档结构,以个人需要的方式进行知识重组。 对节点卡片进行托拽,可以建立节点间的层级结构,托拽至某节点可生成其子节点。 也可以点击选择按钮,选择需合并的节点进行节点合并,呈现多种内容。点击该按钮可以实现脑图的目录式浏览,并且可以对多个节点 实现快速编辑重组。对脑图的所有编辑功能都可以在该目录中实现,同时支持对笔记的搜索,可以快速定位置用户需要的内容。 该功能还可以对多个节点进行快速选择与过滤,也可以按日期文档页进行排序。同时该视图下还可以对脑图内容进行划重点,方便后续的复习。在多文本综合功能下,可以实现提取多个文档内容至同一个脑图, 较好的支持了知识拆解与重组的需求。点击管理按钮,即可将文档库中的内容添加到需要的文档,关联到该脑图笔记本。 并且 margin note three 可以进行视图管理,实现一至三个视图的切换,方便多文档或统一文档多视图查看。复 模块主要是对文档学习部分内容进行回溯记忆,因此 margin note three 也设计了辅助记忆的功能,来帮助用户更好地复习所学知识。温故而知新 软件设计了划重点功能,服务于用户的复习与自我检测。在文档模式、学习模式、复习模式都可以实现划重点功能。对于已经摘录的内容,在文档中再次点击即可出现划重点选项, 划重点内容会以虚线形式呈现,在脑图区域以及脑图目录视图下,也都可以对摘录内容进行划重点。卡片组是复习的主要载体, 在复习模式中,用户可以将摘录内容生成卡片组。卡片组主要以两种方式对用户进行检 测,一种是对卡片的划重点内容进行填空,从而达到重点内容的检测。另一种方式以卡片正反翻转的形式对内容进行记忆,用户点击卡片即可从正面翻转至反面。 用户在答题完毕后,可以将题目列入收藏夹,形成自己的错题本,也可以评估题目难度进行归类复习。回忆模式是一种便捷的复习方式,可以在文档试图中直接开启, 当文档切换到回忆模式时,划重点内容荧光笔高亮内容将被引去,用户可以直接对引去内容进行回忆。以上就是此次 master notes three 软件使用分享的全部内容, 希望大家可以有所收获,也期待大家与我们分享软件使用心得,感谢大家的观看与聆听!
![[网站开发入门指南45] 内边距和外边距 padding margin #html #css #javascript #前端开发 #网站开发](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/89b64a4d74aa6dfa15b87a93b51b51f4~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2090235600&x-signature=IO9mcgUsdZfe79QOOd84iG3zoiM%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260330211023D135C51B74BA02637F2F)
那在了解了这样的一个核模型的四层结构之后呢,我们就要开始来学习一下怎么去设置这每个层的这样的一个尺寸,让它产生一个效果 啊。这里呢我们要先说一下,就是我们这个演示过程中啊,主要就是以这个会计元素作为一个演示,因为虽然所有的这个标签,这个 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 一样,他一到四个值也是可以设置的。我这里呢就不重复演示了,大家自己呢可以去试一下。