聂伟柱_20210114聂伟柱
知识点总结
1 定位
1.1 静态定位
静态定位是每个元素的默认值——意味着“将元素放入它在文档布局流中的正常位置。
若所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。
1.2 相对定位
与静态定位相似，可以让其与页面上的其他元素重叠。
给元素加上position:relative;并不会改变元素的位置，需要用top,bottom,left和right属性。
相对定位生成相对定位的元素，相对于其正常位置进行定位。
1.3 绝对定位
position:sbsolute;生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。绝对定位的元素不再存在于正常文档布局流中。
1.4 固定定位
fixed固定定位，与绝对定位工作方式相同，但有一个主要区别：绝对定位固定元素是相对于<html>元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。
1.5 z-index
z-index值影响定位元素位于该轴上的位置；正值将他们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位元素都具有z-index为auto，实际上为0。
1.6 positio:sticky
相对位置和固定位置的混合体，它允许被定位的元素变现得像相对定位一样，直到它滚动到某个阈值点为止，此后就变得固定了。
2 样式优先级
2.1 样式冲突
<style type="text/css">
#myDiv{
background-color: green;
}
div{
width: 500px;
height: 300px;
background-color: blue;
}
.myDiv{
background-color: red;
}
</style>
<div class="myDiv" id="myDiv"></div>
id 选择器、元素选择器、class选择器中都对 div 元background-color(背景颜色)属性做了定义。 这个时候就发生了样式冲突
当发生样式冲突时，谁的优先级高，元素就适应哪个。如上所示，id选择器的优先级高于元素选择器和 class 选择器，所以 divbackground-color属性值是 green 。
2.2 优先级
2.2.1 四种样式用法的优先级
- . 内联样式 (在元素
style属性（attr）中定义的样式) - 内部样式 (在
<style>标签中定义的样式) - 外部样式(包含@import)
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
2.2.2 不同选择器之间的优先级
选择器之间的优先级，取决于选择器的精度
优先级:
- id 选择器
- class 选择器
- 元素选择器
2.2.3 重复定义样式时
在不同地方重复定义样式时，如：
<link rel="stylesheet" type="text/css" href="a.css">// blue
<link rel="stylesheet" type="text/css" href="b.css">// red
在 a.css 和 b.css 中使用相同的选择器都定义了对于某个元素的样式属性时，那么谁在后边元素适配 谁。
2.2.4 改变优先级
如果想要改变样式的优先级，可以在css属性值后边加上 !important 来将优先级提高。
<style type="text/css">
div{
width: 500px;
height: 300px;
background-color: blue !important;
}
.myDiv{
background-color: red;
}
</style>
<div class="myDiv"></div>
class选择器优先级高于元素选择器，但是在元素选择器，background-color 的值中有 !important 关键字将优先级提高了，所以后div的背景颜色是蓝色的。
总结：
样式的优先级：就近原则，哪个样式离标签近，标签就适应它的样式
选择器的优先级：在设置相同属性时：Id选择器>Class选择器>标签选择器
提升样式的优先级: 用!important提升优先级
选择器比较
| 选择器 | 相同 | 不同 |
|---|---|---|
| Id ---class | 1.都是元素的属性值 2.都区分大小写 | id作用于一个元素上，class可以作用在多个元素上 |
| Class ---- 元素 （标 签） | 都可以作用多个元素 | 1.class区分大小写，元素不区分大小写 2.class可自定义，元素是html元素 3.class可适配多个不同元素，元素只能适配同一元素 |
| 后代 ---子元素 | 1.都可适配多个元素 2.都可以使用元素作为选择器的一部分 | 子元素只能适配直接子元素，后代可以适配所有被包裹的元素 |
3 BOM（浏览器对象模型）
3.1 BOM常用对象
- window:浏览器窗体对象
- location:浏览器地址栏对象
- history:浏览器历史记录
3.2 浏览器弹窗
- 提示框：window.alert()方法
- 输入框：window.prompt()方法
- 确认框：window.confirm()方法
3.3 计时器方法
- setTimeout(函数名，间隔毫秒数)：几秒后执行一次
- setInterval(函数名，间隔毫秒数)：每隔几秒执行一次
- clearTimeout(计时器对象名)：清除定时器
- clearTimeoutl(计时器对象名)：清除定时器
3.4 document方法
document.getElementsByClassName():返回文档中所有指定类名的元素集合，作为 NodeList 对象。document.getElementById():返回对拥有指定 id 的第一个对象的引用。document.getElementsByName():返回带有指定名称的对象集合。document.getElementsByTagName():回带有指定标签名的对象集合。document.querySelector()：返回匹配该选择器的元素节点。document.querySelectorAll():返回一个数组。
学习心得
虽然之前接触过JavaScript，但当时没有深入的了解，因此掌握的知识点也不够多，但我深知其关键性，我会紧跟老师的学习进度好好学习，也会在课后多练习以加深印象。
近期评论