CSS盒模型

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

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

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

相关推荐
酉鬼女又兒6 分钟前
零基础快速入门前端Web存储(sessionStorage & localStorage)知识点详解与蓝桥杯考点应用(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·html
DanCheOo11 分钟前
# 从"会用 AI"到"架构 AI":高级前端的认知升级
前端·ai编程
社恐的下水道蟑螂14 分钟前
前端面试必问 Git 通关指南:常用命令速查 + merge/rebase 深度辨析,看完再也不慌
前端·git·面试
None32122 分钟前
NestJS 流式文件上传实践:从 Multer 到 Busboy 的进阶之路
前端·后端
海浪浪24 分钟前
Symbol 产生的背景以及应用场景
前端·javascript
DROm RAPS33 分钟前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
OpenTiny社区33 分钟前
GenUI SDK v1.1.0 正式发布|全端体验革新,能力与稳定性进阶
前端·ai编程
IAUTOMOBILE35 分钟前
Code Marathon 项目源码解析与技术实践
java·前端·算法
Flying pigs~~35 分钟前
基于Deepseek大模型API完成文本分类预测功能
java·前端·人工智能·python·langchain·deepseek
名字很费劲1 小时前
vue项目,刷新后出现404错误,怎么解决
前端·javascript·vue·404