html和css的作用,HTML和CSS的发现与理解

1. 结构性伪类选择器的功能定义

: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)；

2. counter()和counter-increment的工作原理

经过测试，发现；以下内容：

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

3. 元素分类

元数据元素： 由此可见主要是元素中的事情了，向浏览器提供信息和指示；

流元素： 听名字怪异，但是其实是规定这些元素可以成为父元素；

短语元素： 和流元素呼应，规定这些元素可以成为子元素。

受限元素： 这些元素要么没什么特别的含义，要么就只能用在一些非常有限的情况下。比如说，< li>元素只能有三种父元素< ul>、< ol>、< menu>；

虚元素： 不能包含任何内容的元素；这种元素只有两种表示形式：

仅有开始标签，没有结束标签：< 虚元素>

自闭合标签：< 虚元素 />

空元素： 没有任何内容的元素：< 元素名字>< /元素名字>，可以简写成自闭合标签：< 元素名字 />；

注意：

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

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

4. 属性影响

当html元素的hidden属性值设置为true时，会自动更改其css的属性display为none；

当把元素设置为浮动(float)时，会自动更改其属性display的值为block；

5. CSS background总结

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

background-position：表示背景图像的显示区域的左上角相对于图像左上角的坐标位置；

设置图片作为背景如果图片设置图片在X坐标方向重复，如果再设置图片在对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。

设置图片作为背景如果图片设置图片在Y坐标方向重复，如果再设置图片在对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。

如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无线。

6. CSS中渐变函数的特性

每个渐变至少需要指定2个色标color-stop；

对于任意2个相邻色标之间的颜色变化是：在前一个色标与后一个色标的位置之间，线性地把前一个色标的颜色过渡到后一个色标的颜色；

对于多个没指定位置的色标，它们的位置分别是：前面最近的有位置的色标的位置 与 后面最近有位置的色标的位置 之间的平分点；

如果第1个色标没有指定位置，则第1个色标的位置是渐变区域的起始位置；

如果最后1个色标没有指定位置，则最后1个色标的位置是渐变区域的结束位置；

对于非重复渐变，第1个色标位置之前的颜色是第1个色标的颜色；最后一个色标位置之后的颜色是最后一个色标的颜色；

对于重复渐变，会用渐变区域分别平铺第1个色标之前的区域 和 最后1个色标之后的区域 ，直到填满为止；

对于重复渐变，如果渐变渐变区域的长宽为零，则会用最后1个色标的颜色填充整个区域；

如果前面色标设置的位置大于后面色标设置的位置，则后面色标设置的位置无效，所有比前端色标的位置小的色标，都将用 大于自身位置的前面的色标中位置最大的那个色标的位置 作为自身的位置；

7. 绝对定位情况下top、right、bottom、left的特性

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

8. ::before和::after伪元素选择器

在::before和::after伪元素选择器中必须定义content属性；

浏览器会为这2个伪元素选择器分别生成相应的盒子，这些盒子是作为元素的非主盒子；

9. 弹性盒

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意：

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

容器先根据”flex-wrap"的属性值来确定是单行布局或多行布局，然后把条目分配到对应的行中，最后在每一行内进行空白空间的分配。

尺寸

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

假设：

弹性容器的主轴尺寸这ConSize；

该弹性容器的某行内有n个弹性子元素，

这些弹性子元素的flex-basis分别为Item1Basis、Item2Basis、Item3Basis......ItemNBasis；

这些弹性子元素的flex-grow分别为Item1Grow、Item2Grow、Item3Grow......ItemNGrow；

这些弹性子元素的flex-shrink分别为Item1Shrink、Item2Shrink、Item3Shrink......ItemNShrink；

这些弹性子元素的flex-shrink分别为Item1Size、Item2Size、Item3Size......ItemNSize；

BasisTotal = Item1Basis + Item2Basis + …+ ItemNBasis

GrowTotal = Item1Grow + Item2Grow + …+ ItemNGrow

ShrinkTotal = Item1Shrink + Item2Shrink + …+ ItemNShrink

则有：

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

当弹性容器在主轴尺寸上有多余的空间时，即：当 ConSize >= BasisTotal 时，有：

ItemXSize = ItemXBasis + ( ConSize - BasisTotal )*( ItemXGrow/GrowTotal )

当弹性容器在主轴尺寸上的空间不足时，即：当 ConSize <= BasisTotal 时，有：

ItemXSize = ItemXBasis + ( ConSize - BasisTotal )*( ItemXShrink/GrowShrink )

即：

ItemXSize = ItemXBasis - ( BasisTotal - ConSize)*( ItemXShrink/GrowShrink )

对齐

justify-content： 设置或检索 在 弹性容器的行的范围内 弹性盒子元素在主轴方向上的对齐方式。

操作范围：行；

操作对象：行内的弹性子元素；

适用于：flex容器；

备注：当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。

取值效果如下：

justify-content属性不同值的布局效果.jpg

align-content： 设置或检索 在 弹性容器的范围内 行在侧轴方向上的对齐方式。

操作范围：弹性容器；

操作对象：行；

适用于：多行的flex容器；

备注：请注意本属性在只有一行的伸缩容器上没有效果。

取值效果如下：

