前端八股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

css 复制代码
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器的高度为视口高度 */
}

.content {
  /* 可以设置内容的宽高 */
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

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

css 复制代码
.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%) 通过移动元素自身的一半宽度和高度来使元素居中。

css 复制代码
.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,表示它会占据剩余的空间并自适应宽度。

    css 复制代码
    .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 表示占据剩余空间并自适应宽度。

    css 复制代码
    .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)

      css 复制代码
      .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

      css 复制代码
      .container {
        display: grid;
        grid-template-columns: 1fr,1fr,1fr;  /* 创建三列,宽度均分 */
        gap: 10px;  /* 每列之间的间距 */
      }
      
      .column {
        background-color: lightgray;
        padding: 10px;
      }
相关推荐
行板Andante3 分钟前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam35 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8501 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏1 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
悠哉悠哉愿意1 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮2 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2742 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite