Skip to content

描述一下css盒模型 #35

@sweetXiaoyan

Description

@sweetXiaoyan

css盒模型

基本概念

就是来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

  • 标准盒模型
    image

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

  • IE盒子模型
    图片

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

在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,box-sizing:border-box表示的是IE盒子模型

最后,前面我们还提到了,box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

也很好理解性记忆,包含什么,width就从什么开始算起。

Metadata

Metadata

Assignees

No one assigned

    Labels

    csscss以及css3相关内容

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions