做帖之常规性梳理复习
本帖最后由 马黑黑 于 2022-8-16 07:31 编辑 <br /><br /><style>#dady { margin: auto; width: 700px; height: auto; font: normal 1em sans-serif;}
#dady a { text-decoration: none; }
#dady a:hover { text-decoration: none; color: red; }
#dady > table { width: 100%; border-collapse: collapse; border-spacing: 0; border: none; }
#dady > table th { padding: 6px; border: 1px solid gray; background: olive; font-weight: bold; color: snow; text-align: center; }
#dady > table td { padding: 6px; border: 1px solid gray; }
#dady > table tr:nth-child(odd) { background: #ccc; }
#dady > table tr:nth-child(even) { background: #eee; }
#dady > table tr:hover { background: #aaa; color: red; }
</style>
<div id="dady">
</div>
<script>
let contAr = [
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1655916&fromuid=7130', 'CSS与HTML的关系及关联',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1656098&fromuid=7130', '帖子父盒子的常规属性',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1656188&fromuid=7130', '简单了解文档流',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1656212&fromuid=7130','明晰文档节点概念',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1656496&fromuid=7130','子元素布局的实现',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1656975&fromuid=7130','如何安置各子元素的物理位置',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1657848&fromuid=7130','弄清元素间的父子层级关系',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1658529&fromuid=7130','父元素令子元素全居中的办法',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1659182&fromuid=7130','文本设置常用方法与技巧',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1660942&fromuid=7130','关键帧动画@keyframes及其调用方法animation',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1662006&fromuid=7130','在帖子中使用音频媒体(一）',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1662541&fromuid=7130','在帖子中使用音频媒体（二）',''],
['/forum.php?mod=redirect&goto=findpost&ptid=61469&pid=1680189&fromuid=7130','在帖子中使用视频媒体',''],
];
let tbl = '<table><tr><th style="width: 60px;">序号</th><th>内容</th><th style="width: 120px;">备注</th></tr>';
contAr.forEach((item,key) => {
tbl += '<tr><td style="text-align: center">' + (key + 1) + '</td><td><a href="' + item + '">' + item + '</a></td><td>' + item + '</td></tr>';
});
tbl += '</table>';
dady.innerHTML = tbl;
</script>
一、CSS与HTML的关系及关联
拿T台比喻，CSS是做化妆师和更衣人，在后台发力；HTML是模特，走T台的主角。
做帖子时，CSS用 style 标签作为自己的标识，一般建议放在 HTML 代码之前：
<style>
/* CSS代码 */
</style>
<!-- html 代码 -->
style 是成对标签，有起始符 <style>，有结束符 </style>。起始符 <style> 是简写形式，规范的写法一般是 <style type="css/text">，不过现代浏览器不在乎这些，可以随意。
CSS定义的样式的描述都是基于选择器，例如：
<style>
#papa { /* 内容 */}
.mama { /* 内容 */ }
p { /* 内容 */ }
</style>
#papa 我们可以理解为 id选择器，HTML要通过 id="名称" 调用它，而且，在同一个web页里，只能有一个盒子调用它一次：
<div id="papa"></div>
.mama 选择器我们可以理解为 类选择器，HTML可以反复调用它，调用方式是通过 class="名称"：
<div class="mama"></div>
<p class="mama"></p>
<span class="mama"></span>
绿色代码中的 p 选择器，叫标签选择器，它直接使用 HTML 的标签名称。除了 p，还有 div、span、img 等等等等，做帖时不要直接这样使用，它会影响文档的其他地方，如何使用今后再专题讲解。
小结：CSS是样式制定者，属于后台的工作者；HTML是样式渲染载体，属于前台风光或出丑的角色。
本帖最后由 马黑黑 于 2022-7-24 09:01 编辑
二、帖子父盒子的常规属性
首先得有个选择器名称，可以用id选择器，也可以用类选择器。我们用id选择器来举例说明：
<style>
#papa { /* 代码 */ }
</style>
<div id="papa"></div>
#papa 选择器体现在了 HTML 代码中的 id="papa" 之上，这是CSS选择器和HTML关联的做法。如果是 类选择器，.papa {/* 代码 */}，则HTML代码用 class="papa" 来建立二者间的关联。
下面来讲讲 #papa 的具体设置的属性代码（为了简洁我们将 <style>和</style>暂时去掉）：
#papa {
position: relative; /* 设置相对定位 */
width: 1024px; /* 设置宽度 */
height: 640px; /* 设置高度 */
left: -214px; /* 设置左边偏移量 */
background: #ccc url('图片地址'); /* 设置背景颜色和背景图片 */
box-shadow: 3px 3px 20px #000; /* 设置阴影 */
border-radius: 6px; /* 设置圆角 */
}
做宽幅HTML帖子，上述的代码中，除了后两个属性不是必须的，前面的缺一不可。背景颜色建议加上与图片主色相近的颜色，这样当图片失效时整体还可一看。背景图片尺寸如果与盒子的尺寸一致，像上面这么设定就可以，否则的话，建议这样处理，以保证背景的美观：
background: #ccc url('图片地址') no-repeat center / cover;
如果需要，还可以在父盒子设置字体，所设置的字体将在子元素中得到继承（除非子元素设置了自己的字体）。
此外，父盒子还可根据需要加入其它属性，如 padding（内边距）、margin（外边距）、border（边框线）等。例如上外边距、边框线：
margin-top: 50px;
border: 1px solid red;
盒子的属性没有顺序要求，也可以不分行，但每一个属性和属性值写完，需要用小角分号表达。小角分号是属性和属性之间的分隔符号。
本帖最后由 马黑黑 于 2022-7-24 07:33 编辑
三、简单了解文档流
了解文档流是为了在父盒子中部署内容即布局子盒子做准备。
一个帖子，得先有一个父盒子，然后帖子所用到的内容就安放在这个父盒子里。盒子是HTML5的理念，指像 div 这样的标签，它们都是用来装文本、图片甚至装同类盒子的，所以又叫容器。父盒子里面的内容也是一个一个的盒子，可以是 div，p，img，table，input等等有可视界面的元素（标签），很多时候还会用到一些符号类的元素，如 br、hr 等等。这些内容，都涉及到文档流的问题。
文档流，就是文档中盒子自然安放时它本应在的位置。我们前面的父盒子 id="papa" 的那个 div，它如果没有做任何定位设置，则它的出现位置就和发一个普通文字帖时的状况一样，是自然而然的文档流位置。但HTML帖子宽度尺寸会突破预设留给它的横向空间，因此，为了美观，我们用了 position: relative; 这样的相对定位方式，并通过 left: -214px; 将其水平横向向左移动，使之在文档视口中横向居中。
同样的，papa 盒子里要摆放内容，例如我们放一张图片、一行文字：
<div id="papa">
<img src="图片地址" alt="" />
<p>本尊花样写真，敬请欣赏！谢谢！</p>
</div>
如此，图片在上面，文字在下面。图片与文字代码对调一下位置，则文字在上面，图片在下面。
这就是文档流——文档自然流淌的位置关系。
本帖最后由 马黑黑 于 2022-7-24 08:22 编辑
四、明晰文档节点概念
我们已经知道，papa 盒子（<div id="papa"></div>）是我们帖子的父元素，也称为父盒子。我们要做的HTML帖子这个“家”，是由它撑起的。它还是容器，同时充当帖子这个“家”的屋子，“家”的一切都规划在它里面。
我们说的父盒子（元素）和子盒子（元素）其实就是用来描述文档节点的术语。上一节复习课谈到的文档流，就是文档中一个一个的节点。可以说，帖子是web页的微缩，它也存在文档节点。像下面的代码：
<div id="papa">
<p>这是我的照片</p>
<img src="照片url" alt="" />
</div>
第一行和最后一行，是一个文档节点（下称papa），它里面又有两个文档节点，一个 p 标签的节点（下称p），一个 img 标签的节点（下称img）。我们先来理清它们的关系：
papa节点是父节点，它使用起始符 <div> 和收尾符 </div> 将另外两个节点包裹起来。
p节点和img节点是并列关系（它们两个彼此间没有谁包裹谁，只是排队中的前后关系，层级是一样的，谁先谁后而已），同为papa父节点的子节点。
所以这是一个两层节点的HTML结构，节点数是三个，一个父节点、两个并列关系的子节点。
为了明晰节点层级关系，书写HTML代码时，子节点代码都统一缩进固定的距离。再看下面的代码，先体会一下代码的缩进书写方式：
<div id="papa">
<div>
<p>这是我的照片</p>
<img src="照片url" alt="" />
</div>
</div>
不同层级的节点，书写时缩进的距离不一样，一般地，父层级的顶格书写，第二层级的缩进一个tab或四个空格的距离，第三层加倍缩进，依此类推。
代码缩进不是必须的，这是考虑代码易读性而做出的规范。实际上，所有代码都可以写在一行之内，如果你愿意。
上面的代码，添加了一个 div 节点，它的层级位置是 papa 的儿子，且它包裹了 p节点 和 img节点，一进家就既做儿子又当爸的，幸福是不是来的太快了？
这是三个层级的HTML节点结构。多层级节点结构是web文档必须的，做帖子也是如此。所以HTML如果再来兼顾自身的样式描述，语句就会很长，层级关系容易混乱，故而我们会更多地依赖 CSS 来完成样式的描述（后台化妆）。
本帖最后由 马黑黑 于 2022-7-24 19:53 编辑
五、子元素布局的实现方式
先约定一下关于概念的指称问题。我们常常提到父子元素，或父子盒子，它们的指向都是一样的，都是针对HTML的标签而言，也可以称为父子标签。通常，盒子有容器的意味，我们谈到容器元素时，更多地称之为父元素，而子层的标签，我们习惯称之为子元素，但有时候也会混用这些称呼，知道其指向就行。
在一个父盒子里面放置若干个子标签，即是做HTML帖子要干的事情。如何放置子标签是做帖子的重要工作环节。
一般来说，依靠文档流做不出精美的帖子，毕竟HTML帖子不是像纯文本那样的内容。帖子里的子元素需要布局，自然的文档流又不能满足需求，所以，给子元素定位是必须的。
之前，papa父盒子用了 position: relative; 定位，这是相对定位，用意有三个：一是，可以调节 papa 的横向位置，纵向也可以调节；二是，更重要的，让帖子在整个web页的节点中能有一席之地。position定位方式主要有三个设定值，一是 fixed（固定定位）、二是relative（相对定位）、三是absolute（绝对定位），固定和绝对定位在文档流中不占据地盘，它们所定位到的xy坐标点上及其宽高所占的空间可以再部署其他的元素，如果没有部署，则按文档流的自然状况是谁在那个位子就是谁，连同固定和绝对定位的元素一同堆叠在一处；而相对定位不一样，相对定位的元素，即使通过偏移将其移动到了其他地方，它在文档流中本应有的位置依然存在，自然部署的文档流中的其他元素不能自然地占用它的位置和空间（通过绝对、固定定位的除外，即使如此，那个位置、空间仍然是相对定位元素的原始位置和空间）；三是，它做定位，子元素所做的定位，才会以它为依据，否则，是以上一个做了定位的元素（爷爷或大于爷爷的辈分的元素）为依据。
子元素的定位，建议使用 absolute，绝对定位。例如，我们想让播放器盒子 player 安放在左下角，并与父元素的边框有 10px 的距离，则下面的CSS代码里，红色部分就是实现这一定位目标的：
#papa {
position: relative;
/* 其他代码 */
}
#player {
position: absolute;
left: 10px;
bottom: 10px;
width: 200px;
height: 80px;
/* 其他代码 */
}
父盒子相对定位，子元素绝对定位、并设置了 left 和 bottom值为 10px ，前面预设的子元素定位就能完美实现。
要注意的是，元素只有做了 position 设定，所做的 left、top 实际偏移定位才有效，而当父元素没有做 position 设定，则子元素的偏移定位不以父元素的边界做依据，而是以上一个做了 position 定位的爷爷辈或以上的盒子的边界做依据。
任何时候我们都可以设定元素的 left、right、top和bottom值，但如果通过它们来定位元素的偏移，则必须是子元素的 position 做了设置。在帖子里，用 right 和 bottom 取代 left 和 top 的前提是，子元素用了绝对定位。
偏移定位仅需要也只能要一对分别表示xy坐标的属性值，left 和 right 属于 X坐标，top 和 bottom 属于 Y坐标。所以，left可以和top、bottom配对，不能和right配对，top可以和left、right配对，但不能和left配对。选用哪一个属性值来做偏移定位，原则之一是哪一个的计算更简单。
当元素将来需要通过 left、top 属性值做动画位移时，子元素的定位还是要老老实实按 left、top 进行偏移，该计算则去计算像素值，这是较为明智的选择，原因是动画的位移多数情况下与元素的初始位置关联，当动画指令读取不出原始 left、top属性值之时，它极可能会发生异常。
小结：本复习课字数多，但都围绕定位开讲。帖子子元素的定位依赖于父元素的定位，子元素尽量使用绝对定位（absolute），并通过 left、top、right和bottom来确定自己在父盒子中的位置（如果需要也可以游离于盒子之外）。
本帖最后由 马黑黑 于 2022-7-24 17:57 编辑
六、如何安置各子元素的物理位置
papa之下，可以有多个子元素，有它们的共同参与才能构建了一张精美的帖子。那么，子元素彼此间的物理位置关系问题就是我们要处理的一个重要问题。
比如一幅图片，一个播放器，几行文本，它们可以是并列关系，作为父盒子 papa 的共同的儿子。体现在HTML代码层面大概是如下这个结构：
<div id="papa">
<img id="mypic" alt="" src="图片url" />
<div id="player"><!-- 播放器的其他代码 --></div>
<div id="mytext"><!-- 文本内容 --></div>
</div>
以上，papa里面，img、两个 div，是哥仨，它们现在是并列关系，如果按照自然文档流，它们的位置是图片在上面，中间是播放器，文本在下面。前面谈到，子元素都应做绝对定位，先看怎么给图片偏移定位：
/* 图片 */
#mypic {
position: absolute; /* 绝对定位 */
width: 300px; /* 宽度 */
height: 400px; /* 高度 */
left: calc(50% - 150px); /* 水平居中 */
top: calc(50% - 200px); /* 垂直居中 */
}
这里，我们将图片设置为左右、上下都居中，是使用了 left 和 top 属性的设定使之产生偏离而达成的效果。若不做left、top设定，所有绝对定位的元素默认left和top值都为0，没有偏移，都在父元素的左上角，换言之，相对于父元素而言，子元素此时的左上角的xy坐标是{0，0}。定位子元素居中，上述例子是使用了CSS的 calc 运算，以前专门介绍过，这里再简单解释一下用它来实现元素居中的计算，以水平方向为例：
left: calc(50% - 150px);
calc 运算，运算符（加减乘除等）和数值之间必须各隔一个空格。50%指的是父元素的长度的一半，再减去150px即子元素自身宽度的一半，这样定位子元素的left值就可以使之水平居中。calc运算是很特殊的运算，能进行违规的运算，比如百分比减去像素值，这在数学中是绝不许可的，CSS可以。
播放器放哪儿，请参照前面的课程。
文本放哪里呢？这本来需要自己布置，作为复习，我们预设放在父元素右上部分：
/* 文本 */
#mytext {
position: absolute; /* 绝对定位 */
width: 180px; /* 宽度 */
height: 60px; /* 高度 */
top: 20px; /* 上边值 */
right: 20px; /* 右边值 */
font: normal 30px / 60px '新宋体'; /* 字体：30位文本大小，60是行高（与元素高度同） */
color: blue; /* 前景色 */
text-align: center; /* 文本水平居中 */
}
这哥仨都安置好了，各自在 papa 屋子里找到了自己的地儿，帖子现在有模有样了。做到这里可以保存然后预览，看看大体的布局效果，再做微调然后才继续下一步的深度创作。
这个得好好学习一下。谢谢老黑，辛苦了！{:4_191:} 加林森 发表于 2022-7-24 18:43
这个得好好学习一下。谢谢老黑，辛苦了！
认真琢磨这个教程，基础知识会有所提升，技能会得到强化 马黑黑 发表于 2022-7-23 21:58
一、CSS与HTML的关系及关联
拿T台比喻，CSS是做化妆师和更衣人，在后台发力；HTML是模特，走T台的主角。 ...
这个我真的有时候是瞎捣鼓，没有按顺序做的 小辣椒 发表于 2022-7-24 19:48
这个我真的有时候是瞎捣鼓，没有按顺序做的
这个教程难度不大，都是基础性的东东 马黑黑 发表于 2022-7-24 10:32
五、子元素布局的实现方式
先约定一下关于概念的指称问题。我们常常提到父子元素，或父子盒子，它们的指 ...
一面看，一面想想，感觉还是要多看几遍 马黑黑 发表于 2022-7-24 17:50
六、如何安置各子元素的物理位置
papa之下，可以有多个子元素，有它们的共同参与才能构建了一张精美的帖 ...
这些熟练了，做帖就轻松了，自由自便了 我还真的不熟，每次都是自己瞎捣鼓{:4_170:} 马黑黑 发表于 2022-7-24 19:45
认真琢磨这个教程，基础知识会有所提升，技能会得到强化
是的。我先看了的，得慢慢理解与消化了。 加林森 发表于 2022-7-24 20:33
是的。我先看了的，得慢慢理解与消化了。
基础知识与基本技能，错误无此好店{:5_106:} 马黑黑 发表于 2022-7-24 20:55
基础知识与基本技能，错误无此好店
知道的。我收藏，起来。 小辣椒 发表于 2022-7-24 20:06
我还真的不熟，每次都是自己瞎捣鼓
还是要理清一下应知应会的知识点 加林森 发表于 2022-7-24 20:57
知道的。我收藏，起来。
{:5_108:} 小辣椒 发表于 2022-7-24 20:03
一面看，一面想想，感觉还是要多看几遍
作为复习，有跳跃性，慢慢领会就好