菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 陈紫怡-20201017-CSS [打印本页]

作者: Dasmondlicht 时间: 2022-10-17 23:57
标题: 陈紫怡-20201017-CSS
一、今日学习内容：1.传统网页版布局的三种方式
标准流：标签按照规定好的默认顺序排列
浮动：有很多情况是标准流不好完成或者无法完成的布局，此时使用浮动会更加方便，浮动可以改变元素标签默认的排列方式
      典型应用：多个块级元素以行内排列展示
      网页布局准则：多个块级：纵向-->标准流，横向-->浮动
      语法：float：left、right、none
      特性：
         浮动元素会脱离标准流
         一行内显示并且元素顶部对齐
         有行内块元素的特性
         不会覆盖自己盒子下面盒子的文字内容，浮动特性就是为了做到文字环绕
         浮动元素之间没有空隙       浮动布局注意点
         浮动和标准父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置
   一个元素浮动，其他兄弟元素理论上也要跟着浮动（浮动盒子只影响浮动后面的标准流）
      清除浮动：若父盒子没有添加清除浮动，那么子盒子浮动不占位置，父盒子不指定高度，后面的标准流会紧挨着父盒子来进行排列，所以要清楚浮动
         额外标签法：
         .clear {
               clear:both;
         }
         给父级标签添加overflow属性:
         ul {
               overflow:hidden;
         }
         给父级添加after伪元素
         .clearfix:after {
               content:"";
               display:block;
               height:0;
               clear:both;
               visibility:hidden;
         }

         <ul class="clearfix">
               <li></li>
         </ul>
         父级添加双伪元素
            .clearfix:before , .clearfix:after {
                  content:"";
                  display: table;
            }
            .clearfix:after {
                  clear:both ;
            }
定位：
      滚动屏幕时，定位可以将盒子固定在屏幕的某位置
      某元素可以自由的在盒子内移动位置，并且会压住盒子

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)