前端面试题之CSS中的box属性

前几天在面试中遇到面试官问了一个关于box的属性面试题,平时都是直接AI没有仔细去看过。来说说CSS中的常用box属性:

1. box-sizing

box-sizing 属性定义了元素的宽度和高度是否包括内边距(padding)和边框(border)。它有两个主要值:

  • content-box(默认值):宽度和高度仅包括内容区域,不包括内边距和边框。

  • border-box:宽度和高度包括内容、内边距和边框。

    1. box-shadow
  • box-shadow 属性用于给元素添加阴影效果。它可以通过以下参数定义阴影的外观:

  • h-offset:水平偏移量(必需)。

  • v-offset:垂直偏移量(必需)。

  • blur-radius:模糊半径(可选)。

  • spread-radius:阴影扩展半径(可选)。

  • color:阴影颜色(可选)。

  • inset:将阴影设置为内部阴影(可选)。

2. box-shadow

box-shadow 属性用于给元素添加阴影效果。它可以通过以下参数定义阴影的外观:

  • h-offset:水平偏移量(必需)。

  • v-offset:垂直偏移量(必需)。

  • blur-radius:模糊半径(可选)。

  • spread-radius:阴影扩展半径(可选)。

  • color:阴影颜色(可选)。

  • inset:将阴影设置为内部阴影(可选)。

3. box-decoration-break

box-decoration-break 属性定义了当元素被分页、分列或断行时,装饰(如边框、背景、阴影等)如何处理。它有两个主要值:

  • slice(默认值):装饰被分割为多个部分。

  • clone:装饰被克隆到每个部分。

4. border-box(伪类)

虽然不是 CSS 属性,但 border-box 伪类可以用来选择所有使用 box-sizing: border-box 的元素。

最后总结:

总结

与"box"相关的 CSS 属性主要用于控制元素的尺寸、布局和视觉效果:

  • box-sizing:控制盒子模型的计算方式。

  • box-shadow:为元素添加阴影效果。

  • box-decoration-break:定义装饰在分页或分列时的行为。

相关推荐
子兮曰1 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰1 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万1 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝1 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋1 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁1 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95271 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大1 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师1 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学1 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端