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

标题: 赵强-20221017-CSS04 [打印本页]

作者: BlueFlame 时间: 2022-10-17 23:34
标题: 赵强-20221017-CSS04
今日所学内容：
传统网页布局的三种方式：
标准流：
      标准流就是标签按照规定好的默认顺序方式排列
                1.块级元素会独占一行，从上到下顺序排列
            2.行内元素按照顺序，从左到右排列，碰到父元素的边缘汇总换行
浮动：
   为什么需要浮动？
            有很多情况是标准流不好完成或者无法完成的布局，此时使用浮动会更加方便。浮动可以改变元素标签默认的排列方式
   浮动的最典型的应用

   网页布局的准则：
            多个会计原阿苏纵向排列找标准六，多个块级元素横向排列找浮动
   浮动的语法
            float属性可以创建浮动：
属性值：
            left:左浮动
            right:右浮动
            none:元素不浮动（默认）
   浮动的特性：
         1.浮动的元素会脱离标准流
         2.元素一行显示并且元素顶部对齐
         3.浮动元素会有行内块元素的特性
         4.浮动的元素不会压住自己下面盒子的文字内容，因为浮动给的特性就是为了做到文字环绕的
         5.浮动的元素之间默认是没有空隙的
   浮动布局注意点：
         1.浮动和标准流父盒子的搭配
先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置
         2.一个元素浮动了，其他兄弟元素理论上也哟啊跟着浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
   清除浮动
      为什么要清除浮动？
如果父盒子没有添加清除浮动，那么子盒子浮动不占位置
         1.额外标签法（隔墙法）
W3C推荐，但我们实工作中基本不用
   给父级标签添加oerfloat属性

   给父级标签添加after伪元素
   父级添加双伪元素
定位：
         为什么需要定位？
当我们滚动屏幕的时候定位可以将盒子固定到某一个位置
某个元素可以自由的在盒子内移动，并且会压住盒子
         定位的使用
定位=定位模式+边偏移
         定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
         定位模式
值                                     语义
         static                                  静态定位
         relative                               相对定位
         absolute                               绝对定位
         fixed                                     固定定位
      position的默认定位方式，是无定位的意思，没有偏移，基本不用
      position：relative；（相对定位）
特点：
1.她是相对于他自己原来的位置来进行移动的（参照点是自己原来的位置）
2.原来的位置标准流继续占有，后面的盒子仍然以标准流的方式
3.相对定位没有脱标
      position：absolute；（绝对定位）
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器伪标准进行定位
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为
字体图标的使用

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