css基础 - 常见面试题

1. 实现两栏、三栏布局的方法：

1.1 表格布局：

<style>
  .container {
    display: table;
    width: 100%;
  }
  .left-column, .right-column {
    display: table-cell;
  }
</style>

<div class="container">
  <div class="left-column">左栏内容</div>
  <div class="right-column">右栏内容</div>
</div>

1.2 浮动 + 外边距布局（已不推荐使用）：

<style>
  .container {
    overflow: hidden; /* 清除浮动 */
  }
  .left-column, .right-column {
    float: left;
    width: 50%;
  }
</style>

<div class="container">
  <div class="left-column">左栏内容</div>
  <div class="right-column">右栏内容</div>
</div>

1.3 内联块布局：

<style>
  .left-column, .right-column {
    display: inline-block;
    width: 49%; /* 防止换行导致间距 */
    vertical-align: top; /* 使列顶部对齐 */
  }
</style>

<div class="left-column">左栏内容</div><div class="right-column">右栏内容</div>

1.4 弹性盒子布局（Flexbox）：

<style>
  .container {
    display: flex;
  }
  .left-column, .right-column {
    flex: 1;
  }
</style>

<div class="container">
  <div class="left-column">左栏内容</div>
  <div class="right-column">右栏内容</div>
</div>

2. position：absolute / fixed区别：

2.1 前者相对最近的 absolute/relative 定位：

• position: absolute; 元素会相对于最近的具有定位属性（position: relative/absolute/fixed）的父元素进行定位。

2.2 后者相对屏幕（viewport）：

• position: fixed; 元素会相对于浏览器窗口进行定位，始终固定在屏幕上的某个位置，不随滚动条滚动而改变位置。

3. dispaly：inline-block间隙：

3.1 原因：字符间距

• display: inline-block; 元素会受到字符间距的影响，因为HTML中 inline 元素之间的空格和换行都会导致间距。

3.2 解决：消除字符或者消除间距

• 消除字符间距：将HTML中 inline-block 元素写在一行，去掉空格和换行。
• 消除间距：设置父元素 font-size: 0; 或者给父元素添加 letter-spacing: -1em;。

4. 如何清除浮动：

4.1 父元素布局不会管浮动元素：

• 当子元素浮动时，父元素的高度会坍塌，不会自动撑开，导致布局混乱。

4.2 让盒子负责自己的布局：

• 给父元素添加 overflow: hidden; 或 overflow: auto; 可以使父元素包裹浮动元素，从而保持正确的布局。

4.3 ::after 伪元素清除浮动：

<style>
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

<div class="clearfix">
  <!-- 浮动元素在这里 -->
</div>

5. 如何适配移动端布局：

5.1 viewport：

• 在移动端，通过设置视口的宽度，让网页以正确的宽度显示在移动设备上，可以在HTML文件的头部添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5.2 rem、viewport、media query：

• 使用相对单位 rem，根据不同设备的 viewport 宽度来设置基准字体大小，从而实现响应式布局。
• 使用 @media 查询来根据不同屏幕尺寸应用不同的样式。

5.3 设计上：隐藏、折行、自适应：

• 根据设备尺寸，可以隐藏某些不必要的元素或调整元素的显示方式。
• 对于大块文本，可以考虑使用折行或自适应布局，以适应不同屏幕尺寸。

6. CSS样式（选择器）的优先级：

6.1 计算权重：

• ID选择器的权重最高，class选择器次之，标签选择器最低。
• 在计算优先级时，将权重表示为四位数：a,b,c,d，其中a表示ID选择器的个数，b表示class选择器、属性选择器和伪类选择器的个数，c表示标签选择器的个数，d表示伪元素选择器的个数。
• 权重高的样式会覆盖权重低的样式。

6.2 !important：

• 使用 !important 声明的样式具有最高优先级，尽量避免滥用该特性，以免造成难以维护的代码。

6.3 内联样式：

• 在HTML标签内使用 style 属性设置的样式具有更高的优先级。

6.4 后写的优先级高：

• 当出现样式冲突时，后写的样式会覆盖前面的样式。

7. 雪碧图作用：

7.1 减少HTTP请求数，提高加载性能：

• 将多个小图标或背景图合并成一个

雪碧图，减少了图片请求的数量，加快了页面加载速度。

7.2 有一些情况可以减少图片加载：

• 通过调整背景图的位置来实现状态切换，而不需要再加载不同状态的图片。

8. 自定义字体使用场景：

8.1 宣传、品牌、banner等固定文案：

• 使用自定义字体可以增加页面的独特性和吸引力，用于突出品牌或特定文案。

8.2 字体图标：

• 自定义字体可以将图标制作成字体图标，优势是可以调整图标大小和颜色，减少图标文件的数量，提高性能和可维护性。

9. Base64使用：

9.1 减少HTTP请求：

• 将小图片转换为Base64编码，直接嵌入HTML或CSS中，从而减少图片的HTTP请求，适用于较小的图标或背景图片。

9.2 适用于小图片：

• Base64编码会增加图片大小，适用于小图标或者图形，不适合大图片，因为会导致HTML或CSS文件体积增大。

9.3 Base64的体积约为原图的4/3：

• Base64编码会让图片数据增大，约为原图的4/3，所以只适用于小图标或小图片。

10. 伪类和伪元素的状态：

10.1 伪类表示状态：

• 伪类用于选择元素的特定状态，例如 :hover 表示鼠标悬停状态，:active 表示元素被激活状态，:focus 表示获取焦点状态等。

10.2 伪元素是真的有元素：

• 伪元素用于在选中的元素的前面或后面插入一些内容，例如 ::before 和 ::after。

10.3 前者单冒号，后者双冒号：

• 伪类使用单冒号 : 表示，伪元素使用双冒号 :: 表示（CSS3规范）。在旧版CSS中，伪元素使用单冒号表示，但为了兼容性，建议使用双冒号。

11. 如何美化checkbox：

11.1 使用 label[for] 和 id：

• 将checkbox隐藏，使用label标签关联checkbox，点击label时会触发checkbox的选中状态。

11.2 隐藏原生input：

<style>
  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
</style>

11.3 使用:checked + label：

<style>
  input[type="checkbox"] {
    display: none;
  }
  input[type="checkbox"] + label {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #ccc;
  }
  input[type="checkbox"]:checked + label {
    background-color: #f00; /* 当复选框被选中时改变样式 */
  }
</style>

<input type="checkbox" id="checkbox">
<label for="checkbox"></label>