做帖之常规性梳理复习

马黑黑

马黑黑

一、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是样式渲染载体，属于前台风光或出丑的角色。

马黑黑

二、帖子父盒子的常规属性

首先得有个选择器名称，可以用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;

盒子的属性没有顺序要求，也可以不分行，但每一个属性和属性值写完，需要用小角分号表达。小角分号是属性和属性之间的分隔符号。

马黑黑

三、简单了解文档流

了解文档流是为了在父盒子中部署内容即布局子盒子做准备。

一个帖子，得先有一个父盒子，然后帖子所用到的内容就安放在这个父盒子里。盒子是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>

如此，图片在上面，文字在下面。图片与文字代码对调一下位置，则文字在上面，图片在下面。

这就是文档流——文档自然流淌的位置关系。

马黑黑

四、明晰文档节点概念

我们已经知道，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 来完成样式的描述（后台化妆）。

马黑黑

五、子元素布局的实现方式

先约定一下关于概念的指称问题。我们常常提到父子元素，或父子盒子，它们的指向都是一样的，都是针对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来确定自己在父盒子中的位置（如果需要也可以游离于盒子之外）。

马黑黑

六、如何安置各子元素的物理位置

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 屋子里找到了自己的地儿，帖子现在有模有样了。做到这里可以保存然后预览，看看大体的布局效果，再做微调然后才继续下一步的深度创作。

加林森

这个得好好学习一下。谢谢老黑，辛苦了！

马黑黑

加林森 发表于 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之下，可以有多个子元素，有它们的共同参与才能构建了一张精美的帖 ...

这些熟练了，做帖就轻松了，自由自便了

小辣椒

我还真的不熟，每次都是自己瞎捣鼓

加林森

马黑黑 发表于 2022-7-24 19:45
认真琢磨这个教程，基础知识会有所提升，技能会得到强化

是的。我先看了的，得慢慢理解与消化了。

马黑黑

加林森 发表于 2022-7-24 20:33
是的。我先看了的，得慢慢理解与消化了。

基础知识与基本技能，错误无此好店

加林森

马黑黑 发表于 2022-7-24 20:55
基础知识与基本技能，错误无此好店

知道的。我收藏，起来。

马黑黑

小辣椒 发表于 2022-7-24 20:06
我还真的不熟，每次都是自己瞎捣鼓

还是要理清一下应知应会的知识点

马黑黑

加林森 发表于 2022-7-24 20:57
知道的。我收藏，起来。

马黑黑

小辣椒 发表于 2022-7-24 20:03
一面看，一面想想，感觉还是要多看几遍

作为复习，有跳跃性，慢慢领会就好