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 布局模式，可以满足各种布局需求。

Flexbox 和 Flex Wrap

Flexbox 是 CSS3 中的一种布局模型，主要用于实现响应式布局和动态排列子元素。

flex-wrap 是 Flexbox 中的一个属性，用来控制子元素是否换行。

flex-wrap 属性值

nowrap （默认值）：

• 子元素会被压缩在一行内，如果容器宽度不够，子元素会超出容器边界。

wrap ：

• 子元素会换行，容器中不再能容纳的子元素会移到下一行，直到容器宽度允许。

wrap-reverse ：

• 子元素也会换行，但是换行的顺序是反向的（从底部到顶部）。

Flexbox的适用元素

Flexbox 适用于任何元素，只要它的父元素设置了 display: flex 或 display: inline-flex。它可以应用于：

• 块级元素 ：例如 div、section、header 等。
• 行内元素 ：例如 span、a 等，设置了 display: inline-flex 后，也可以进行弹性布局。
• 表单元素 ：例如 input、button 等。

Flexbox 与 屏幕兼容性

Flexbox 是目前大多数现代浏览器（Chrome、Firefox、Safari、Edge 等）都支持的布局方式，甚至包括一些旧版本的浏览器，但在移动设备上的兼容性稍微有些差异。

1. 支持情况：
   • 在现代浏览器中，Flexbox 和 flex-wrap 的支持非常好，几乎没有兼容性问题。特别是在桌面浏览器上，兼容性较为稳定。
   • 在移动端，现代浏览器（如 Android 的 Chrome、Safari）也很好地支持 Flexbox 和 flex-wrap。
2. 老版本浏览器兼容：
   • Internet Explorer ：Flexbox 在 IE10 和 IE11 的支持存在一些问题，尤其是 flex-wrap 和一些其他 Flexbox 特性（如 justify-content 等）可能不完全支持或者表现不如预期。
   • 较旧的移动浏览器 ：某些较老的 Android 和 iOS 版本的浏览器可能存在 Flexbox 支持不全的情况，需要通过前缀或者降级处理来解决。

总结

• flex-wrap 是 Flexbox 中非常强大的属性，可以轻松实现元素的自动换行，非常适合响应式设计。
• 它适用于多种 HTML 元素，且在现代浏览器中兼容性良好。
• 如果兼容性是一个重要考虑点，特别是在较老浏览器中，可能需要使用一些降级方案，但在大多数情况下，Flexbox 足以解决大部分布局问题，尤其是在移动设备和现代浏览器中。

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;
}