css知识学习系列（6）-每天10个知识点

---

点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

1. CSS中的“box-sizing”属性与“border”属性有什么关系？

• box-sizing属性用于定义元素的盒模型计算方式，它可以有两个值：content-box和border-box。
• border属性用于设置元素的边框，包括边框的宽度、样式和颜色。

关系：当box-sizing属性的值设置为border-box时，元素的宽度和高度包括了边框（border）和内边距（padding），而不仅仅是内容区域。这意味着元素的总尺寸是包括边框的。如果box-sizing属性值为content-box，则宽度和高度不包括边框，而是只计算内容区域的大小。这可以影响元素的布局和尺寸计算方式。

2. 在CSS中，如何使用“calc()”函数进行计算？有什么使用技巧？

• calc()函数用于在CSS中执行数学计算，可以在属性值中使用。它接受表达式作为参数，并返回计算结果。
• 使用技巧：您可以在calc()函数中执行加法、减法、乘法和除法运算，例如：
  • width: calc(50% - 20px);：计算宽度为50%减去20像素。
  • height: calc(100vh - 80px);：计算高度为视口高度减去80像素。
  • font-size: calc(16px + 2vw);：计算字体大小为16像素加上视口宽度的2%。

3. 在CSS中，如何使用“@import”引入外部样式表？有哪些注意事项？

• @import用于在CSS文件中引入其他CSS文件。语法如下：

  @import url("external.css");
  

注意事项：

• 最好将@import语句放在CSS文件的顶部，以确保样式表按正确的顺序加载。
• 避免在循环引用中使用@import，以免导致性能问题。
• 现代开发中更常见的做法是使用HTML中的标签来引入外部样式表，因为它们在页面加载时并行加载，不会阻塞页面渲染。

4. Flexbox和Grid布局在实践中哪个更常用？为什么？

• 使用哪种布局取决于项目需求和布局复杂性。
• Flexbox更适合创建一维布局，如水平或垂直居中、导航菜单、等高列等。
• Grid布局更适合创建二维网格布局，如复杂的网格结构、多列多行布局等。
• 在实践中，通常会根据项目的具体布局要求使用其中一种或两者结合使用。

5. 请解释一下CSS中的“display”属性，并举例说明它的使用。

• display属性用于指定元素的显示方式，它控制元素在文档中如何渲染。
• 常见的值包括：block、inline、inline-block、none等。

示例：

/* 将元素显示为块级元素 */
div {
  display: block;
}

/* 将元素显示为内联元素 */
span {
  display: inline;
}

/* 将元素显示为内联块级元素 */
a {
  display: inline-block;
}

/* 隐藏元素 */
.hidden {
  display: none;
}

6. CSS动画和JavaScript动画有什么区别？你更倾向于使用哪种方式？

• CSS动画：通过CSS的@keyframes规则或transition属性来实现动画效果。通常更容易使用和配置，适用于简单的动画需求，性能较好。
• JavaScript动画：通过JavaScript代码来操作元素的属性来实现动画。更灵活，适用于复杂的动画需求，但可能性能消耗较大。

选择哪种方式取决于动画的复杂性和需求。对于简单的过渡和动画效果，CSS动画通常更适合。对于复杂的、交互性强的动画，可能需要使用JavaScript动画。

7. 在CSS中，如何使用“position”属性实现元素定位？有哪些常见的定位方式？

• `position

属性用于控制元素的定位方式，常见的值包括： - static：默认值，元素按照文档流定位。 - relative：相对于其正常位置进行定位。 - absolute：相对于其最近的已定位祖先元素进行定位。 - fixed`：相对于视口进行定位。

常见的定位方式包括相对定位、绝对定位、固定定位等，可以使用top、right、bottom、left属性进一步控制位置。

8. 请解释一下CSS中的伪元素“::before”和“::after”。

• ::before和::after是伪元素，用于在元素的内容前面和后面插入虚拟元素。
• 它们通常与content属性一起使用，用于添加装饰性元素或文本。

示例：

p::before {
  content: "前置内容 ";
}

p::after {
  content: " 后置内容";
}

9. 在CSS中，如何使用“@media”实现响应式布局？

• @media用于创建媒体查询，根据不同的屏幕尺寸或设备条件应用不同的CSS样式。
• 示例：

  /* 当视口宽度小于768px时应用以下样式 */
  @media (max-width: 768px) {
    /* 响应式样式 */
    body {
      font-size: 14px;
    }
  }
  

10. CSS中的“box-shadow”属性可以实现阴影效果，有哪些常见的阴影类型？

- `box-shadow`属性用于添加元素的阴影效果。常见的阴影类型包括：
  - 内阴影：使用`inset`关键字可以创建元素内部的阴影。
  - 模糊阴影：使用模糊半径属性可以增加阴影的模糊程度。
  - 阴影颜色：可以通过颜色属性设置阴影的颜色。
  - 横向偏移和纵向偏移：使用`horizontal-offset`和`vertical-offset`属性来控制阴影的位置。

示例：
```css
/* 创建一个外部阴影 */
.box {
  box-shadow: 5px 5px 10px #888888;
}

/* 创建一个内部阴影 */
.inner-box {
  box-shadow: inset 0 0 5px #333;
}
```