李莎_20210114李莎
知识点总结
@TOC
CSS 的学习
三、布局（排版）
3.3 定位
定位( position )允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
有许多不同类型的定位，您可以对HTML元素生效。
3.3.1 静态定位
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这没有什么特别的。
如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。
3.3.2 相对定位
相对定位与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
给元素加上 position:relative; 并不会改变元素的位置，需要使用 top ， bottom ， left 和 right属性。
相对定位生成相对定位的元素，相对于其正常位置进行定位
3.3.3 绝对定位
position:absolute; 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。绝对定位的元素不再存在于正常文档布局流中。
3.3.4 固定定位
fixed 固定定位，这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于<html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。
3.3.5 z-index
当我们使用定位后，元素有可能会出现重叠现象。什么决定哪些元素出现在其他元素的顶部？当我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。如果是多个定位元素，在后面的定位元素将出现在先定位与元素的顶部。
当然，我们可以使用 z-index 属性。 “z-index”是对z轴的参考。
网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。 z- index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。
3.3.6 position: sticky
还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。
四、样式优先级
4.1 样式冲突
同一个元素有多个相同css属性来适配，这个时候就会发生样式冲突。
<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 选择器，所以 div 的 background-color 属性值是 green 。
4.2 优先级
4.2.1 四种样式用法的优先级
- 内联样式 (在元素
style属性（attr）中定义的样式) - 内部样式 (在
<style>标签中定义的样式) - 外部样式(包含@import)
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
##### 4.2.2 不同选择器之间的优先级
选择器之间的优先级，取决于选择器的精度。
优先级: - id 选择器
- class 选择器
- 元素选择器
##### 4.2.3 重复定义样式时
在不同地方重复定义样式时，如：
html
<link rel="stylesheet" type="text/css" href="a.css">// blue
<link rel="stylesheet" type="text/css" href="b.css">// red
在a.css和b.css中使用相同的选择器都定义了对于某个元素的样式属性时，那么谁在后边元素适配谁。
#### 4.3 改变优先级
如果想要改变样式的优先级，可以在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提升优先级
4.3.1选择器比较
|选择器|相同 |不同|
|--|--|--|
|Id ----class | 1.都是元素的属性值 2.都区分大小写 | id作用在一个元素上，class可以作用在多个元素上|
|Class ----- 元素（标签）| 都可以作用多个元素| 1. class区分大小写，元素不区分大小写 2. class可自定义，元素是html元素 3. class可适配多个不同元素，元素只能适配同一元素|
|后代 ----子元素 | 1. 都可适配多个元素 2.都可以使用元素作为选择器的一部分 | 子元素只能适配直接子元素，后代可以适配所有被包裹的元素|
javaScript的学习
一、BOM编程
BOM是（Broswer Object Model） 浏览器对象模型编程。在网页被加载后，js引擎会将我们的浏览器的各个部分封装成对象，我们通过操作这些不同的对象，来实现一些效果，这就叫BOM编程。
1.1 BOM常用对象
- 窗口对象：Windows对象
- 地址栏对象：location
- 历史记录栏对象：history
浏览器在Console页面也可修改代码
1.2 BOM在JavaScript中的函数运用
- 弹出一个提示框：
window.alert(" ");
- 弹出一个输入框，并弹出输入的内容：
var name=window.prompt( , );
window.alert(name);
- 弹出一个确认框，点击确定返回true，点击取消返回false：
var result=window.confirm(" ");
window.alert(result);
- 自定义弹出框：自定义弹出框——web弹层组件
1.3 console用法分析
console.log("日志");
console.warm("提示");
console.error("错误");
console.log(1);
1.4 与计时相关的方法
setTimeout(函数名,间隔毫秒数)——指几秒后执行一次
setInterval(函数名,间隔毫秒数)——指每隔几秒执行一次
clearInterval(计时器对象名)——清除定时器
clearTimeout(计时器对象名)——清除定时器
1.5 获取网页元素
console.log(document);
——获取元素 document网页
1.5.1 根据id获取一个元素
var box=document.getElementById("box");
1.5.2 根据class获取元素，只要class包含即可
document.getElementsByClassName("box");
console.log(divs);
1.5.3 根据name获取元素
var names=document.getElementsByName("box");
console.log(name[0]);
1.5.4 根据标签名获取元素
var div=document.getElementsByTagName("div");
console.log(div);
1.5.5 根据选择器选择一个元素
var element=document.querySelector("[name=box]");
//var element=document.querySelector("#box");
console.log(element);
1.5.6 根据选择器选择所有元素，返回的一定是一个数值
var elements=document.querySelectorAll(".box");
console.log(elements);
1.6 修改元素内容
document.getElementById("id");
1.7 location
href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法： 刷新当前页面
需求：实现每隔一秒刷新一次页面
1.8 history
浏览器之前已经访问过的页面
- forward()：前进到下一页
- back()：后退到上一页
- go()：跳转到某页
心得体会
今天我们学习了CSS的剩余部分，还有JavaScript的部分内容。主要有以下部分的学习：
一、学习了CSS中的各种定位，之前我们只知道了定位中的相对定位和绝对定位，但并不能清除的明白此定位依靠的参照物，今天对定位进行了系统的学习，又学习到了静态定位、固定定位以及position:sticky，这些定位对网页布局都相对重要，
二、学习了各种样式的优先级，老师在讲了各种选择器之后，因为各种选择器定义的样式，会造成一定的样式冲突，所以我们对各种选择器的优先级进行了进一步的了解，这样在以后做网页的时候就可以明白自己定义的某些属性为什么没有显示。
三、学习了BOM编程，即浏览器对象模型编程，初步对JavaScript的某些方法及内置方法进行了一定地了解，对操作这些不同的对象，来实现一些效果进行了学习。
从青春起步，向梦想进发。
Let youth glitter in struggling.
近期评论