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

标题: 陈玉-20221017-CSS4 [打印本页]

作者: polaris123 时间: 2022-10-17 23:22
标题: 陈玉-20221017-CSS4
一、今日学习内容1.传统网页布局三种方式
  （1）网页布局准则：多个块级纵向排列找标准流，多个块级元素横向排列找浮动
  （2）标准流：按照默认规定的顺序方式排列
   特点：
         1.块级元素独占一行，从上到下排列
         2.行内元素会按照顺序，从左到右进行排列，碰到父元素的边缘会自动换行
  （3）浮动：改变元素标签默认的排列方式（float：left/right/none(默认值)）
   应用：使多个块级元素在一行内排列显示
         特性：
               1.会脱离标准流
               2.浮动元素会在一行内显示并且元素顶部对齐
               3.浮动元素具有行内块特点
               4.可做到文字环绕，不会压住下面盒子文字内容
               5.浮动元素之间没有空隙
   浮动元素布局注意：
               1.浮动一般会和标准流父盒子搭配使用
               2.一个元素浮动，其他的兄弟元素也需要跟着浮动
               3.浮动的盒子只会影响后面的标准流
   清除浮动
            1.额外标签法（隔墙法）.clear {clear：both}
               2.给父级样式添加overflow：hidden
   3.给父级添加after伪元素
   4.给父元素加双伪元素
  （4）定位
   目的：滚动屏幕时将盒子固定到屏幕的某个位置；某个元素可以自由在盒子内移动并且会压住盒子。
      定位=定位模式+边偏移
      定位模式有：position：static  静态定位
         position：relative  相对定位（未脱标）
         position：absolute 绝对定位特点：
                              1.如果祖先元素没有定位，则会以浏览器为标准进行定位
                              2.如果祖先元素有定位，则以最近一级有定位的祖先元素为参考点移动位置
                              3.不会占有原来位置（脱标）
                              4.会和父元素相对定位结合使用
         position：fixed  固定定位
         position：sticky  粘性定位
2.字体图标在字体图标网站搜索下载图标，在html文件中引入css文件，然后在所要引入的标签中调用类

二、今日问题
未遇到问题
三、解决方案

未遇到问题

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