align-content属性的不同值的布局效果.jpg

align-items： 定义弹性盒子元素自己 在 弹性容器的行的范围内 在侧轴方向上的对齐方式。

操作范围：行；

操作对象：行内的弹性子元素；

适用于：flex容器；

取值效果如下：

align-items属性不同值的布局效果.jpg

align-self： 定义 在 弹性容器的行的范围内 弹性盒子元素在侧轴方向上的对齐方式。

操作范围：行；

操作对象：行内的弹性子元素；

适用于：flex子项

10. 字间距和行间距

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

它们的定义如下：

字符间距：letter-spacing

语法：

letter-spacing：normal | |

默认值：normal

适用于：所有元素

继承性：有

动画性：非normal值时

取值：

normal：默认间隔

：用长度值指定间隔。可以为负值。

：用百分比指定间隔。可以为负值。(CSS3)

说明：

检索或设置对象中的字符之间的最小，最大和最佳间隙。

该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后；

不能被应用于一行的开始和结束；

对应的脚本特性为letterSpacing。

单词间距：word-spacing

语法：

word-spacing：normal | |

默认值：normal

适用于：所有元素

继承性：有

动画性：非normal值时

取值：

normal：默认间隔

：用长度值指定间隔。可以为负值。

：用百分比指定间隔。可以为负值。(CSS3)

说明：

检索或设置对象中的单词之间的最小，最大和最佳间隙。

该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外。

判断是否为单词的依据是单词间是否有空格。

对应的脚本特性为wordSpacing。

行高：line-height

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

语法：

line-height：normal | | |

默认值：normal

适用于：所有元素

继承性：有

动画性：当值为 | 时

取值：

normal：允许内容顶开或溢出指定的容器边界。

：用长度值指定行高。不允许负值。

：用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。

：用乘积因子指定行高。不允许负值。

说明：

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

对应的脚本特性为lineHeight。

11. a标签的跳转特性

当把a标签作为按钮来用时，会有一个问题：a标签被点击时，会发生跳转；为解决此问题，我特意研究的a标签的跳转行为，总结如下：

在以下情况，点击 a 标签不会发生跳转：即不会触发加载资源，也不返回到页面顶部：

a 标签的 href 标签属性的属性值为以 # 开头 且 # 后有它非空格字符 的 字符串，如: 、 ；

a 标签的 href 标签属性的属性值为以 javascript: 开头 且 javascript: 后面的代码没有返回任何东西 或者 返回为 undefined 、 null 、 void 或者 void表达式，如: 、 、 、、、`；备注：关于void，请参考《JavaScript的发现与理解》；

在a 标签的 与点击相关的事件的处理器中调用是事件对象 event 的 preventDefault() 方法来阻止 a 标签的默认操作----跳转；

在以下情况，点击 a 标签会触发加载 a 的标签属性 href 所指定的资源：

a 标签的标签属性href的值是相对地址或者绝对地址；

在以下情况，点击 a 标签会触发重新加载当前的页面：

a 标签没有 href 标签属性，如: ；

a标签有 href 标签属性，但 href 标签属性没有值，如: ；

a 标签的 href 标签属性的属性值为空字符 "" 或 只有空格的字符串 " "，如: 、 ；

a 标签的 href 标签属性的属性值为以 ? 开头的字符串，如: 、 ；

在以下情况，点击 a 标签不会触发加载资源，但回返回到页面顶部：

a 标签的 href 标签属性的属性值为以 # 开头 且 # 后没有其它非空格字符 的 字符串，如: 、 ；

12.文本文件显示乱码

因为：

文本文件在保存时会以某种字符编码方案进行编码；

文本文件在显示时也会以村种字符编码方案进行解码；

所以：

如果文本文件以不同于编码时的字符编码方案进行解码，则就会出现乱码的现象；

解决方案：

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

13.HTML在浏览器中显示乱码

由于：

文本文件会以某种字符编码方式存储；

浏览器需要根据 HTML 文档的 meta 标签指定的字符编码方式来显示 HTML 文档；

所以：

当 HTML 文件存储的字符编码 与 meta 标签指定的字符编码 不一样时，就会出现浏览器显示乱码的现象；

解决方案：

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

在 HTML 4.01 中用以下方式：

在 HTML5 中 为 meta 标签 新增了 charset 属性，用来指定字符编码，所以在 HTML5 中有2种方式指定字符编码：

或者

注意：

HTML 文档中 meta 标签中定义的编码方式是用来告诉浏览器的，而 HTML 文件本身是以何种编码方式存储的 取决于 保存该文档的编辑器的设定；

14.before和after选择器选择的元素

E::before 选择器选中的是 E 元素的所有直接子元素的前面；

E::after 选择器选中的是 E 元素的所有直接子元素的后面；

15.解决浮动元素的父元素的高度塌陷的方法

方案1:在浮动元素后面增加一个兄弟块元素，并给该元素设置清除浮动 clear ；

方案2:通过在浮动元素的父元素使用 ::after 选择器在该父元素的内容中的最后面插入一个块元素，并给这个新插入的元素设置清除浮动 clear ；

方案3:给浮动元素的父元素的 overflow 属性设置为 hidden 或者 auto ；