看完不迷糊的 CSS 盒子模型介绍

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

简介

CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

CSS 盒子模型

   在CSS中我们可以把所有的HTML元素都看成一个盒子,我们可以以div为例,在浏览器的检查器中我们也可以比较直观的观察到盒子模型的样子如图所示:

1. 盒子模型的构成:

   内容区:content(图中间的蓝色区域)
   内边距:padding(图中紫色区域)
   边框:border(图中灰色区域)
   外边距:margin(黄色区域)

注意 区分盒子的大小和盒子在浏览器中所占的大小
   盒子的大小=内边距+边框+内容区
   盒子在浏览器中的大小=内边距+边框+内容区+外边距
   盒模型的构成=内边距+边框+内容区+外边距

2.盒子模型的分类:
   盒子模型可以通过box-sizing来设置,box-sizing值默认为content-box;

1)content-box:
   内容盒子/w3c盒子;
   该模型下设置的宽高:

div{
	width: 100px;//内容区的宽度
	height: 100px;//内容区的高度
	border: 5px solid pink;
	padding:10px;
	margin: 10px;
	}

盒子的宽度：width + border-left + border-right + padding-left + padding-right
盒子高度： height + border-top + border-bottom + padding-top + padding-bottom
此时盒子在浏览器中的高度 ：height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom;
盒子在浏览器中宽度：height + border-top + border-bottom + padding-top + padding-bottom + margin-top + margin-bottom;

2)border-box:
   边框盒子/IE盒子
   通过box-sizing来设置值为border-box
   该模型下设置的宽高:

width:200px;	//盒子的宽度
height:200px;	//盒子的高度

内容区的高度：height - border-top - border-bottom - padding-top - padding-bottom
内容区的高度：height - border-top - border-bottom - padding-top - padding-bottom
盒子在浏览器中的宽：width + margin-left + margin-right
盒子在浏览器中的高：height + margin-top + margin-bottom

3.盒子模型的使用
   一般需要设置box-sizing属性时都是要用到border-box,border-box有个特点那就是设置的宽高即为盒子的宽高当你改变padding或者border时盒子大小不会变而会挤压你的内容区大小,当你需要设置内容区在合资中的位置时可以使用border-box来设置。

总结