我的第一篇博客之《CSS世界》---读书笔记（1）

CSS–宽度分离原则+box-sizing属性–解决div盒子模型宽度问题
1.为什么要宽度分离？（要计算width）
答：一个盒模型的结构如下图所示

div{
width: 100px;
height: 60px;
padding: 20px;
border: 20px solid #00FFFF;
}

这个盒子的实际宽度是border+padding+width=180px
但是我们的本意是想设计出一个实际宽度100px的盒子，三者的综合加起来为100px.所以我们应该要进行计算，width：60px才可以。但是在进行盒子设计的时候还要进行计算，然后给width赋值，显得有点麻烦，有时候可能遇到麻烦的border 或者padding 还可能会计算错误，得不偿失。所以在此就用到了宽度分离原则。
（ps:width:100px； height:60px ；这里的width 和height均指盒子内容的宽度，也就是上图中蓝色区域的部分！！！）

2：何为宽度分离？？（大盒子中嵌套小盒子）
答：.father {
width:100px;
}
.son {
padding: 20px;
border: 20px solid #00FFFF;
}
采用一个大盒子嵌套一个小盒子。大盒子设置盒子模型的总宽度100px,小盒子在设置 盒子模型的其他属性，border padding 等。
宽度分离后的盒模型结构如下图：

3.box-sizing:改变width的作用对象
我们知道width默认情况下是指盒子内容（content）的实际宽度.
我们可以利用box-sizing来改变width的作用的对象，使它不再指content-box的宽度，根据我们的需要来指定对象。
譬如我们上面的例子，我们还是想要一个总宽度为100px 边框20px 内边距20px的盒子模型
div {
width: 100px;
box-sizing: border-box;
border: 20px solid #00FFFF;
padding: 20px ;

		}

这段代码对应的盒子模型如下

width: 100px;
box-sizing: border-box;
此时的width(100px)=border+padding+content-box的宽度
（ps:需要注意的一点是box-sizing不支持margin-box）
一个盒子总宽度是由四部分组成：
盒子宽度=width+padding+border+margin
由于本文中没有设置margin属性的值，故算盒子模型得总宽度时没有 加上margin 不要造成误解。