03-css盒模型概念及企业应用规则

1.盒模型分为块级元素盒模型和行内元素盒模型

2.块级元素盒模型分为标准盒模型（content-sizing）和怪异盒模型（border-sizing）
1)标准盒模型
box-sizing:content-box;(标准盒模型默认值，一般可不写)
默认盒子尺寸=content-box（width&height）
实际盒子尺寸=content（width/height）+padding+border
content=width&height
padding&border会向外撑大盒子实际尺寸
content尺寸不变
2)怪异盒模型
box-sizing:border-box;
默认盒子尺寸=border+padding+content(width&height)
实际盒子尺寸=border+padding+content(width/height)
padding&border会向内挤压content尺寸
盒子尺寸不变
content=width-padding-border
content最小值位0，当padding或者border足够大变大时，box尺寸才会变大
eg.
content14=width26-padding10-border1
0=26-25-1
0=27-26-1

3.盒子相关书写(举例说明)
1）width:300px;
height:300px;
background-color:pink;
2)外边距margin和内边距（内填充）padding
合起来写margin:10px 20px 30 px 40px；(上左下右)
分开写
padding-top:10px;
padding-left:20px;
padding-bottom:30px;
padding-right:40px;
3)边框border（粗细 样式 颜色）
根据属性分开写：
border-width:20px;(边框粗细)
border-style:solid;(边框样式：直线solid，虚线dashed,点线dotted,双实线double,立体groove,隐藏hidden,向内inset,none)
border-color:red;(边框颜色,transparent透明)

4.父子元素外边距合并现象解决办法
给父元素加一个padding或者border

5.兄弟元素外边距合并现象解决办法（现象：两者margin取其大者）
直接避免这种现象,统一一个方向设置margin