CSS盒模型

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

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

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

相关推荐
pas13610 分钟前
36-mini-vue nextTick
前端·javascript·vue.js
梅梅绵绵冰21 分钟前
springboot初步1
java·前端·spring boot
星辰_mya25 分钟前
nginx之待续-没写完
前端
GISer_Jing41 分钟前
大语言模型Agent入门指南
前端·数据库·人工智能
运筹vivo@1 小时前
BUUCTF: [极客大挑战 2019]Upload
前端·web安全·php·ctf
qq_12498707531 小时前
基于Spring Boot的长春美食推荐管理系统的设计与实现(源码+论文+部署+安装)
java·前端·spring boot·后端·毕业设计·美食·计算机毕业设计
运筹vivo@1 小时前
攻防世界: easyupload
前端·web安全·php·ctf
朝阳391 小时前
CSS-in-JS(含样式化组件 styled-components)
css
UI设计兰亭妙微1 小时前
兰亭妙微:以HTML前端、UI/交互/图标设计赋能数字孪生与大屏设计新标杆
前端·ui·用户体验设计
jarreyer2 小时前
【AI编程】claudecode插件配置记录和trae软件相关配置
前端·chrome·ai编程