前端八股CSS：盒模型、CSS权重、+与~选择器、z-index、水平垂直居中、左侧固定，右侧自适应、三栏均分布局

一、盒模型

题目：简述CSS的盒模型

答：盒模型有两种类型，可以通过box-sizing设置
1.标准盒模型（content-box）:默认值，宽度和高度只包含内容区域，不包含内边距、边框和外边距。

2.边框盒模型（border-box）:宽度和高度包括内容区域、内边距和边框，但不包括外边距。

盒模型中元素的总宽度=内容宽度+左右内边距+左右边框+左右外边距
盒模型中元素的总高度=内容高度+上下内边距+上下边框+上下外边距

 二、CSS specificity (权重)

题目：简述下CSS权重

答：CSS权重是用于确定当多个CSS规则应用到同一元素时，哪个规则最终会生效。

权重优先级：
1.!important（最高）

2.内敛样式

3.ID选择器

4.类选择器、伪类选择器、属性选择器

5.标签选择器、伪元素

其中通配符选择器 *，组合选择器 + ~ >，否定伪类选择器 :not() 对优先级无影响

 三、’+’ 与 ’~’ 选择器有什么不同

答：

• + 选择器匹配紧邻的兄弟元素

• ~ 选择器匹配随后的所有兄弟元素

四、z-index 与层叠上下文

• 题目：如何更好地给元素设置 z-index

• 题目：z-index: 999 元素一定会置于 z-index: 0 元素之上吗

 答：1.z-index用于控制元素的堆叠顺序，决定哪些元素会出现在其他元素之上。

为了更好的使用z-index,可以合理划为堆叠上下文，还可以避免使用过高的z-index,同时要层级清晰

2.不一定，虽然 z-index: 999 的元素通常会被放置在 z-index: 0 的元素之上，但这也有条件。

z-index仅在元素处于同一堆叠上下文中有效

五、水平垂直居中

题目：如何实现一个元素的水平垂直居中

答：1. 使用flex布局：justify-content：center，align-content：center

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */height: 100vh;           /* 设置容器的高度为视口高度 */
}.content {/* 可以设置内容的宽高 */width: 200px;height: 100px;background-color: lightblue;
}

       2.使用grid布局：place-items：center

.container {display: grid;place-items: center; /* 水平垂直居中 */height: 100vh;
}.content {width: 200px;height: 100px;background-color: lightcoral;
}

       3.使用绝对定位：子绝父相，top:50%,left:50%,transform: translate(-50%, -50%) 通过移动元素自身的一半宽度和高度来使元素居中。

.container {position: relative;height: 100vh;
}.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 200px;height: 100px;background-color: lightgreen;
}

六、左侧固定、右侧自适应

题目：css如何实现左侧固定300px，右侧自适应的布局

答：使用flex和grid布局
1.flex:

• .container 使用 display: flex，将子元素放入 flex 布局中。
• .left 设置固定宽度 300px。
• .right 使用 flex: 1，表示它会占据剩余的空间并自适应宽度。

  .container {display: flex;
  }.left {width: 300px;  /* 左侧固定宽度 */background-color: lightblue;
  }.right {flex: 1;  /* 右侧自适应宽度 */background-color: lightgreen;
  }
  

2.grid:

• .container 使用 display: grid，并通过 grid-template-columns 定义了两列布局，第一列宽度为 300px，第二列使用 1fr 表示占据剩余空间并自适应宽度。

  .container {display: grid;grid-template-columns: 300px 1fr;  /* 左侧300px，右侧自适应 */
  }.left {background-color: lightblue;
  }.right {background-color: lightgreen;
  }
  

七、三栏均分布局

题目：如何实现三栏均分布局

答：使用flex和grid布局

• flex:
  • 方案一: flex: 1;
  • 方案二: flex-basis: calc(100% / 3)

    .container {display: flex;justify-content: space-between; /* 保证各栏之间有间距 */
    }.column {flex: 1;  /* 每一栏宽度相等 */padding: 10px;background-color: lightgray;margin: 0 5px; /* 增加栏间距 */
    }
    

• grid:
  • 父容器: grid-template-columns: 1fr 1fr 1fr

    .container {display: grid;grid-template-columns: 1fr,1fr,1fr;  /* 创建三列，宽度均分 */gap: 10px;  /* 每列之间的间距 */
    }.column {background-color: lightgray;padding: 10px;
    }