CSS 盒模子

CSS盒模子（Box Model）是网页布局的核心概念，它将每个HTML元素视为一个矩形盒子，由内容、内边距、边框和外边距四部门组成。
组成部门：

• ​内容区（Content）​：存放文本、图片等元素的现实内容，由width/height控制巨细
  
• ​内边距（Padding）​：内容与边框的间距，通过padding调整，支持分方向设置
  
• ​边框（Border）​：包裹内容与内边距的可见线条，可定义样式、颜色及宽度
  
• ​外边距（Margin）​：与其他元素的透明间距，通过margin控制，垂直方向大概归并（取较大值）
  

两种盒模子

CSS3中的盒模子有以下两种：标准盒子模子、IE盒子模子（也叫怪异盒模子）

 

 盒模子都是由四个部门组成的，分别是margin、border、padding和content。
标准盒模子和IE盒模子的区别在于设置width和height时，所对应的范围差别：

• 标准盒模子的width和height属性的范围只包含了content
  
• IE盒模子的width和height属性的范围包含了border、padding和content
  

可以通过修改元素的box-sizing属性来改变元素的盒模子：

• box-sizing: content-box 表示标准盒模子（默认值）
  
• box-sizing: border-box 表示IE盒模子（怪异盒模子）
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。