CSS盒模型

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

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

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

相关推荐
Electrolux3 分钟前
基于WASM的纯前端Office解决方案:在线编辑/导入导出/权限切换(已开源)
前端
合作小小程序员小小店22 分钟前
web网页开发,在线%医院诊断管理%系统,基于Idea,html,css,jQuery,java,jsp,ssh,mysql。
java·前端·css·数据库·jdk·html·intellij-idea
软件技术NINI25 分钟前
html css js网页制作成品——html+css+js5 页 jk制服附源码
javascript·css·html
爱学习的程序媛33 分钟前
【Web前端】Vue2与Vue3核心概览与优化对比
前端·javascript·vue.js·typescript
li@h1 小时前
如何在电脑端访问小程序时在胶囊添加一个全屏和缩放功能
前端
LFly_ice2 小时前
学习React-23-React-router
前端·学习·react.js
我叫张小白。2 小时前
TypeScript对象类型与接口:构建复杂数据结构
前端·javascript·typescript
墨客希2 小时前
如何快速掌握大型Vue项目
前端·javascript·vue.js
大福ya2 小时前
AI开源项目改造NextChat(ChatGPT-Next-Web)实现前端SSR改造打造一个初始框架
前端·chatgpt·前端框架·开源·aigc·reactjs·ai编程
n***33352 小时前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端