CSS学习笔记

记录本人平时工作实践后的整理内容，分享给对知识充满渴望的伙伴们~

学习渠道推荐：

MDN-CSS

菜鸟教程

---

CSS简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观的样式语言。它可以用来控制网页元素的大小、颜色、位置、字体等。CSS是万维网的核心技术之一，几乎所有网页浏览器都支持它。

跨设备屏幕布局

针对跨设备屏幕的技术处理，一般来说，普遍采用的处理方式主要有以下几种：

1. 响应式设计（Responsive Design） ：响应式设计是一种基于 CSS 的网页设计方法，其核心思想是根据不同的屏幕尺寸和设备类型，动态调整网页布局和样式，以确保最佳的用户体验。响应式设计通过媒体查询等技术来识别设备类型和屏幕尺寸，并相应地加载不同的 CSS 样式表。
2. 弹性布局（Flexbox） ：弹性布局是一种布局模式，它提供了一种更灵活、更强大的方式来布局网页元素。Flexbox 使用容器和元素属性来定义布局规则，并允许元素根据可用空间进行动态调整大小和位置。弹性布局非常适合创建响应式布局，因为它可以轻松适应不同屏幕尺寸的设备。
3. 流体布局（Fluid Layout） ：流体布局是一种相对简单的响应式布局方法，它通过使用百分比值来定义元素的大小和位置，使其能够根据屏幕尺寸进行自动缩放。流体布局通常用于较简单的网页布局，但对于更复杂的布局可能不够灵活。
4. 混合方案 ：在实际开发中，往往会根据项目的具体需求采用多种技术进行组合。例如，可以使用响应式设计作为整体框架，并结合弹性布局来实现更精细的布局控制。

跨设备屏幕的技术处理属于前端开发领域，具体来说是响应式网页设计和前端架构领域。前端开发人员需要掌握 HTML、CSS 和 JavaScript 等相关技术，并熟悉响应式设计和前端架构的最佳实践，才能构建出能够适应不同设备的网页应用。

弹性布局

什么是弹性布局

弹性布局(Flex布局)是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。

弹性布局的特点

弹性布局（Flexbox）是一种 CSS 布局模式，它为元素提供了更大的灵活性和控制力。与传统的浮动布局和网格布局相比，弹性布局具有以下特点：

1. 灵活的排列方式

弹性布局允许元素在容器内灵活地排列，可以水平排列、垂直排列、环绕排列等。还可以使用 flex-direction 属性来控制排列方向。

2. 等分和比例分配空间

弹性布局可以使用 flex 属性来控制元素的分配空间。flex 属性可以设置为数字或关键字，例如 1、2、auto 等。数字表示元素占据容器的比例，关键字表示元素根据内容自动分配空间。

3. 可伸缩的元素

弹性布局允许元素根据容器的大小进行伸缩。可以使用 flex-grow 和 flex-shrink 属性来控制元素的伸缩行为。

4. 响应式布局

弹性布局可以轻松创建响应式布局。可以使用媒体查询来针对不同的屏幕尺寸调整元素的排列方式和空间分配。

5. 易于使用

弹性布局的语法相对简单易懂，易于学习和使用。

以下是弹性布局的一些常见应用场景：

• 创建水平或垂直排列的元素。
• 创建等宽或等高的元素。
• 创建可伸缩的元素。
• 创建响应式布局。
• 创建导航栏、工具栏等。
• 创建卡片式布局。

总而言之，弹性布局是一种功能强大、灵活易用的 CSS 布局模式，可以满足各种布局需求。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

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

各个值解析:

• flex-start：
  弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
• flex-end：
  弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
• center：
  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
• space-between：
  弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
• space-around：
  弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

应用场景案例

例如在工作中UE还原度交易走查问题反馈中有提到：常用的屏幕分辨率为1920和1440宽度的设备中进行布局适配，整体布局均为一行两列，有input输入框和button按钮。input输入框设置了一定比例的宽度后，此时按钮位置需要根据当前剩余宽度进行尾部对齐。示例代码如下：

.butStyle {
	display: flex; // 设置为弹性容器布局
	justify-content: flex-end; // 尾部对齐
	margin-left: 16px !important; // 相对于input框间距16px
}

transform

transform 属性允许你对元素进行二维或三维的转换。它可以实现元素的旋转、缩放、移动、倾斜等效果，从而创造出丰富多样的视觉效果。

transform 常用函数

1. 旋转 rotate

• rotate(angle)：围绕原点旋转一个角度。

  div {
      transform: rotate(45deg);
  }

2. 缩放 scale

• scale(x, y)：在 X 和 Y 轴上缩放元素。

  div {
      transform: scale(2, 0.5);
  }

3. 平移 translate

• translate(x, y)：在 X 和 Y 轴上移动元素。

  div {
      transform: translate(50px, 30px);
  }

4. 倾斜 skew

• skew(x-angle, y-angle)：沿 X 和 Y 轴倾斜元素。

  div {
      transform: skew(30deg, 20deg);
  }

代码小样本

水平和垂直居中元素

.centeed {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

用省略号截断文本

防止长文本溢出其容器，用省略号……替换多余的文本以获取干净的外观。

.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

响应式图像

确保图像在其容器内按比例缩放，无缝适应不同屏幕尺寸。

img {
 max-width: 100%;
 height: auto;
}

object-fit

object-fit 是一种 CSS 属性，专门用于控制替换元素（replaced elements）如何适应其容器。主要应用于以下两个标签：

1. <img> 标签 ：用于图片。
2. <video> 标签 ：用于视频内容。

object-fit 常见应用场景

• 图片（<img>） ：调整图片在固定宽高的容器中显示的方式，确保图片保持比例或填满容器。
• 视频（<video>） ：控制视频在不同设备、分辨率下的显示效果，使其符合容器的宽高要求而不变形或留白。

object-fit 的属性值

• fill ：默认值，拉伸图像或视频以完全填充容器，不保证保持宽高比。
• contain ：等比例缩放内容，确保整个内容显示在容器内，但可能会留有空白。
• cover ：等比例缩放内容，使短边填满容器，但可能会裁剪部分内容。
• none ：内容保持原始大小，不缩放。
• scale-down ：缩放内容为 none 或 contain 效果中尺寸较小的那个。

代码小样本

img, video {
  object-fit: cover;
}