CSS盒模型

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

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

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

相关推荐
咖啡の猫2 小时前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲4 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5815 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路5 小时前
GeoTools 读取影像元数据
前端
ssshooter5 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry6 小时前
Jetpack Compose 中的状态
前端
dae bal7 小时前
关于RSA和AES加密
前端·vue.js
柳杉7 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog7 小时前
低端设备加载webp ANR
前端·算法
LKAI.7 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi