面试复习篇：CSS复习篇

视口是什么？

视口（viewport）是指网页内容实际显示的区域，指的是用户当前可见的部分。

浏览器中的视口

在桌面浏览器中，视口的大小通常是浏览器窗口的大小，用户可以通过调整窗口大小来改变视口的大小。视口的宽度由浏览器窗口的宽度决定，高度由浏览器窗口的高度决定。

移动设备中的视口

在移动设备上，由于屏幕较小，为了在有限的空间内显示网页内容，浏览器会对视口进行一些处理。有两种主要的视口类型：

布局视口（layout viewport）：布局视口是文档实际布局的基础。它的大小通常大于设备的屏幕大小，以适应网页内容的显示。用户可以通过页面滚动来查看超出布局视口的内容。
视觉视口（visual viewport）：视觉视口是用户当前可见的部分，即屏幕上实际可见的网页区域。用户通过缩放、滚动等操作来改变视觉视口的大小和位置。

为了确保网页在移动设备上具有适应性，可以通过设置meta标签来指定视口的大小和缩放行为。例如，使用以下meta标签可以将视口大小设置为设备宽度，并禁用缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

文档流是什么？

文档流是指元素在页面中按照其在HTML文档中的顺序布局的方式。在文档流中，元素会按照其在HTML文档中出现的顺序一个接一个地放置，并且默认会占据父元素的空间。

文档流下常见的3种流：

块级流（Block Flow）：块级流是默认的布局流模型，它使元素在垂直方向上一个接一个地排列。每个块级元素都会占据一行，并从上到下依次排列。常见的块级元素有<div>、<p>、<h1>到<h6>等。
行内流（Inline Flow）：行内流让元素在水平方向上一个接一个地排列。行内元素默认不会换行，它们会尽可能地放在同一行内。常见的行内元素有<a>、<span>、<strong>、<em>等。
行内块级流（Inline Block Flow）：行内块级流结合了行内流和块级流的特性。行内块级元素可以在水平方向上一个接一个地排列，并且可以设置宽度、高度、内边距和外边距等样式属性。常见的行内块级元素有<img>、<input>和<button>等

盒模型

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

BFC

Block format context 块级格式上下文
它是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素

如何形成一块BFC?

满足以下任一条件即可形成一块BFC

flot不是none
display是flex、inline-block等
position是absolute或者fixed
overflow不是visible

常见应用：清除浮动

前端开发中有哪些样式单位？

绝对单位

px：像素是最常见的单位，表示屏幕上的一个物理像素点。它是一个绝对单位，即无论屏幕大小如何，1px始终是1个设备像素的宽度。

相对单位

em：em单位是相对于父元素字体大小的单位。例如，如果父元素的字体大小为16px，设置子元素的字体大小为1.5em，则子元素的字体大小将为1.5倍的父元素字体大小，即24px（1.5 * 16px）。这也适用于其他属性，如元素的高度、宽度、间距等。
rem：rem的值相对于根元素（即html元素）的字体大小。如果根元素的字体大小为16px，设置元素的字体大小为2rem，那么该元素的字体大小将是32px。
%：百分比单位是相对于父元素的大小进行计算的。例如，设置一个元素的宽度为50%，表示它的宽度将是其父元素宽度的一半。

视口单位

vw（视口宽度单位）：表示视口宽度的百分比，1vw等于视口宽度的1%。
vh（视口高度单位）：表示视口高度的百分比，1vh等于视口高度的1%。
vmin（视口宽度和高度中较小的那个）：表示视口宽度和高度中较小值的百分比。
vmax（视口宽度和高度中较大的那个）：表示视口宽度和高度中较大值的百分比。

css选择器有哪些？

元素选择器：使用元素的标签名作为选择器，例如p、div等，可以选择所有匹配该标签的元素。
类选择器：使用.加上类名作为选择器，例如.my-class，可以选择使用该类名的元素。
ID选择器：使用#加上ID名作为选择器，例如#my-id，可以选择具有该ID的元素，每个页面唯一。
属性选择器：通过元素的属性进行选择，例如[name]选择具有name属性的元素，[name="value"]选择具有name属性且属性值等于value的元素。
伪类选择器：选择元素的特殊状态或位置，例如:hover选择鼠标悬停在元素上的状态，:nth-child(n)选择第n个子元素等。
伪元素选择器：用来选择元素的某个部分，例如::before用来选择元素的内容前面插入的内容，::after用来选择元素的内容后面插入的内容。
子元素选择器：使用>选择直接子元素，例如ul > li选择ul下的所有直接子元素li。
相邻兄弟选择器：使用+选择紧接在另一个元素后面的元素，例如h2 + p选择紧接在h2后面的p元素。
通用兄弟选择器：使用~选择在另一个元素后面的所有兄弟元素，例如h2 ~ p选择所有在h2后面的p元素。

css的权重如何计算？

CSS权重用于确定当多个选择器应用于同一个元素时，哪个选择器的样式规则将优先生效。

特定性是权重的主要因素。它根据选择器中不同部分的数量和类型来计算。特定性由四个部分组成：

内联样式（Inline Styles）特定性为1000。
ID选择器特定性为100。
类选择器、伪类选择器和属性选择器特定性为10。
元素选择器和伪元素选择器特定性为1。

如果选择器中有一个ID选择器和一个属性选择器，那么特定性就为110。

如果两个具有相同权重的样式规则应用于同一个元素，则最后出现的样式规则将生效，因为它们在样式表中的位置更靠后。

absolute和relative是如何定位的？

relative相对于自身进行定位
absolute相对于最近一层的定位元素进行定位

定位元素：

