2024前端面经，web可视化开发工具

ul{

background: pink;

}

li {

list-style: none;

height: 100px;

width: 100px;

float: left;

background: red;

margin-left: 20px;

}

3. 通过给父级元素添加伪类after，达到清除浮动的目的；

这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。

• 4. 使用双伪类；

• 四.Flex布局

  ---

  具体可以看原文章：30 分钟学会 Flex 布局

  1. Flex布局是什么？

  • Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

  .container {

  display: flex | inline-flex; //可以有两种取值

  }

  分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。

  需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

  2. 有下面六种属性可以设置在容器上，它们分别是：

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

  2-1. flex-direction: 决定主轴的方向(即项目的排列方向

  .container {

  flex-direction: row | row-reverse | column | column-reverse;

  }

  1. row：默认值-主轴为水平方向，起点在左端

  2. row-reverse：主轴为水平方向，起点在右端

  3. column：主轴为垂直方向，起点在上沿

  4. column-reverse：主轴为垂直方向，起点在下沿

  2-2. flex-wrap: 决定容器内项目是否可换行

  .container {

  flex-wrap: nowrap | wrap | wrap-reverse;

  }

  1. nowrap： 默认值不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。

  2. wrap：项目主轴总尺寸超出容器时换行，第一行在上方

  3. wrap-reverse：换行，第一行在下方

  2-3. flex-flow: flex-direction 和 flex-wrap 的简写形式

  .container {

  flex-flow: || ;

  }

  1. 默认值为: row nowrap，感觉没什么卵用，老老实实分开写就好了。这样就不用记住这个属性了。

  2-4. justify-content：定义了项目在主轴的对齐方式。

  .container {

  justify-content: flex-start | flex-end | center | space-between | space-around;

  }

  建立在主轴为水平方向时测试，即 flex-direction: row

  1. flex-start : 默认值flex-start 左对齐