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

标题: 前端-张静博-20230426 [打印本页]

作者: JBZ 时间: 2023-5-3 13:54
标题: 前端-张静博-20230426
一、今日知识点
1 流式布局
概念
      流式布局就是百分比布局，也叫做非固定像素布局
      通过盒子的宽度设置为百分比来根据屏幕的宽度来自适应调整，不受固定像素的限制。
二倍精灵图的使用
      1、插入背景图
      2、将背景图按物理像素比进行等比例缩小（利用background-size属性）
      3、利用ps进行缩小后的图片测量，使用background-position进行背景位移即可
2 Flex弹性布局
Flex布局的原理
      传统布局和flex布局的区别
         传统布局
            传统布局的兼容性更好
            布局会比较的繁琐
            局限性，在移动端中布局的速度相对较慢
         flex布局
            操作会比较的方便，布局很简单，移动端使用很广泛
            PC端的浏览器可能会有兼容性的问题，IE11以下的低版本浏览器对flex支持情况不好
         总结
            PC端布局主要采用传统方式
            移动端布局或者PC端不考虑兼容性的时候，使用flex布局
      原理
         flex 是弹性布局的意思，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局
         当我们的父盒子设置为flex布局之后，子元素里面的float、clear和vertical-align属性都将失效
         采用flex布局的父元素叫做flex容器（flex-container），子元素叫做flex项目（flex-item）
Flex布局的父项常见属性
      flex-direction
         设置主轴方向
         常用属性值
            row  默认值，子元素沿x轴从左向右排列
            row-reverse 子元素沿x轴从右向左进行排列
            column 子元素沿y轴从上到下进行排列
            column-reverse 子元素沿y轴从下到上进行排列
         在flex布局中x轴和y轴分别是水平向右和垂直向下的
         x轴是默认的主轴，如果想将y轴设置为主轴，就可以使用flex-direction 属性
      justify-content
         控制主轴子元素的排列方式
         常用属性值
            flex-start 默认值，控制子元素沿主轴头部开始排列，如果主轴是x轴，就代表从左到右
            flex-end 控制子元素沿主轴的尾部开始排列，如果是y轴，代表从下往上
            center 控制子元素沿主轴居中对齐
            space-around 控制子元素平分主轴剩余空间
            space-between 控制子元素两侧元素先贴边，然后剩余的元素平分主轴剩余空间
      flex-wrap
         设置子元素是否换行
         在flex布局中，子元素超过父元素的宽度默认是不换行，如果需要换行就要用该属性来进行设置
      align-items
         设置主轴的子元素排列方式（单行）
         常用属性值
            flex-start 从侧轴头部开始排列
            flex-end 从侧轴尾部开始排列
            center 沿侧轴居中排列
            stretch 拉伸子元素到父级的宽度或高度（和主轴方向相关）
      align-content
         设置侧轴上的子元素的排列方式（多行）
         常用属性值
            align-content: flex-start;
                  默认值：沿侧轴头部开始排列
            align-content: flex-end;
                  沿侧轴尾部开始排列
            align-content: center;
                  沿侧轴居中对齐
            align-content: space-around;
                  侧轴上的多行子元素平分侧轴剩余空间
            align-content: space-between;
                  侧轴上的多行子元素两侧先沿侧轴贴边，剩余的子元素平分侧轴剩余空间
            align-content: stretch;
                  侧轴上的子元素拉伸到平分父级高度或宽度（与主轴方向相关）
      aligin-items和align-content的区别
         algin-items适用于单行的情况，只有上对齐、下对齐、居中对齐和拉伸。
         algin-content 适用于多行的情况，可以设置上对齐、下对齐、居中对齐、拉伸、平分空间等属性值。
      flex-flow
         是flex-direction flex-wrap的复合属性
         属性值：flex-direction flex-wrap
Flex布局的子项常见属性
      flex子项占的份数
      align-self 控制子项自己在侧轴上的排列方式
         可以控制单个子元素和其他的子元素有不同的对齐方式，可以覆盖align-items属性。
      order 属性来定义子项的排列顺序
         默认值是0 数值越小越靠前
3 网页制作思路
技术选择flex布局方式来实现
搭建文件
      css
      images
      font
      index.html
书写视口标签

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