看完不迷糊的 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;
盒子在浏览器中宽度：width + border-left + border-right + padding-left + padding-right + margin-left + margin-right;

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

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

内容区的宽度：width - border-right - border-left - padding-right - padding-right
内容区的高度：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来设置。