[HTML、CSS]知识点

【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）
https://www.cnblogs.com/cnb-yuchen/p/18032061
出自【进步*于辰的博客】

注：本文中“子级”指子级盒子或子级标签；“逻辑位置”指根据理论推断的所在位置，“实际位置”指实际显示的所在位置。

目录

• 1、知识点扩展
• 2、标签
  • 2.1 video
  • 2.2 input
  • 2.3 画布 Canvas
    • 2.3.1 属性设置
    • 2.3.2 示例：画动态时钟
  • 2.4 选项列表 datalist
  • 2.5 折叠列表 details
• 3、关于 margin
• 4、overflow: hidden 的用法
• 5、动态 height
• 最后

1、知识点扩展

1. 细节与使用经验。
2. 网页特效实现示例。

2、标签

2.1 video

参考笔记一，P4.2/4。

1. <video>标签引入视频默认不会自动播放，需设置属性autoplay: muted；
2. <video>不同于<img>，比例不能随意改变，需设置属性object-fit: cover进行拉伸。

2.2 input

参考笔记一，P8.11、P9.14。

属性：

1. autofocus：自动聚集；
2. pattern：设置正则表达式；
3. novaliable：取消提交表单时对整个表单的验证；
4. autocomplete = "on/off"设置表单是否打开自动完成功能；
   注：“自动完成功能”指将表单过去输入过的信息、在选中时自动填充。

2.3 画布 Canvas

推荐一篇博文《学习HTML5 Canvas这一篇文章就够了》（转发）。
参考笔记一，P4.9/10/12。

注：下文中的“canvas1”是Canvas标签，代码是在js中执行。

2.3.1 属性设置

1. 修改参考点：即修改坐标原点。canvas1.translate(x, y)；
2. 旋转坐标轴：canvas1。rotate(<弧度>)；

修改刻度的width、height：

注：刻度的width、height与Canvas标签的width、height（用css修改）不是一个概念。

方法1、内嵌式修改width、height属性。

<Canvas id="canvas1" width="500" height="500" ></Canvas>

方法2、js修改width、height属性。

canvas1.width = 500;
canvas1.height = 500;

2.3.2 示例：画动态时钟

思想：

1. 通过旋转坐标轴的方法画出刻度和时分秒针；
2. 定义定时器（interval），时隔1s，先画出刻度，再根据时分秒针转动联系画出时分秒针。注意：先擦除（覆盖），再画。

转动联系：

1. 秒针转动一圈，分针转动π/30；
2. 分针转动一圈，时针转动π/6。

2.4 选项列表 datalist

笔记一，P9.12/13。

需要与<input>连用，用于存放<input>的可选值。
示例：

country：<input type="text"list="list1">
<datalist id="list1">
	<option value="China" />
	<option value="American" />
</datalist>

2.5 折叠列表 details

<summary>是列表的标题。
示例：

<details>
	<summary>country</summary>
	<p>China</p>
	<p>American</p>
</details>

3、关于 margin

参考笔记一，P8.1/7。

1. 相邻同级盒子的margin会相互覆盖；
2. 若父级设置了border，则不会受子级的margin影响，即使子级的margin大于父级的margin；
3. 若父级未设置border，则子级和父级的margin会相互覆盖。其中，若子级的margin大于父级的margin，父级会被“挤开”，这种现象称为$外边距塌陷$；（解决方法：第2点）
4. 若父级设置了定位方式，则不会受子级的margin影响。

4、overflow: hidden 的用法

参考笔记一，P8.2。

1. 隐藏多余部分；
2. 动态height。
   当子级个数未知时，无法确定父级的height（注意：此时子级肯定设置了浮动float），设置父级overflow: hidden可实现动态height。当然，实现动态height还有一种方法：position: aboslute/fixed，但若使用此方法，则无法使用margin: 0 auto进行盒子水平居中，而overflow: hidden可以；
3. 解决外边距塌陷问题。

5、动态 height

参考笔记一，P8.9。、

实现动态height的前两种方法上文已阐述。

方法3：伪选择器。

伪选择器after的作用：创建一个子级，此子级的“逻辑位置”在所有子级的最后。

操作：为父级用:after创建一个盒子，再清除此盒子的相应浮动（clear: xx）。

原理：由于after是为父级创建盒子，故此盒子的“逻辑位置”在所有子级的最后。因为此盒子清除了浮动，则不再受其他子级影响，故此盒子的“实际位置”在最后一个子级后面。因此，父级只能扩展height来保证能“容纳”此盒子，即动态height。为什么清除浮动？因为其他子级都设置了浮动，而此盒子未设置浮动，故此盒子会因其他盒子浮动而向上移动。因此，需要清除浮动来消除影响使其停留在原位置。

说明示例：
1、演示。

ul:after {
	content: "6";// 设置文本内容是"6"
	clear: left;// 清除左浮动
	display: block;// 设置为块级元素,即默认占一行
	width: 20px;
	height: 20px;
	background-color: gray;
}

从演示效果可以看出，前5个子级都设置了左浮动，故此盒子需要清除左浮动。注意：此盒子必须设置为块级元素display: block（缘由我暂未知，需要大家自行查阅和研究了）。

2、实现动态height。

ul:after {
	content: "";
	clear: left;
	display: block;
}

最后

这些笔记是当年学习前端原生技术时做的，是基于容易忘记、需要注意或新知识点考虑所记录的。做笔记肯定不是原版原抄，而是经个人理解后的精简，故如一些基础知识便不在此列，如：$("#xx").css({})，这是jq设置盒子样式的一个基础函数。

我的发展方向是后端，平日（包括工作）涉及前端都是框架，很少再使用这些前端原生技术。此文章于今年撰写，过去再熟悉平日少接触都会生疏，所以可能有些阐述会略有问题。

知识点所涉及的内容，我会斟酌适当地做一些注释，如果大家不理解，只能请大家另寻高见。

本文中的例子是为了方便大家理解和阐述知识点而简单举出的，旨在阐明知识点，并不一定有实用性，仅是抛砖引玉。

本文持续更新中。。。