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

标题: 孙佳豪--82期CSS4--20221115 [打印本页]

作者: 晓9863 时间: 2022-11-15 23:40
标题: 孙佳豪--82期CSS4--20221115
今日所学：
CSS的浮动
传统网页布局三种方式
      标准流（标签按照默认的方式进行排列）
         块元素独占一行，从上到下顺序排列
         行内元素按照顺序从左到右依次排列，碰到父元素边缘就会自动换行
      浮动
         float：none（默认，不浮动）/left（左浮动）/right（右浮动）；
         总结
            多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
            浮动最典型的应用就是让多个块级元素一行内排列显示
         浮动的特性
            浮动的元素会脱离标准流
            浮动的元素会一行内显示并且一行对齐，相邻的元素之间没有空白间隙，超过父级宽度会自动换行显示
            浮动的元素具有行内块元素的特性
            浮动研发之处就是为了实现文字环绕，所以浮动的盒子并不会压住标注流的盒子
         浮动布局的注意点
            先用标准流父元素进行上下排列，内部的子元素采用浮动排列左右的位置
            理论上来说，当一个元素浮动了，那么它的兄弟元素也要跟着浮动
            浮动只会影响后面的标准流，不会影响前面的标准流
         清除浮动
            由于父盒子在一些情况下不方便给高度，但是子盒子浮动不占位置，所以父盒子的高度就会变成0，会影响后面的标准流
            额外标签法
                  也叫隔墙法，是W3C推荐的做法
                  注意点：要求最后的新标签必须是块级元素
                  优点：通俗易懂、书写方便
                  缺点：会添加很多没有意义的标签，结构化较差
            给父级添加overflow：hidden；
            父级添加after伪元素
            给父级添加双伪元素
CSS的定位
定位的组成
      定位=定位模式+边偏移
      定位模式指的是一个元素在文档中的定位方式，边偏移决定了该元素的最终位置
定位模式
      static：静态定位
         静态定位是元素默认定位的方式，也就是没有定位的意思
         静态定位是按照标准流的特性来摆放盒子，没有边偏移
      relative：相对定位
         它是相对于自己原来的位置进行移动的
         原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式来对待它（相对定位不脱标）
      absolute：绝对定位
         绝对定位是元素在移动的时候，是相对于它的祖先元素来说的
         如果祖先元素没有定位、就以浏览器为标准进行定位
         如果祖先元素有定位，就已有定位最近的一级祖先元素为标准
         绝对定位不会在占有原来的位置（脱离标准流）
         子绝父相：如果儿子是绝对定位，那么父亲就用相对定位来限制儿子边偏移的边界
      fixed：固定定位
         固定定位是元素固定于浏览器可视区域的位置
         以浏览器的可视窗口为参展点进行偏移，跟父元素没有关系
         固定定位不在占有原来位置（脱标）
定位的叠放次序
      在使用定位的时候会出现盒子重叠的情况，需要使用z-index来控制盒子的前后次序
      数值可以是正整数、负整数或者0，默认值是auto，数值越大，盒子越靠上
      数字后面不可以加单位
      只有定位的盒子才有z-index属性

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