CSS盒模型

标准盒模型

margin：外边距  元素与元素之间的距离称之为外边距；

           margin：15px  20px 14px  26px；意思是上外边距是 15px  ，右外边距是20px，下外边距是 14px，左外边距是26px；

           外边距的缩写形式是： 上  右   下  左 ；

border：边框；

           border-weight：1px； 边框的宽度；

           border-style：solid；  边框的样式； solid 实线  、dashed 虚线、dotted 点状、double  双线。

           border-color：#000； 边框颜色；

           简写： border：1px   solid  red ；

padding：内边距；边框到内容之间的距离称之为 内边距；

content：内容；

一个元素在页面中实际占用的空间：

水平方向上：左右margin+左右border+左右padding+width；

垂直方向上：上下margin+上下border+上下padding+height；

标准盒模型的width宽height高指的是内容content的宽高！

怪异盒模型：

怪异盒模型的 宽width 指的是：左右边框大小+左右内边距大小+内容的宽；

                       高 height 指的是：上下边框大小 + 上下内边距 + 内容的高；

利用： box-sizing：border-box； 可以将标准盒模型转换为怪异盒模型！