CSS盒模型

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

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

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

相关推荐
0思必得013 分钟前
[Web自动化] Selenium处理Cookie
前端·爬虫·python·selenium·自动化
徐同保22 分钟前
react-markdown使用
前端·react.js·前端框架
2601_9498574329 分钟前
Flutter for OpenHarmony Web开发助手App实战:CSS参考
前端·css·flutter
无法长大29 分钟前
如何判断项目需不需要用、能不能用Tailwind CSS
前端·css·vue.js·elementui·vue3·tailwind css
橙露31 分钟前
移动端前端适配:Rem、VW/VH 与媒体查询的综合应用指南
前端·媒体
GGGG寄了1 小时前
CSS——CSS引入方式+选择器类型
前端·css·html
墨染青竹梦悠然1 小时前
基于Django+vue的图书借阅管理系统
前端·vue.js·后端·python·django·毕业设计·毕设
码农六六1 小时前
js函数柯里化
开发语言·前端·javascript
爱敲代码的小鱼1 小时前
Vue的简介:
前端·javascript·vue.js