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

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

1.什么是盒模型（Box Moldel）

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

2.标准盒模型的概念分析

1.width/height（content box 内容区)

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

2.border（border box 边框区）

border-color:颜色; 默认与color样式一致
/* 颜色值: 十六进制, rgb, 关键字, transparent(使用父元素的颜色)*/
border-width边框宽度
border-style:种类; 默认是none 就是没有边框
/*dotted圆点边框, double双边框, dashed虚线边框,solid实线边框 */
块级元素的border的作用是在元素的内容区外加上一个边框线
边框样式的格式为:broder:宽度 种类 颜色;/复合写法/

3.border（border box 边框区）

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

4.padding（padding box 内边距区

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

标准盒模型的整体概念:

块元素在网页内容中实际占据空间的大小是:
实际占据宽度=width+左padding+右padding+左border+右border
实际占据高度=height+上padding+下padding+上border+下borde

尺寸数据详解

外边距的简写规则:

margin:10px;
/* 元素的上右下左四个外边距的值都是10px*/
margin:10px 20px;
/* 元素的上下两个外边距的值都是10px , 左右两个都是20px*/
margin:10px 20px 30px;
/* 元素的上外边距的值是10px , 左右两个都是20px, 下外边距是30px*/
margin:10px 20px 30px 40px;
/* 元素的上外边距的值是10px , 右是20px, 下外边距是30px,左外边距是40px*/

内边距的简写规则与外边距相同

怪异盒模型差异分析

怪异盒模型的整体概念:

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

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

高度同理可得…

---

企业级应用规则

父子元素外边距合并现象

父子元素外边距合并解决方案(给父元素加一个边框或是padding)