盒模型

盒模型.png
  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

内部空间——从边框到内容之间的所有部分 都属于元素的内部空间

box - sizing : border-box 那么 width 和 height 属性的值将会包含内边距和边框，而外边距的宽度不会算到 width 中。

盒模型大小调整.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 如何理解盒模型？
    大家好，我是IT修真院的学员，一位正直纯洁善良的web前端程序员 今天给大家分享一下如何理解盒模型？ 1.背景介绍...
    宁静森林阅读 2,210评论 0赞 0
  • 07-CSS盒模型
    边框属性 边框属性的格式连写(同时设置四条边的边框)border: 边框的宽度 边框的样式 边框的颜色;快捷键:b...
    喝酸奶要舔盖__阅读 199评论 0赞 0
  • 谈谈我对盒模型的理解
    原文地址：谈谈我对盒模型的理解 盒子是无处不在的。 html任何一个元素都可以看作一个盒子，这个盒子不可见，但是...
    薛普定朗谔克阅读 13,749评论 2赞 12
  • CSS 盒模型、BFC、IFC、GFC、FFC
    基本慨念 内容区域（content）是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，...
    晴天的晴q阅读 2,231评论 0赞 0
  • 任务九~盒模型
    一、盒模型包括哪些属性？ CSS盒模型~即定义了Web页面中的元素是如何看做盒子来解析CSS盒模型属性有： con...
    dengpan阅读 439评论 0赞 0