当前位置: 首页 > 网络应用技术

每天一个面试点!有一个公告

时间:2023-03-07 12:54:34 网络应用技术

  由于该公司最近收到了一个短期的项目周期,所以时间相对较快,因此我将提出一些简单的CSS型面试网站

  缩写的意思是“弹性布局”,可以简单地,完成并响应实施各种页面布局

  使用Flex布局的元素称为容器

  其所有子元素都会自动成为容器的成员,称为项目

  容器默认值有两个轴,主轴和交叉轴是90度。默认情况下沿主轴排列该项目,以确定主轴的方向

  每个轴都有一个起点和终点,这对于元素对齐非常重要

  关于常用属性,我们可以将其分为容器属性和容器成员资格属性

  容器属性是:

  确定主轴的方向(即项目排列的方向)

  该属性对应于以下内容:

  如下所示:

  弹性元件始终沿主轴排列,因此,如果无法放出主轴,可以通过确定是否可以更换容器中的项目来代替它

  该属性对应于以下内容:

  默认情况不会更改,但是它将不允许该元素在此处直接溢出容器,这将涉及元素的弹性望远镜

  这是属性和属性的一种简短形式,默认值为

  定义主轴上项目对齐的方法

  该属性对应于以下内容:

  效果图如下:

  定义如何在交叉路口对齐项目

  该属性对应于以下内容:

  定义多个轴的对齐方法。如果项目只有一个轴,则属性不起作用

  该属性对应于可怕的:

  效果图如下:

  容器成员的属性如下:

  定义项目的顺序。值越小,布置越高,默认值越高

  如上所述,当设置容器不更改时,容器的宽度还不够。弹性元素将根据

  定义项目的放大比(如何拉伸元件的总宽度)

  默认值是,如果有剩余的空间,它将不会放大

  如果所有项目的属性为1,则将分配剩余空间(如果是)

  如果项目的属性为2,其他项目为1,那么前者占用的其余空间将比其他项目两倍

  弹性容器的宽度完全等于元件的总宽度,并且没有过多的宽度。目前,无论价值是什么,它都不会生效

  定义项目的降低比(容器的宽度<当元素的总宽度时如何收缩),默认值为1,也就是说,如果空间不足,则将减少项目

  如果所有项目的属性均为1,那么当空间不足时,该比例将减少

  如果项目的属性为0,而其他项目为1,那么当空间不足时,前者将不收缩

  当剩下容器的宽度时,它将不会生效

  设置了主轴上元素的初始大小。SO值的初始大小是元素之前的大小和有效性。

  基于此属性,浏览器计算主轴是否有多余的空间。默认值就是项目的原始大小。

  设置为0时,将根据内容打开

  它可以设置为与或属性相同的值(例如350px),该项目将占据固定空间

  属性是和谐的缩写,默认值也是一个更难理解的复合属性

  一些属性是:

  和谐之间的差异可以归因于和谐之间的差异

  当设置为0(绝对弹性元素)时,它等同于延迟和延迟而不考虑我的尺寸

  当将其设置为(相对弹性元素)时,此时需要考虑远程望远镜的元素大小

  注意:建议使用此属性优先级,而不是编写三个分离属性,因为浏览器将计算相关值

  允许单个项目具有不同的方式与其他项目保持一致,该项目可以涵盖属性

  默认值是,指示继承父元素的属性。如果没有父元素,则等同于

  效果图如下:

  在上一篇文章中,我们可以站在元素级别垂直方向的中心以及两列和三列的自适应布局。

  包括移动终端和小程序的开发,建议使用布局

  原始:https://juejin.cn/post/7097559217602576415