20210114贺佳磊
知识点总结
1、定位
| 值/属性 | |
|---|---|
| 静态定位 | 静态( staitc )定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置。 |
| 相对定位 | 相对定位与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 |
| 绝对定位 | 绝对定位相对于static定位以外的第一个父元素进行定位，绝对定位的元素不再存在于正常文档布局流中。 |
| 固定定位 | 固定定位固定元素是相对于浏览器视口本身固定。 |
| z-index | 决定哪些元素出现在其他元素的顶部。 |
| position: sticky | 它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点为止，此后它就变得固定了。 |
2、样式优先级
（1）样式冲突
当发生样式冲突时，谁的优先级高，元素就适应哪个
（2）优先级
四种样式用法的优先级
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
不同选择器之间的优先级
Id选择器>Class选择器>标签选择器
重复定义样式时
谁在后边元素适配谁。
改变优先级
用!important提升优先级
3、JavaScript
eg1：控制时间暂停开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>控制时间暂停开始</title>
</head>
<body>
<p id="timer"></p>
<hr />
<button id="open" onclick="op()" style="width: 50px;height: 40px;">开始</button>
<button id="close" onclick="cls()" style="width: 50px;height: 40px;">暂停</button>
<script type="text/javascript">
var timer;
function time(){
var date=new Date();
var str=date.toLocaleString()
var p=document.querySelector('#timer')
console.log(p)
p.innerText=str;
}
function op(){
clearInterval(timer)
timer=setInterval(time,1000)
}
function cls(){
clearInterval(timer)
}
</script>
</body>
</html>
eg2:页面跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跳转页面myself</title>
<style type="text/css">
span{
display: block;
font-size: 70px;
color: #0000FF;
margin: 100px 700px;
}
p{
letter-spacing: 8px;
text-align: center
}
</style>
</head>
<body>
<span id="time">3</span>
<p id="tishi">三秒后跳转到另一个页面</p>
<script type="text/javascript">
window.setInterval(countDown,1000)
var time=document.querySelector('#time')
function countDown(){
time.innerText=time.innerText-1;
if (time.innerText==0) {
location.href="http://www.baidu.com"
}
else{
time.innerText==0
}
}
</script>
</body>
</html>
心得体会
时间真的很快，第四天了，每天都有不同的收获。今天老师一开始讲了定位，这正是我昨天疑惑的点，听完后一下清晰多了，后面就开始讲JavaScript了，JavaScript在学校老师讲的很皮毛，很多都不会，所以今天老师讲我听的很吃力，虽然老师讲的时候都听懂了，但自己练的时候就是不会写，老师1分钟就解决的代码，我用1个小时也写不出来，还是一个问题，练的用的太少了，编程思路混乱，没有逻辑。要多敲代码了，加油吧!
点赞
评论