CSS盒模型

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

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

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

相关推荐

  1. CSS 模型概述

    2024-05-12 00:06:05       49 阅读
  2. css模型

    2024-05-12 00:06:05       50 阅读
  3. CSS模型

    2024-05-12 00:06:05       35 阅读
  4. Web课程学习笔记--CSS模型

    2024-05-12 00:06:05       55 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-12 00:06:05       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-12 00:06:05       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-12 00:06:05       87 阅读
  4. Python语言-面向对象

    2024-05-12 00:06:05       96 阅读

热门阅读

  1. stylus详解与引入

    2024-05-12 00:06:05       36 阅读
  2. 十大科技回复框上

    2024-05-12 00:06:05       28 阅读
  3. 高斯数据库创建函数的语法

    2024-05-12 00:06:05       34 阅读
  4. 【重学C语言】十三、字符串

    2024-05-12 00:06:05       32 阅读
  5. js原生三种弹框

    2024-05-12 00:06:05       36 阅读