absolute、relative、fixed
body

实现水平垂直居中的方式有哪些？

使用Flexbox布局：
1. 父元素上设置display: flex;和justify-content: center;实现水平居中。
2. 父元素上设置align-items: center;实现垂直居中。
使用绝对定位和transform属性：
1. 父元素上设置position: relative
2. 子元素上设置position: absolute;和top: 50%;、left: 50%;
3. 子元素上使用transform: translate(-50%, -50%);将元素自身向左上角平移50%的宽度和高度。
使用绝对定位和marigin属性：
1. 父元素上设置position: relative
2. 子元素上设置position: absolute;、top: 0;、left: 0;、right:0、bottom:0
3. 子元素上设置margin: auto;

文本水平垂直居中：

父元素上设置text-align: center;实现水平居中。
父元素上设置line-height: 计算值;，并使line-height等于父元素的高度实现垂直居中。

flex

容器属性

容器属性是用来设置父容器的，控制其中子元素的布局和对齐方式。

display: 设置父容器的显示方式为flex，可以取值为flex或inline-flex
flex-direction: 指定子元素在容器中的排列方向, 决定主轴。
- row 水平排列，默认值
- column 垂直排列
- row-reverse 水平逆序排列
- column-reverse 垂直逆序排列
flex-wrap: 控制子元素是否换行
- nowrap 不换行，默认值
- wrap 换行
- wrap-reverse 逆序换行
justify-content: 决定子元素在主轴上的对齐方式
- flex-start 起始端对齐
- flex-end 终止端对齐
- center 居中对齐
- space-between 两端对齐，项目间间隔相等
- space-around 每个项目两侧的间隔相等
- space-evenly 每个项目两侧和项目之间的间隔相等
align-items: 决定子元素在交叉轴上的对齐方式 (尝试一下)
- flex-start 起始端对齐
- flex-end 终止端对齐
- center 居中对齐
- baseline 基线对齐
- stretch 拉伸对齐
align-content: 控制多行子元素在交叉轴上的对齐方式。适用于有多行的情况。(尝试一下)
- flex-start 起始端对齐
- flex-end 终止端对齐
- center 居中对齐
- space-between 两端对齐，项目间间隔相等
- space-around 每个项目两侧的间隔相等
- stretch 拉伸对齐

子元素属性

子元素属性是用来设置容器中子元素的属性，控制它们在容器内的布局和对齐方式。

flex-grow: 指定子元素的放大比例。默认值为0，不进行放大。当容器有剩余空间时，子元素的宽度根据放大比例进行分配。
flex-shrink: 指定子元素的缩小比例。默认值为1，表示可以缩小。当容器空间不足时，子元素的宽度根据缩小比例进行调整。
flex-basis: 设置子元素的初始宽度。默认值为auto，表示根据内容自动分配。可以设置具体的宽度值或百分比。
flex: flex-grow、flex-shrink和flex-basis属性的缩写。可以通过简写形式设置这三个值，例如flex: 1 0 100px表示放大比例为1、不允许缩小、初始宽度为100px。flex:1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
align-self: 用于单个子元素，可以覆盖父容器的align-items属性，控制其在交叉轴上的对齐方式。
- flex-start 起始端对齐
- flex-end 终止端对齐
- center 居中对齐
- baseline 基线对齐
- stretch 拉伸对齐

使用flex快速实现一个九宫格

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 100vh;
      margin: 0;
    }

    .center {
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .container {
      height: 50vh;
      width: 50vh;
      background-color: aqua;

      display: flex;
      flex-wrap: wrap;
    }

    .item {
      flex-basis: calc(100% / 3);
    }

    .other {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: azure;
      box-sizing: border-box;
      border: 1px solid #eeeeee;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="center container">
    <div class="item other">1</div>
    <div class="item other">2</div>
    <div class="item other">3</div>
    <div class="item other">4</div>
    <div class="item other">5</div>
    <div class="item other">6</div>
    <div class="item other">7</div>
    <div class="item other">8</div>
    <div class="item other">9</div>
  </div>
</body>

</html>

如何解决长单词溢出？

.text-container {
  word-break: break-all;
}

如何实现文本溢出省略？

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

如何实现超出3行溢出省略？

.text-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
}

如何实现响应式布局？

根据媒体查询设置html的font-size大小,决定root值
使用rem设置body的font-size，控制全局默认文本大小
其余地方单位使用rem

12.8px

16px

19.2px

22.4px

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media only screen and (max-width:389px) {
      html {
        font-size: 64px;
      }
    }

    @media only screen and (min-width:390px) and (max-width: 767px) {
      html {
        font-size: 80px;
      }
    }

    @media only screen and (min-width:768px) and (max-width: 1366px) {
      html {
        font-size: 96px;
      }
    }

    @media only screen and (min-width:1367px) {
      html {
        font-size: 112px;
      }
    }

    body {
      height: 100vh;
      margin: 0;
      font-size: 0.2rem;
    }

    .container {
      height: 50vh;
      background-color: aqua;

      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
  </style>
</head>

<body>
  <div class="container">123</div>
</body>

</html>

如何突破浏览器的font-size最小12px的限制？

使用transform属性可以对元素进行缩放，从而绕过浏览器的最小限制。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .font-size-16 {
      font-size: 16px;
    }

    .font-size-8 {
      font-size: 16px;
      transform: scale(0.5);
      transform-origin: top left;
    }
  </style>
</head>

<body>
  <div>
    <div class="font-size-16">
      16px大小文字
    </div>
    <div class="font-size-8">
      8px大小文字
    </div>
  </div>
</body>

</html>

同理，它也可以用来还原retina屏的1px边框大小