佘慧婕-2020-10-30

一、定位及页面布局

（一）定位
        1、position: sticky；——定位：粘性  此为粘性定位
             top:0px;——定位条件，此处是高度为零是条件 一定要给
        2、position: relative;——相对定位 
             position: absolute;——绝对定位 
             子绝对父相对 如果子容器有绝对定位，父容器一定要有相对定位！！！然后给子容器定位条件
              top: 100px;
              right: 0px;——定位条件
        3、position: fixed;——固定位置：如果给了fixed则脱离原文档流，此处相当于与主内容区脱离
  （二）页面布局
        1、思路要清晰，先做出大概框架；
        2、每一步开始要标注好注释，要养成习惯；
        3、height: auto;自动调高
        4、border——边框
  （三）测试样式的设置
        .bg{
    background: red;
          }——达到想要效果可以删除
        用来清晰的观察到所设置值大小；
  （四）其他知识点
        1、垂直居中：line-height：父容器高度
        2、display：block；/*让行级标签拥有了块级标签的特性，独占一行*/
        3、display：inline-block/*让行级标签拥有了块级标签的特性（自定义大小的特性），依旧保留行级标签不独占一行的特性*/
        4、display：flex；/*弹性布局，主要在移动端用，如微信小程序等*/
        5、水平居中：text-align：center
        6、! important;提高样式的优先级，color：#fff ！important
        7、magin: 0 auto——div居中
        8、outline: none;——取消焦点边框
        9、行级标签没有大小
 

二、学习心得
在今天的课程中知道了页面布局的重要性，在做一个网页前要先构思好其如何布局，再一步步的向内填程序，这样会使得整个过程的思路都很清晰，标签注释也很重要，让自己更直观的知道哪里是那一部分，也为接下来其他工作做好了备注，方便工作的交接，这是要养成的好习惯，今天对知识点没有很多疑问。