CSS盒模型

Css重要的两个部分:样式计算 + 视觉格式化模型(包含块);

  • 浮动元素和常规元素的包含块是父元素的内容区;
    • 元素的width/height百分比相对的是包含块的宽度/高度;
    • 元素的margin/padding百分比相对的是包含块的宽度width;
    • 元素的left相对的是包含块的左边缘;
    • 元素的top相对的是包含块的上边缘;
  • 绝对定位元素absolute包含块是第一个定位祖先的填充盒(padding box,包含内边距和content区域)
  • 固定定位元素fixed:
    • 祖先元素没有改动 transform,包含块就是整个;
    • 祖先元素有使用transform,包含块就是使用transform的祖先元素的填充盒;

所以说绝对定位和固定定位的包含块不一样;

相关推荐
沛沛老爹11 分钟前
Web开发者转型AI:Agent Skills版本控制与管理实战——从Git到AI技能仓库
java·前端·人工智能·git·架构·rag
yyt36304584116 分钟前
TypeScript { [key: string]: unknown } 索引签名写法和 Record 替代
前端·javascript·vue.js·typescript·ecmascript·es6
揽昕1 小时前
判断对象是否含有某个属性
开发语言·前端·javascript
前端小趴菜051 小时前
TypeScript
前端·typescript
getapi2 小时前
在宝塔面板中部署 Vue 项目打包后的 dist 文件作为前端
前端·javascript·vue.js
5967851542 小时前
css浮动
前端·css·html
我想发发发3 小时前
已经安装了ROS环境却还是报错`ModuleNotFoundError: No module named ‘rclpy‘`
前端·人工智能·chrome·机器人
—Qeyser3 小时前
Flutter 组件通信完全指南
前端·javascript·flutter
天天进步20153 小时前
从脚本到服务:5 分钟通过 Botasaurus 将你的爬虫逻辑转化为 Web API
前端·爬虫
沛沛老爹3 小时前
Web转AI架构篇:Agent Skills vs MCP-混合架构设计模式实战指南
java·前端·人工智能·架构·llm·rag