【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)
https://developer.aliyun.com/article/1635461
出自【进步*于辰的博客】注:本文中“子级”指子级盒子或子级标签;“逻辑位置”指根据理论推断的所在位置,“实际位置”指实际显示的所在位置。
1、知识点扩展
<video>
标签引入视频默认不会自动播放,需设置属性autoplay: muted
;<video>
不同于<img>
,比例不能随意改变,需设置属性object-fit: cover
进行拉伸。2.2 input
参考笔记一,P8.11、P9.14。
属性:
autofocus
:自动聚集;pattern
:设置正则表达式;novaliable
:取消提交表单时对整个表单的验证;autocomplete = "on/off"
设置表单是否打开自动完成功能;
注:“自动完成功能”指将表单过去输入过的信息、在选中时自动填充。2.3 画布 Canvas
推荐一篇博文《学习HTML5 Canvas这一篇文章就够了》(转发)。
参考笔记一,P4.9/10/12。
注:下文中的“canvas1
”是Canvas标签,代码是在js中执行。
2.3.1 属性设置
- 修改参考点:即修改坐标原点。
canvas1.translate(x, y)
; - 旋转坐标轴:
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 示例:画动态时钟
思想:
- 通过旋转坐标轴的方法画出刻度和时分秒针;
- 定义定时器(interval),时隔1s,先画出刻度,再根据时分秒针转动联系画出时分秒针。注意:先擦除(覆盖),再画。
转动联系:
- 秒针转动一圈,分针转动
π/30
; - 分针转动一圈,时针转动
π/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。
- 相邻同级盒子的margin会相互覆盖;
- 若父级设置了border,则不会受子级的margin影响,即使子级的margin大于父级的margin;
- 若父级未设置border,则子级和父级的margin会相互覆盖。其中,若子级的margin大于父级的margin,父级会被“挤开”,这种现象称为$外边距塌陷$;(解决方法:第2点)
若父级设置了定位方式,则不会受子级的margin影响。
4、overflow: hidden 的用法
参考笔记一,P8.2。
隐藏多余部分;
- 动态height。
当子级个数未知时,无法确定父级的height(注意:此时子级肯定设置了浮动float
),设置父级overflow: hidden
可实现动态height。当然,实现动态height还有一种方法:position: aboslute/fixed
,但若使用此方法,则无法使用margin: 0 auto
进行盒子水平居中,而overflow: hidden可以; - 解决外边距塌陷问题。
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设置盒子样式的一个基础函数。
我的发展方向是后端,平日(包括工作)涉及前端都是框架,很少再使用这些前端原生技术。此文章于今年撰写,过去再熟悉平日少接触都会生疏,所以可能有些阐述会略有问题。
知识点所涉及的内容,我会斟酌适当地做一些注释,如果大家不理解,只能请大家另寻高见。
本文中的例子是为了方便大家理解和阐述知识点而简单举出的,旨在阐明知识点,并不一定有实用性,仅是抛砖引玉。
本文持续更新中。。。