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

标题: 张锐杰-20221017-06CSS [打印本页]

作者: 张锐杰 时间: 2022-10-18 08:56
标题: 张锐杰-20221017-06CSS
传统网页布局的三种方式
标准流
      标准流就是标签展昭规定好的默认顺序方式排列
         1、块级元素会独占一行，从上到下顺序排列
         2、行内元素会按照顺序，从左到右进行排列，碰到父元素的边缘会自动换行

浮动
      为什么需要浮动
         有很多情况是标准流不好完成或者无法完成的布局，此时使用浮动会更加方便，浮动可以改变元素标签默认的排列方式。

      浮动的最典型的应用
         可以让多个块级元素一行内排列显示

      网页布局的准则：
         多个块级纵向排列找标准流，多个块级元素横向排列找浮动

      浮动的语法：
         float属性可以创建浮动
            属性值：
                  left：元素向左浮动
                  right：元素向右浮动
                  none：元素不浮动（默认值）

      浮动的特性
         1、浮动的元素会脱离标准流（脱标）
         2、浮动元素会一行内显示并且元素顶部对齐
         3、浮动元素会具有行内块元素的特性
         4、浮动的元素不会压住下面盒子的文字内容，因为浮动的特性就是为了做到文字环绕的
         5、浮动的元素之间默认是没有空隙的

      浮动布局注意点
         1、浮动和标准流父盒子的搭配
            先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置

         2、一个元素浮动了，其他的兄弟元素理论上也要跟着浮动
            浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

      清除浮动
         为什么要清除浮动？
            如果父盒子没有添加清除浮动，那么子盒子浮动不占位置，父盒子不指定高度的话，后面的标准流会紧挨着父盒子来进行排列，所以要清除浮动。

         额外标签法（隔墙法）
            W3C推荐的做法，但我们实际工作中基本不用

         给父级标签添加overflow属性
         给父级添加after伪元素
         父级添加双伪元素

定位
      为什么需要使用定位？
         当我们滚动屏幕的时候，定位可以将盒子固定到屏幕的某个位置
         某个元素可以自由的在盒子内移动位置，并且会压住盒子

      定位的使用
         定位=定位模式+边偏移
            定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置。

      定位模式：
         position:static; （静态定位）
               position的默认定位方式，是无定位的意思，没有边偏移，基本不用

         position:relative;（相对定位）
            特点
                  1、它是相对于它自己原来的位置来进行移动的（参照点是自己原来的位置）
                  2、原来位置的标准流位置继续占有，后面的盒子仍然以标准流的方式来对待它
                  3、相对定位没有脱标

         position:absolute;（绝对定位）
            1、如果没有祖先元素或者祖先元素没有定位胡，则以浏览器为标准进行定位
            2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置
            3、绝对定位不再占有原来的位置（脱标）
            4、相对定位最大的作用就是给绝对定位当爹的（子绝父相）

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