知识点总结

1.定位( position )

1.1 静态定位（staitc ）

​ (1)静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个 元素。在HTML文档流中默认的位置。（标准流特性）

​ (2) 静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
​ (3)静态定位唯一的用处就是取消定位。 position: static;

1.2相对定位（relative）

.div {  width: 200px;   height: 200px;  background-color: pink;      }

 .top {     position: relative;     top: 100px;     left: 100px; } 

.bottom {   background-color: purple; }

1.3绝对定位（absolute）

body {  height: 2000px; } div {     width: 100px;   height: 100px;  background-color: pink;     /*position: absolute;   top: 10px;  left: 10px;*/ }

 .top {     right: 20px;    bottom: 20px;   }

 .bottom {  background-color: purple;   width: 110px; }

.father {   width: 500px;   height: 500px;  background-color: pink;     margin: 100px; /*        position: relative;*/ } *

*.son {     width: 200px;   height: 200px;  background-color: purple; /*        若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/ }

.grandfather {  width: 800px;   height: 800px;  background-color: skyblue;  position: absolute; }

.father {   width: 500px;   height: 500px;  background-color: pink;     margin: 100px; /*       position: absolute;*/ }*

* .son {    width: 200px;   height: 200px;  background-color: purple;   position: absolute;     top: 50px;  left: 50px;     /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/ }

1.4固定定位（fixed）

​ (2) 固定定位的元素跟父亲没有任何关系，只认浏览器。
(3) 固定定位完全脱标，不占有位置，不随着滚动条滚动。

1.5position: sticky粘性定位（它基本上是相对位置和固定位 置的混合体）

2.样式优先级

2.1四种样式用法的优先级

​ 内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

2.2不同选择器之间的优先级

​ id 选择器> class 选择器 > 元素选择器

2.3改变优先级

​ 提升样式的优先级: 用!important提升优先级

3.JavaScript

<script type="text/javascript">
        // 定时任务变量
        var timer ;
        // 获取当前时间对象
        function start(){
            // 如果已经开始了,先清除之前的               clearInterval(timer);               
            // 创建定时任务               timer = setInterval(time,1000);         }
        function time(){    
            var date = new Date();              
            var str = date.toLocaleString();                
            var p = document.querySelector("#timer");               
            p.innerText = str;          }
        function pause(){   clearInterval(timer);       }
 </script>

心得体会

第四次课程，今天学了CSS的布局，定位的相关内容，主要是relative、absolute、fixed、sticky的运用，还有样式的优先级就是就近原则，哪个样式离标签最近，标签就适应它的样式。然后主要是JavaScript的讲解，JS我之前学的不熟悉很多的方法都不会用也不知道他的用法，学起来比较慢。