做帖之常规性梳理复习

小辣椒

马黑黑 发表于 2022-7-24 20:57
还是要理清一下应知应会的知识点

是的，我其实很多东西都是混淆在一起的，瞎捣鼓

马黑黑

小辣椒 发表于 2022-7-24 20:58
是的，我其实很多东西都是混淆在一起的，瞎捣鼓

瞎鼓捣凭的是经验，虽然有效，却是常常不得要领，尤其是出了错，不知问题在哪儿、从何下手

加林森

马黑黑 发表于 2022-7-24 20:57

小辣椒

马黑黑 发表于 2022-7-24 20:59
瞎鼓捣凭的是经验，虽然有效，却是常常不得要领，尤其是出了错，不知问题在哪儿、从何下手

是啊，会浪费时间

小辣椒

马黑黑 发表于 2022-7-24 20:58
作为复习，有跳跃性，慢慢领会就好

还是得花时间多看看，多领会，才会掌握的

马黑黑

小辣椒 发表于 2022-7-24 21:08
还是得花时间多看看，多领会，才会掌握的

对，要付出，不能取巧，不能急于求成

马黑黑

小辣椒 发表于 2022-7-24 21:07
是啊，会浪费时间

最主要的，还找不出原因和解决办法

小辣椒

马黑黑 发表于 2022-7-24 21:26
最主要的，还找不出原因和解决办法

是的，所以经常这样会玩的很累

小辣椒

马黑黑 发表于 2022-7-24 21:24
对，要付出，不能取巧，不能急于求成

想偷懒都不行

马黑黑

小辣椒 发表于 2022-7-24 21:28
是的，所以经常这样会玩的很累

所以咬咬牙学几个是必要的

马黑黑

小辣椒 发表于 2022-7-24 21:29
想偷懒都不行

偷懒学到的东西不会牢固

小辣椒

马黑黑 发表于 2022-7-24 21:29
所以咬咬牙学几个是必要的

我平时玩都来不及，得抽空上来看看

马黑黑

小辣椒 发表于 2022-7-24 21:31
我平时玩都来不及，得抽空上来看看

小辣椒

马黑黑 发表于 2022-7-24 21:29
偷懒学到的东西不会牢固

发现多练习也是好的

马黑黑

小辣椒 发表于 2022-7-24 21:33
发现多练习也是好的

做帖就是个练习过程

小辣椒

马黑黑 发表于 2022-7-24 21:40
做帖就是个练习过程

是的，黑黑我下了，马上10点了

马黑黑

小辣椒 发表于 2022-7-24 21:55
是的，黑黑我下了，马上10点了

88

马黑黑

七、弄清元素间的父子层级关系

当 papa div 只有少量几个并列关系的子元素时，我们很容易弄清楚它们之间的逻辑关系，不至于陷入混乱。类似上一节复习课的例子：

<div id="papa">
    <img id="mypic" src="图片URL" alt="" />
    <div id="player"><!-- 播放器代码 --></div>
    <div id="mytext">文本</div>
</div>

像这样简单的并列子元素，一张图片、一个播放器div、一个文本div，确实简洁明了，不易搞错。但现在，播放器的代码我们要进一步完善，id="player" 的 div 就得拥有自己的诸多子元素甚至是孙元素，例如它需要有按钮、进度条和进度百分比显示：

<div id="papa">
    <img id="mypic" src="图片URL" alt="" />
    <div id="player">
        <input id="btnplay" type="button" value="播放" />
        <input id="slider" type="range" min="0" max="100" value="0" />
        <span id="per">0%</span>
    </div>
    <div id="mytext">文本</div>
</div>

按钮、进度条和进度百分比显示盒子现在已经安置到了播放器的div，从元素层级的逻辑关系上讲，它们是 player 的子元素，所以 player div 通过自己的起始符 <div ...> 和收尾符 </div> 将它们全部包裹起来；而，如我们已经知道，player 是 papa 的子元素，那么，对 papa 而言，子元素的子元素就是孙子辈的元素（简称孙元素）。这就是元素间的逻辑关系举例，我们没有对之进行全方位描述，相信大家可以举一反三。

