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

标题: 前端基础第六天-樊享禹-20230418 [打印本页]

作者: 546437 时间: 2023-4-18 23:18
标题: 前端基础第六天-樊享禹-20230418
今日学习内容：
CSS的浮动
传统网页布局的方式
标准流
      所以的标准流就是标签按照规定好默认方式进行排列
      块元素单独占一行，行内元素和行内块元素可以一行显示多个。
浮动
      浮动的属性 float
         属性值
            right 右浮动
            left 左浮动
            none（默认值，没有浮动）

      为什么需要浮动
         有很多布局方式使用标准流无法完成，但是浮动可以解决，浮动可以改变元素默认的排列方式。
         网页布局准则：多个块元素纵向排列找标准流，多个元素要横向排列找浮动。

      浮动的特性
         浮动的盒子具有行内块元素的特点（一行可以显示多个，可以设置宽高）
         浮动的元素会脱离标准流（脱标）
            浮动的盒子不再占有原来标准流的位置

      浮动的盒子无法压住图片和文字
         网页布局的方式
            先用标准流的盒子进行上下排列，内部的子元素采用浮动的方式进行左右排列。
            浮动的元素只会影响后面的标准流，对前面的标准流没有影响
            理论上来说，只要一个盒子浮动了，那么其他的兄弟元素也需要浮动。

      清除浮动
         为什么要清除浮动
            由于父盒子在很多情况下不方便给高度，但是子盒子浮动起来又不占位置，最后父元素的高度会变成0，会影响后面的标准流。

         清除浮动的方法
            1、额外标签法
                  额外标签法会在浮动的元素末尾添加一个空标签，要求这个标签必须是块级元素
                     例
                     优点：书写简单
                     缺点：会添加很多没有意义的标签，结构比较差

            2、给父级添加overflow:hidden;
                  例

            3、给父级添加单伪元素
                  例

            4、给父级添加双伪元素
                  例

定位
CSS的定位
为什么需要定位
浮动是可以让多个盒子在一行上个没有缝隙的排列
定位可以让盒子自由的在某个盒子内部进行位置移动，或者固定在屏幕中的某个位置，并且它可以压住其他盒子。

定位的组成
定位 = 定位的模式 + 边偏移
      定位模式：就是来指定这个元素在html文档中的定位方式，指定定位模式的属性是position
         static（静态定位）
            静态定位其实就是元素的默认定位方式，也就是无定位（标准流）
            语法：
                  选择器 {position:static;}

            注意点：静态定位没有边偏移，基本不用。

         relative （相对定位）
            相对定位是元素在移动位置的时候，是相对于他自己原来的位置来说的。
            选择器 {position:relative;}
            特点
                  它是相对于自己原来的位置进行移动的
                  原来在标准流的位置继续占有，后面的盒子还是按照标准流去对待它（没有脱标）

         absolute（绝对定位）
            绝对定位是元素在移动的时候参照它的祖先元素来说的
            语法
                  选择器 {position:absolute;}

            特点
                  1、如果祖先元素没有定位，那么就以浏览器为标准进行偏移
                  2、如果没有祖先元素，那么就以浏览器为标准进行偏移
                  3、如果祖先元素有定位（相对、绝对、固定）, 则以最近的一级有定位的父级元素为标准进行边偏移。
                  4、绝对定位的盒子不再占有原来的位置（脱标）
                  5、子绝父相，子元素是绝对定位，父元素就是相对定位（相对定位更多是为了限制绝对定位的子盒子在父元素内部）

         fixed（固定定位）
            固定定位是元素固定于浏览器的可视区域的位置
            语法
                  选择器 {position:fixed}

            特点
                  1、以浏览器的可视窗口为参照点移动元素位置
                  2、不随滚动条滚动，而且和它的父元素没有关系
                  3、固定定位的盒子不再占有原先的位置（脱标的）

      边偏移：决定该元素的具体的偏移量，以及最终的位置。
         left 距离左侧的偏移量、right 距离右侧的偏移量、top 距离顶部的偏移量、bottom 距离底部的偏移量

字体图标的使用
使用方法
1、登录阿里巴巴的字体图标库
2、寻找字体图标
3、将相应的图标添加进购物车
4、在购物车中将字体图标的代码下载下来
5、解压到项目文件夹中
6、在demo_index.html文件中查看字体图标的类名
7、引入字体图标，字体图标的类名不要复制自带的"."

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