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

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

1.盒模型定义

盒模型（Box Moldel），是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型。如图：

2.标准盒模型概念分析

🎈内容区 width/height

块级元素的width和height值在标准盒模型下，定义了一个块级元素能够存放内容的区域大小，元素的内容从width和height的左上角原点开始排列内容.如图：

🎈边框区 border

块级元素的border的作用是在元素的内容区外加上一个边框线
边框样式的格式为:broder:宽度 种类 颜色;例如：border:2px solid red;

border-color:颜色；默认与color样式一致（颜色值：十六进制，rgb，关键字；transparent<透明>）

border-style:种类；默认是none，就是没有边框。（dottedy圆点边框，double双边框，dashed虚线边框，solid实线边框）

元素的边框可以单独给某一方向设置
比如:
设置顶部边框:border-top:宽度 种类 颜色;
设置底部边框:border-bottom:宽度 种类 颜色;
设置左部边框:border-left:宽度 种类 颜色;
设置右部边框:border-right:宽度 种类 颜色;

🎈内边距区 padding

块级元素的padding的作用是在元素的内容区与边框线之间加一个内部间距,用来隔开元素内容和边框线, 使得元素内容更加突出明显, 默认情况下, padding区域的颜色和内容区的颜色保持一致。padding也可以单独设置四个方向不同的值, 具体的概念与border相似.如图黄色区域：

🎈外边距 margin

外边距:元素与其他元素以及元素与浏览器边缘之间的间距。

外边距的简写规则:（内边距的简写规则与外边距相同）
margin:10px;
/元素的上右下左四个外边距的值都是10px*/
margin:10px 20px;
/* 上下，左右*/
margin:10px 20px 30px;
/* 上，左右，下/
margin:10px 20px 30px 40px;
/ 上，右，下，左/

🎈🎈🎈整体分析：

3.怪异盒模型概念分析

🎈🎈块元素在网页内容中实际占据空间的大小在两种不同的盒模型下的表现结果是:
标准盒模型：（box-sizing=content box）
实际宽尺寸=width+左padding+右padding+左border+右border
内容区宽尺寸=width

怪异盒模型：(box-sizing=border box)
实际宽尺寸=width
内容区宽尺寸=width-左border-右border-左padding-右padding

高度同理可得。

4.企业级应用规则

①父子元素外边距合并

解决方案：

1. 1.给父级设置一个边框 （border）
2. 2.给父级设置内边距 （padding）
3. 3.溢出隐藏 ：（ overflow: hidden;）
4. 4.给子级或父级任何一方添加“display:inlineblock; ”
5. 5.给子级或父级任何一方添加浮动 （float）
6. 6.给子级或父级任何一方添加定位

②兄弟元素外边距合并

解决方案：当两者外边距（margin）发生冲突时，看最大值。