面试题:怎么理解盒模型?

回答问题的时候要整理思路,也就是你的思考方式是怎么样的?

1) 盒模型有两种,W3C 和IE 盒子模型

    1、W3C定义的盒模型包括margin、border、padding、content,元素的宽度width=content的宽度

    2、IE盒模型与W3C盒模型的唯一区别就是元素的宽度,元素的width=border + padding + content

2) 对盒模型的理解

    IE定义的盒模型较为合理,所以在css3中新增了box-sizing,包含两个属性content-box和border-box。

    (1) content-box 元素的width = content

    (2)border-box 元素的width = border + padding + content

3)更多理解

     对于行内元素 margin-top/margin-bottom对于上下元素无效,margin-left/margin-right有效

     对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则

        (1) 都是整数 margin值取两者的最大值

        (2) 都是负数 margin值取最小值

        (3)两者正负相反,margin值取两者之和

再往深的说就是bfc的理解了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,664评论 0 8
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 7,251评论 0 20
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 5,753评论 0 0
  • 2017-03-20 赵清清 极致七号 我们不要做时间的奴隶 好吗好的 时间是伴随每个人一生的财富。它的...
    Lareine_6c39阅读 3,325评论 0 0

友情链接更多精彩内容