web前端技术分享css盒模型学习目标1.认识盒模型2.盒模型的组成部分3.学习盒模型margin的相关元素padding1.css盒模型概念和组成概念：盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素之间的关系。CSS定义了所有元素都可以有类似盒子的形状和平面空间。盒模型的组成：border、border/margin、padding/filling、contentarea。二、盒模型的相关元素1、如何使用padding：padding：padding，设置页面中元素的内容与元素的边缘（border）之间的距离。也称为填料或填充物。用法：1）用于调整子元素在父元素中的位置。注意：padding属性需要添加到父元素中。2)padding值是在元素的原始大小上额外增加的。如果要保持元素大小不变，则需要从元素宽度或高度中减去padding属性值。添加属性值有4种方式：四个值：Up,right,down,left{padding:0px0px0px40px;}三个值：up,left,right,down{padding:10px20px30px;}两个值：up,down,left,right{padding:10px20px;}一个值：四个方向padding:2px;/定义元素周围的padding为2px/说明：一个方向的padding可以单独设置，如：padding-top:上方向10px；padding-right：向右方向10px；padding-bottom：向下方向10px；padding-left向左方向：10px；2.margin使用说明：Margin：边距，元素外部的空白区域，称为margin/border。"属性值的用法同上"margin-left:左边框margin-right:右边框margin-top:上边框margin-bottom:下边框属性值的4种方式：四种取值方式：右上左下三种values：上、下、左、右两个值：上、下、左、右一个值：四个方向margin:2px;/定义元素四边的边框为2px/margin:0auto;/*具有宽度的元素在浏览器中水平居中。定义元素的上下边框为2px。注意：可以单独设置一个方向的边框，如：margin-top:10px；注：/上下边距重叠，加上左右边距/3.标准框尺寸计算方法Width=左右边框+左右padding+宽度，高度=上下边框+上下padding+height，例如：一个盒子的border为1px，padding为10px，content的宽度为200px，高度为50px，width=border2+padding2+content.width=12+102+200=262px,height=border2+padding2+content.height=12+102+50=112px，怪异盒模型/IE盒模型组成：margin+内容区域宽度：width；身高：身高；4、盒模型注意事项*margin值分析：左右边界累加，正常文档流的上下边界重合。*在正常文档流下，子元素（block）直接写margin-top时，父元素会加上margin-top属性值，（子元素或父元素没有设置任何浮动和定位属性，或者父元素不设置边框的情况下。）一个标签可以设置多个类名语法：
