HTML和CSS的发现与理解

发布网友发布时间：2022-10-20 19:04

共1个回答

热心网友时间：2024-12-04 03:35

:first-child：选择是其父元素中的第1个子元素的元素；
:last-child：选择是其父元素中的最后一个子元素的元素；
:nth-child(n)：选择是其父元素中的第n个子元素的元素；
:nth-last-child(n)：选择是其父元素中的倒数第n个子元素的元素；
:only-child：选择是其父元素中的唯一的子元素的元素；
:only-of-type：选择是其父元素中的唯一的某个元素类型的子元素的元素；
:nth-of-type(n)：选择其父元素中的第n个某(任何)元素；
:nth-last-of-type(n)：选择其父元素中的倒数第n个某(任何)元素；

注意：
n可以是任意正整数，当直接写n时间，代表正整数变量（自增器，从1自增，增量为1）；

经过测试，发现；以下内容：
counter()用来生成计数器的占位符，如果指定的计数器没有创建，则会创建盯应的计数器；每个计数器有一个变量（我称之为“计数变量”）保存当前的计数；counter-increment用来对其指定的计数器的计数器的计数变量进行递增；每应用一次counter-increment，就递增一次其指定的计数器的计数变量；

元数据元素：由此可见主要是<meta>元素中的事情了，向浏览器提供信息和指示；
流元素：听名字怪异，但是其实是规定这些元素可以成为父元素；
短语元素：和流元素呼应，规定这些元素可以成为子元素。
受限元素：这些元素要么没什么特别的含义，要么就只能用在一些非常有限的情况下。比如说，< li>元素只能有三种父元素< ul>、< ol>、< menu>；
虚元素：不能包含任何内容的元素；这种元素只有两种表示形式：

注意：
空元素和虚元素的区别：空元素描述的是元素内容为空时的状态；虚元素描述的是元素不允许有内容；

元数据还好理解，就是流元素和短语元素好奇怪，举个例子，div既可以是流元素也可以是短语元素，因为它能包含其他的元素也能被其他的元素包含。但是像< b>这样的就仅仅是短语元素了。

一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-repeat center top ;（解释首先设置背景颜色紧跟设置图片作背景紧跟图片是否重复然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须，一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置）

详细内容请参考《 CSS中渐变特性的研究》

在绝对定位的情况下，如果元素没有设置宽度width，且设置了left和right，则元素的宽度width会被属性left和right伸缩，即元素真实的宽度width会适合于left和right的值；同样，对于元素的高度height与top和bottom之间，也存在这种关系；

在::before和::after伪元素选择器中必须定义content属性；
浏览器会为这2个伪元素选择器分别生成相应的盒子，这些盒子是作为元素的非主盒子；

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

注意：

弹性子元素的主轴尺寸的公式为：

假设：

则有：
对于任意一个弹性子元素ItemX，有：

justify-content：设置或检索在弹性容器的行的范围内弹性盒子元素在主轴方向上的对齐方式。
操作范围：行；
操作对象：行内的弹性子元素；
适用于：flex容器；
备注：当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
取值效果如下：

align-content：设置或检索在弹性容器的范围内行在侧轴方向上的对齐方式。
操作范围：弹性容器；
操作对象：行；
适用于：多行的flex容器；
备注：请注意本属性在只有一行的伸缩容器上没有效果。
取值效果如下：

align-items：定义弹性盒子元素自己在弹性容器的行的范围内在侧轴方向上的对齐方式。
操作范围：行；
操作对象：行内的弹性子元素；
适用于：flex容器；
取值效果如下：

align-self：定义在弹性容器的行的范围内弹性盒子元素在侧轴方向上的对齐方式。
操作范围：行；
操作对象：行内的弹性子元素；
适用于：flex子项

在CSS中，可以通过CSS属性letter-spacing或word-spacing设置字间距；但没有直接设置行间距的属性，不过可以通过设置行高属性line-height来实现设置行间距的效果；
它们的定义如下：

语法：

取值：

说明：
检索或设置对象中的字符之间的最小，最大和最佳间隙。
该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后；
<' letter-spacing '> 不能被应用于一行的开始和结束；
对应的脚本特性为letterSpacing。

语法：

取值：

说明：
检索或设置对象中的单词之间的最小，最大和最佳间隙。
该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外。
判断是否为单词的依据是单词间是否有空格。
对应的脚本特性为wordSpacing。

可以通过line-height设置行的高度，从而达到调节行间距的效果；

语法：

取值：

说明：
检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
对应的脚本特性为lineHeight。

因为：

解决方案：
在打开文本文件的软件中更改解码该文本文件的字符编码方案为该文本文件在编码（保存）时选择的字符编码方案；

由于：

解决方案：
在 HTML 文档中通过 meta 标签告诉浏览器 HTML 文件的正确的字符编码方式，如下：

注意：