[HTML、CSS]知识点

【版权声明】未经博主同意，谢绝转载！（请尊重原创，博主保留追究权）
https://blog.csdn.net/m0_69908381/article/details/130176402
出自【进步*于辰的博客】

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

文章目录

• 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(<弧度>)；

修改刻度的

w

i

d

t

h

、

h

e

i

g

h

t

：

\color{green}{修改刻度的width、height：}

修改刻度的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. 定义

   定时器

   \color{blue}{定时器}

   定时器（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. 动态

   h

   e

   i

   g

   h

   t

   \color{purple}{动态height}

   动态height。
   当子级个数未知时，无法确定父级的height（注意：此时子级肯定设置了浮动float），设置父级overflow: hidden可实现动态height。当然，实现动态height还有一种方法：position: aboslute/fixed，但若使用此方法，则无法使用margin: 0 auto进行盒子水平居中，而overflow: hidden可以；

3. 解决外边距塌陷问题。

5、关于动态 height

参考笔记一，P8.9。、

实现动态height的前2种方法（看上面）。

方法3：

伪选择器

\color{red}{伪选择器}

伪选择器

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

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

原理：
由于after是为父级创建盒子，故此盒子的“逻辑位置”在所有子级的最后。因为此盒子清除了浮动，则不再受其他子级影响，故此盒子的“实际位置”在最后一个子级后面。因此，父级只能扩展height来保证能“容纳”此盒子，即动态height。

为什么清除浮动？

\color{grey}{为什么清除浮动？}

为什么清除浮动？
因为其他子级都设置了浮动，而此盒子未设置浮动，故此盒子会因其他盒子浮动而向上移动。因此，需要清除浮动来消除影响使其停留在原位置。

说明示例：

说明示例：

说明示例：
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设置盒子样式的一个基础函数。
我的发展方向是后端，平日（包括工作）涉及前端都是框架，很少再使用这些前端原生技术。此文章于今年撰写，过去再熟悉平日少接触都会生疏，所以可能有些阐述会略有问题（多担待。。。）。
知识点所涉及的内容，我会斟酌适当地做一些注释，如果大家不理解，只能请大家另寻高见。

本文持续更新中。。。