元素间的逻辑关系就是元素间的层级关系，形象地说就是：谁是父层、谁是子层、谁是孙层、谁是孙孙层……。明晰元素间的逻辑关系有助于我们在组织代码时减少错误的发生，标签何处起始、何处收尾思路就会非常清晰。当然，我们还需要养成一些好的书写代码的习惯，例如每写一个有起始、收尾的标签代码，先一口气写完它们，再将起始符和收尾符断行分开，然后再缩进写子标签的代码；还有，就像写文章一样，先列好提纲也是个好习惯，做帖子之前先思考好需要哪些子元素，父元素的子元素就好比是文章的提纲，把构思好的子元素这个“提纲”一口气写完，而后再逐一去处理各个子元素的子元素。当然，提纲可以在后续创作中增删，这是小事情。

这里再强调一下层级与缩进问题：元素间的关系应能从缩进的样式看得出层级关系。一个 tab 键的退格或四个空格是父子元素的缩进距离，孙元素对应于爷爷元素应缩进两倍的距离，更多的延伸关系以此类推。

元素间的逻辑关系也可以体现在CSS上。假如我们希望父元素下的 span 标签是一个样式，id="player" 的 div 下的 span 是另一个样式，可以用两个类选择器分别定义，通过HTML代码的 class="选择器" 一一带入各自的样式，麻烦但实实在在且能反复调用。也可以统一指定样式，无需使用class：

#papa > span { /* 样式代码 */ }
#player span { /* 样式代码 */ }

#papa 为什么加入符号“>”呢？“#papa > span”表明，仅针对其下第一层级的子元素 span 做样式定义，第一层级以外还有 span 的话它不管；而 “#player span”，没有符号“>”，它就不论 span 和它的层级关系，其下的儿孙辈们统统使用这个样式（除非后续的儿孙辈又设定了子样式——子样式会覆盖父样式）。

本节重点：明晰帖子所用元素间的层级关系，以适当的缩进方式书写不同层级的HTML标签代码，元素的层级关系可在CSS中有所体现，亦可通过class制定针对多子孙元素的不同层级的样式。

加林森

再来学习！

马黑黑

八、父元素令子元素全居中的办法

子元素在“父元素定位+自身绝对定位”的前提下，通过设定left或top值为“calc(50% - (自身宽或高除以2)px”可全居中，即绝对居中，就是水平和垂直方向都居中，但那是子元素的行为。父元素作为一家之主，也有能力令所有子元素绝对居中，较常用的方法有两个，都是基于 display 设定的。display 指显示方式，CSS将其作为一个属性，用于设置元素的显示形态，如不显示（none）、行内内联样式（inline）、行内块样式（inline-block）、块样式（block）等；还可用于设置元素的布局方式，如弹性布局（flex）和网格布局（grid），我们本节就是讲讲通过父元素的 flex 和 grid 布局令其下子元素绝对居中，以下两组代码的红色部分是实现子元素全居中的关键：

方法一：弹性布局(flex)

#papa {
        margin: auto;
        width: 1200px;
        height: 640px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
}

方法二：网格布局（grid）

#papa {
        margin: auto;
        width: 1200px;
        height: 640px;
        display: grid;
        place-items: center;
        position: relative;
}

网格布局（grid）和弹性布局（flex）令子元素绝对居中的设置都不复杂，都只需简单设置两三个属性的事情。而且，它们不依赖于自身的 position 设定，也不依赖于子元素的 position 配套设定，直接绝对居中，不过，帖子和帖子的子元素总要做位置偏移，还是建议给帖子所用到的元素采取配套的 position 定位方式，即“父 relative + 子 absolute”的方式。

子元素绝对居中的应用场景很多，比如做圆环环绕的效果，子元素绝对居中之后通过 transform 的 rotateY + translateX 能够快速实现，无需考虑  transform-origin 圆点设置。即便用不上，设置了子元素绝对居中也不会妨碍给元素设置 left 和 top 的操作。