css盒子模型

css盒子模型:

css盒子模型,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素
主要分为 W3C标准盒子模型和 IE盒子模型

区别:对于W3C标准盒子模型,元素宽度等于 content的宽度
IE盒子模型,元素宽度等于 content + padding + border

box-sizing:

(1) content-box: 默认值,可以使设置的宽度和高度值应用到元素的内容框
总宽度 = margin + border + padding + width

(2) border-box:设置的width值其实是除margin外的border+padding+element的总宽度
总宽度 = margin + width;

(3) inherit 从父元素继承 box-sizing 属性的值

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,807评论 1 92
  • 前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏...
    秦至阅读 789评论 0 3
  • 最近在工作中遇到很多样式的问题,虽然是解决了但是总觉得自己知其然而不知其所以然。今天简单的了解了盒子模型,解开了我...
    魏永_Owen_Wei阅读 455评论 0 0
  • 我随意的在路上走着,和我一道的还有一个婆婆和她的外孙。本来都挺正常的,但竟闹起鬼来。 我先让那个孙子先跑,我带着那...
    爱梦的我阅读 105评论 0 0
  • 》》》连载目录 》》》从头开始读 再回杂志社的时候许倩倩已经另谋出路了,随着梁锦儒的离职,墨竹在杂志社里挑起了大梁...
    西子胡阅读 238评论 0 1