美文网首页
盒子模型和box-sizing属性

盒子模型和box-sizing属性

作者: 5jing | 来源:发表于2018-11-08 22:36 被阅读0次

盒子模型分类

  • IE盒子模型
  • 标准盒子模型(W3C盒子模型)

这两个模型的唯一区别是计算width和height时,IE盒子模型包含padding和border, W3C盒子模型则不包括。

CSS3指定盒子模型种类

  • box-sizing: content-box
  • box-sizing: border-box

border-box使用场景

  • 如果网页有两块区域刚好等于网页区域时候,这个时候没有任何关系。
  • 如果给元素加上border或者padding,样式会被顶下去。

如果使用border-sizing: border-box,就会完美避开这个问题,因为此时标签的宽度包括了边框和内边距。
当需要两个宽度为50%的div确保并列时,设置box-sizing:border-box。此时的width:50%,是content+padding+border的宽度。

相关文章

  • css盒子模型

    手动设置盒子模型 css3属性 box-sizing box-sizing:content-box是W3C盒子模型...

  • min-height、max-height和height有什么不

    box-sizing 概述 box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。 ...

  • CSS知识

    盒子模型 box-sizing box-sizing有三个属性:content-box(default),bord...

  • 面试总结css

    box-sizing有哪些属性 标准盒子模型box-sizing:content-box;width = 内容的宽...

  • 盒模型

    盒模型切换,使用css3的box-sizing属性box-sizing: content-box; W3C盒子模型...

  • CSS3中的box-sizing属性

    box-sizing属性是css3中新添加的属性,用来替换原来的css盒子模型,box-sizing属性值的不同,...

  • box-sizing -CSS

    box-sizing属性用于更改用于计算元素宽度和高度的默认的CSS盒子模型。 关键字 值box-sizing: ...

  • CSS3中的box-sizing属性嗨有用!

    在讲box-sizing这个属性之前我们先来回顾一下CSS中的盒子模型 盒子模型 不同部分的说明: Margin(...

  • css的box-sizing

    概要 **box-sizing**属性用于更改用于计算元素宽度和高度的默认的CSS 盒子模型,可以使用此属性来模拟...

  • CSS盒子模型

    css盒子模型分为标准盒子模型和ie盒子模型,分别对应box-sizing: content-box | bord...

网友评论

      本文标题:盒子模型和box-sizing属性

      本文链接:https://www.haomeiwen.com/subject/nymgxqtx.html