标准盒模型

1. 什么是盒模型?
   盒模型(box moldel),是w3c规定一个浏览器如何渲染,显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型

2. 标准盒模型
   —width/height (content box 内容区)
   块级元素的width和height值在标准和模型下,定义了一个块级元素能够存放内容的区域大小,元素的内容从width和height的左上角原点开始排列内容
   —border (border box 边框区)
   border-color:颜色; 默认与color样式一致/颜色值: 十六进制,rgb,关键字,transparent [ 透明的(使用父元素的颜色)]/
   border-style:种类; 默认是none就是没有边框/*dotted 圆点边框, double 双边框; dashed 虚边框; solid 实线边框 */
   块级元素的border的作用是在元素的内容区外加上一个边框线
   边框样式为:border:宽度 种类 颜色;./复合写法/
   —border (border box 边框区) 详解
   元素的边框可以单独给某一个方向设置
   例: 顶部边框: border-top:宽度 种类 颜色;
   底部边框: border-bottom:宽度 种类 颜色;
   左边边框: border-letf:宽度 种类 颜色;
   右边边框: border-right:宽度 种类颜色;
   —padding (padding box 内边距区)
   块级元素的padding的作用是在元素的内容区与边框线之间加一个内部边距,用来隔开元素内容和边框线,使得元素内容更加突出明显,默认情况下,padding区域的颜色和内容区的颜色保持一致
   padding也可以单独设置四个方向不同的值,具体的概念与border相似
   —标准盒模型的整体概念
   块元素在网页内容中实际占据空间的大小是:
   实际占据宽度=width+左padding+右padding+左border+右border
   实际占据高度=height+上padding+右padding+左border+右border