Web前端开发实战教程课件 模块四 盒模型与弹性布局.pptxVIP

盒模型与弹性布局

课件目录01盒模型基础知识02盒模型浮动03盒模型内容04盒模型嵌套05盒模型定位06弹性布局

盒模型基础知识盒模型简介盒模型（也可称为盒子模型）是CSS中的一个重要概念，理解了盒模型，才能更好地排版布局。盒模型具有外边距（margin）、边框（border）、内间距（padding）、内容（content）4个属性。每个属性都包括上、下、左、右4个部分，这4个部分可同时设置，也可分别设置。其中，内间距可以理解为盒子中装的东西到边框的距离，而边框有厚薄和颜色之分，内容就是盒子中装的东西，外边距就是边框外面自动留出的一段空白距离。

盒模型基础知识盒模型属性利用margin、padding和border这3个属性（它们都是组合属性），可以用以下几种方式为盒模型设置上下左右的距离和宽度。1．使用组合属性（1）如margin:10px20px15px25px，对应的顺序为上边距、右边距、下边距、左边距，即盒模型顺时针方向4条边的边距。如果记不住这个组合属性的顺序，则可以使用单独属性。（2）如padding:10px20px15px25px，对应的顺序为上间距、右间距、下间距、左间距。（3）如border-width:10px20px15px25px，对应的顺序与上述顺序相同。（4）如margin:10pxauto，表示上下边距为10像素，左右边距为自