本节介绍css盒模型，盒模型的组成、展开、折叠问题的解决方法什么是盒模型盒模型的组成盒模型的展开与折叠以及解决方案任何元素都可以生成盒子模型，而一个元素生成什么样的盒子模型也取决于该元素的display属性，包括描述盒子位置和大小的五个属性。2、盒模型的组成盒模型由width、height、padding、border、margin组成。盒模型写入元素内容的区域为：width+height=content。value)+margin(allvalues)盒模型图：width的应用：当元素为块级元素时，如果不设置width属性值，会自动填充父元素的width区域，即是，显示：块，如
标签。当元素为行级标签，即display:inline时，宽度被内部内容扩展，如的应用padding:作用：设置元素内部宽高区域的距离border,feature：可以加载背景，帮助你写嵌套内容属性值：一般为px，padding-left，padding-right，padding-top，padding-bottom代码演示：点击试试。p1{填充：10px;*/}.p2{padding:10px20px;/*上下10px，左右20px*/}.p3{padding:10px20px10px;/*上10px，左右20px，下10px*/}。p4{padding:10px20px30px40px;/*top10px,right20px,bottom30px,left40px,clockwisedirection*/}borderapplication:function:设置box模型的border，作为实体化的最外层属性值box：由borderwidth，Bordershape和bordercolor组成写法：通常没有固定的写法，一般border：width+shape+color；bordershape:none默认值,solid实线,dashed虚线代码演示:点击试试.p1{border:1pxsolidpink;/*solidline*/}.p2{border:1pxdashedpink;/*dashedline*/}marginapplication:function:setthedistanceboxesunitcodedemo:clicktotry.p1{margin:10px;/*内边距四周为10px*/}.p2{margin:10px20px;/*上和下10px，左右20px*/}.p3{margin:10px20px10px;/*上10px，左右20px，下10px*/}.p4{margin:10px20px30px40px;/*上10px，右20px,bottom30px,left40px,alongtheclockdirection*/}3.盒模型扩展和清除默认样式height应用居中父子盒模型清除默认样式的应用：清除默认样式，浏览器将加载默认样式，会影响布局，项目一定要清除默认样式，大部分默认标签会默认到侧边距，使用标签选择器（大项目）或通配符（小项目ects）清除代码演示：清除默认边距：点击试试body,div,p{保证金:0;填充：0；/*标签选择器，用于大项目*/}*{margin:0;填充：0；/*用于小件*/}清除默认的
- 列表前缀：点击试试ul,ol{list-style:none;}清除标签默认下划线：点击试试a{text-decoration:none;}清除label默认粗体：点击试试如果盒子的高度确定了，那么同层的元素就会在这个固定的高度并排加载。如果高度超过框的固定高度，如果不设置高度，内部高度将由内容决定。框的高度固定，内容溢出的解决方法，使用overflow属性解决属性值visble默认值的效果，溢出部分显示隐藏溢出部分不显示滚动溢出部分出现滚动条，滚动查看溢出部分auto没有溢出，显示正常，出现溢出滚动条代码演示：点击try.p1{overflow:visible;}.p2{overflow:hidden;}.p3{overflow:scroll;}.p4{overflow:auto;}不设置高度，框的高度自动适应内容的高度代码演示：点击试试div{width:400px;margin:0auto;box-shadow:005px10px粉色；/*父元素*/}p{heigth:300px;/*子元素*/}居中应用：水平居中：text-algin属性，文本类型垂直居中：利用text-algin和line-height属性的值与内容高度一致，实现垂直居中。元素水平居中：使用定位、margin属性+padding属性、弹性布局等。代码演示：centertext:clicktotry.p1{text-algin:center;heigth:20px;line-height:20px;}.p2{display:table-cell;垂直对齐：中间；文本对齐：居中；}元素水平居中：点击try.p1{margin:0auto;padding:20px0;}父子盒模型一般情况下，父元素的宽度>所有子元素的width+padding+borde+margin，如果超过会溢出父元素解决方法：手动计算width子元素；或者当只有一个子元素且子元素是块级元素时，可以让子元素不设置width4.margin塌陷，解决边距塌陷：在两个元素的外边距重叠，而外边浏览器加载的边距不是两个间距的总和，而是两个边距中较大的值，而较小的值会折叠成较大的值。解决方法：如果两个同级元素崩溃时，只给其中一个元素设置margin值即可。使用bfc渲染区域，可以在不影响外部元素的情况下解决一个独立的渲染区域。触发条件bfc使用overflow：hidden，float：left/right，position：absolute/fixed，display：inline-block代码演示：点击试试div{width:400px;高度：400px；盒子阴影：005px10px粉色；保证金：0自动；overflow:hidden;/*unlessbfccondition*/}p{width:200px;;/*p是div的子元素*/height:200px;框阴影：005px10px红色；保证金：25%；/*崩溃发生*/}