什么是盒子模型盒子模型是CSS布局的基石，它规定了网页元素如何显示以及元素之间的关系。CSS定义所有元素都具有与盒子相同的形状和平面空间，即它们都包含边框、边框、内边距和内容区域。这是盒子模型。盒模型padding(innermargin)padding用法padding：padding，设置页面中元素的内容与元素的边缘（border）之间的距离。也称为填料。用法：1)用于调整子元素在父元素中的位置关系。注意：padding属性需要添加到父元素中。2)padding值添加到元素的原始大小。如果要保持元素的大小不变，则需要从元素的宽度或高度中减去添加的padding属性值。属性值的4种方式：四种取值：top,right,bottom,left{padding:10px20px30px40px;}三种取值：top,left,bottom{padding:10px20px30px;}两种取值：top,bottom,left,andright{padding:10px20px;}一个值：四个方向的padding:2px;/*定义元素周围的padding为2px*/说明：一个方向的padding可以独立设置，如：padding-top:向上方向10px；pahdding-right:10px在正确的方向；pahdding-right:10px在正确的方向；方向padding-bottom:10px;左方向padding-left:10px;margin的使用方法margin：margin，元素外的空白区域，称为margin。margin-left:左边框margin-right:右边框margin-top:上边框margin-bottom:下边框4种取值方式：四种取值方式：toprightbottomleft三取值方式：topleftrightbottom两种取值方式：一种取值为up,down,left,andright:fourdirectionsmargin:2px;/*定义元素的四边边框为2px*/margin:2px4px;/*定义元素的上下边框为2px,andtheleftandrightbordersas4px/margin:2px4px6px;/*定义元素的上边框为2px，左右边框为4px，下边框为6px,*/margin:2px4px6px8px;/*定义元素的上下边框为2px，右下边框为6px，左边框为8px*/margin:0auto;/*在浏览器中水平居中。*/说明：可以单独设置一个方向边界，如：margin-top:10px;*保证金值分析：左右边界累加，上下边界重合。*当子元素（block）直接写margin-top时，父元素会加上margin-top属性值，（不设置任何浮动和定位属性）border边框的使用方法：borderwidthborderstyleBordercolor;例如：border:5pxsolid#f00border：边框，网页中很多装饰线条都是通过边框来实现的。borderwidth:border-width:bordercolor:border-color:borderstyle:border-style:solid(实线)/dashed(虚线)dotted(虚线)double(双线)可以分别设置一个方向的边框，如：border-bottom：边框宽度边框样式边框颜色；bottomborderborder-left：边框宽度边框样式边框颜色；leftborderborder-right：边框宽度边框样式边框颜色；rightborderborder-top:borderwidthborderstylebordercolor;上边框框的实际尺寸1)框的实际尺寸：Width=左右边框+左右padding+width高度=上下边框+topandbottompadding+height50pxwidth=border*2+padding*2+content.width=20*2+1*2+10*2+200=262pxheight=border*2+padding*2+content.height=20*2+1*2+10*2+50=112px2)溢出属性溢出：visible/hidden（隐藏）/scroll/auto（自动）/inherit；visible：默认值，内容不会被裁剪，会出现在元素框外；hidden：内容会被裁剪掉，其余内容不可见；scroll：内容会被裁剪，但是浏览器会显示一个滚动条来查看剩余的内容；auto：如果内容被裁剪，浏览器会显示一个滚动条，以便查看其他内容；inherit：规定overflow属性的值应该从父元素继承。3)空白white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit该属性用于设置如何处理元素中的空白；normal：默认值，空格会被浏览器忽略，pre：空格会被浏览器保留，其行为类似于HTML中的pre标签；nowrap：文本不会换行，文本会在同一行继续，直到遇到
标签；pre-wrap：保留空白字符顺序，当文字超出边框时，会正常换行；pre-line：合并空白序列，但保留换行符；inherit：指定White-space属性的值应该从父元素继承；（即浏览器不支持该属性值）
