CSS盒模型

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

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

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

相关推荐
Cobyte12 分钟前
Vite & Rollup 插件开发实践
前端·javascript·vue.js
朝阳3914 分钟前
react19【系列实用教程】实用组件封装
开发语言·前端·javascript
IT_陈寒18 分钟前
React的useEffect依赖数组把我坑惨了,原来这样写才靠谱
前端·人工智能·后端
恋猫de小郭18 分钟前
Flutter hit,一个可以灵活控制溢出点击的第三方包
android·前端·flutter
古韵23 分钟前
小程序上传进度条,还要自己监听 onProgressUpdate 吗?
前端·javascript·uni-app
古韵24 分钟前
axios 已经跑得好好的,还要不要上 alova?
前端·javascript·axios
噗噗1233 分钟前
企业微信侧边栏应用与前端 JS-SDK 的深度整合指南
前端·javascript·企业微信
朝阳3939 分钟前
react19【实战】配置化路由登录鉴权完整方案
前端·javascript·react.js
ShuiShenHuoLe1 小时前
vue如何实现国际化,它来了!
前端·javascript·vue.js
其美杰布-富贵-李1 小时前
Vue Router 实战教程
前端·javascript·vue.js