• 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 标准盒模型

  • 相关阅读:
    winform中textbox属性Multiline=true时全选
    golang中的类和接口的使用
    beego上传文件
    golang 字符串操作实例
    golang操作文件
    golang获取程序运行路径
    ECharts使用心得
    es6新特性分享
    es6分享——变量的解构赋值
    NPM使用前设置和升级
  • 原文地址:https://www.cnblogs.com/zhangguicheng/p/12738104.html
Copyright © 2020-2023  润新知