盒子模型

father::css #review/面试/前端

基本概念

base::

元素显示区域

css中, 标签的显示区域都被划分为:

• Content box: 这个区域是用来显示内容，大小可以通过设置 宽高样式 改变
• Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
• Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置

指向原始笔记的链接

梗概:

• 通过设置box-sizing属性的值来切换元素的盒模型
  • child::标准盒模型
  • child::怪异盒模型