zoukankan      html  css  js  c++  java
  • W3C 标准盒模型和 IE 模型

    CSS 中有两种盒模型,分别是 IE 盒模型W3C 标准盒模型

    标准盒子模型

    从上图可以看到标准 W3C 盒模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

    IE盒子模型

    从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒模型不同的是:IE 盒模型的 content 部分包含了 border 和 pading。

    W3C 标准盒模型

    元素空间占据空间大小
    元素空间高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top  + margin-bottom
    元素空间宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
    
    内盒尺寸计算(元素大小)
    元素高度 = height + padding-top + padding-bottom + border-top + border-bottom
    元素宽度 = width + padding-left + padding-right + border-left + border-right
    

    IE 模型

    元素空间占据空间大小
    元素空间高度 = height + padding-top + padding-bottom + border-top + border-bottom(height 包含了 padding, border)
    元素空间宽度 = width + padding-left + padding-right + border-left + border-right(width包含了 padding, border)
    
    内盒尺寸计算(元素大小)
    元素高度=height(height包含了padding,border)
    元素宽度=width(width包含了padding,border)
    

    我们平常使用的大都是 W3C 标准盒模型

  • 相关阅读:
    CentOS 6.5 安装 VNC Server
    vs2008出错
    MySQL 尽量避免使用 TIMESTAMP
    excel中生成32位随机id
    库存扣减和锁
    精通 MySQL 索引
    Java代码性能优化
    RocketMQ 消息丢失场景分析及如何解决
    Java 8 的内存结构
    Spring Boot + MyBatis + MySQL 实现读写分离
  • 原文地址:https://www.cnblogs.com/zhangguicheng/p/12738104.html
Copyright © 2011-2022 走看看