佘慧婕-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、行级标签没有大小
 

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

标签

评论

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