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个小时也写不出来,还是一个问题,练的用的太少了,编程思路混乱,没有逻辑。要多敲代码了,加油吧!

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1