《HTML盒子模型》课件.pptVIP

**************盒子模型定义网页布局的基石HTML盒子模型是网页布局的基础，将每个元素视为一个矩形盒子，并通过控制盒子的尺寸和位置来实现网页排版。CSS属性的控制CSS属性，如`margin`、`padding`、`border`和`width`，共同作用于盒子模型，塑造网页的视觉效果。盒子模型组成内容区(Content)盒子模型最内层，用于存放元素的实际内容，如文字、图片等。内边距(Padding)内容区与边框之间的空白区域，用于控制内容与边框的距离。边框(Border)围绕内容区和内边距的线，用于区分不同的盒子。外边距(Margin)盒子之间相互间隔的空白区域，用于控制盒子之间的距离。块级元素与盒子模型1块级元素独占一行，宽度默认100%2盒子模型应用高度、宽度、边距、内边距3视觉效果独立显示，布局整齐内联元素与盒子模型1宽度根据内容宽度自动调整2高度根据内容高度自动调整3外边距水平方向影响元素间距4内边距垂直方向影响文字间距外边距margin1间隔元素之间的间距2控制元素位置和布局3属性margin-top,margin-right,margin-bottom,margin-left内边距padding定义内边距（padding）是内容与边框之间的距离，用于控制内容与边框之间的空白区域。属性padding-top:设置上内边距padding-right:设置右内边距padding-bottom:设置下内边距padding-left:设置左内边距padding:设置所有方向的内边距，例如padding:10px;边框border属性描述border-width边框宽度border-style边框样式border-color边框颜色盒子尺寸计算总宽度总宽度=内容宽度+内边距+边框宽度+外边距总高度总高度=内容高度+内边距+边框宽度+外边距Width与content-box1默认值默认情况下，width属性指的是内容区域（content）的宽度。2计算方式width=content+padding+border3注意事项使用content-box模式时，需要手动计算padding和border的宽度，以保证最终元素的实际宽度。Width与border-boxborder-box模式在border-box模式下，元素的宽度包含内容、内边距和边框的宽度，但不包括外边距。使用box-sizing:border-box属性设置元素的盒子模型模式。示例代码style.box{width:200px;padding:20px;border:10pxsolid#ccc;box-sizing:border-box;}/styledivclass=box内容/div在这种情况下，盒子宽度是200px，包括了20px的内边距和10px的边框。高度height的设置1auto根据内容自动调整高度2px以像素为单位设置高度3em以父元素字体大小为单位设置高度4rem以根元素字体大小为单位设置高度水平居中1text-align:center文本水平居中2margin:auto块级元素水平居中3display:flexflex布局水平居中垂直居中1margin:auto;设置元素的左右外边距为自动，并将其放在父元素的水平中心。这种方法适用于块级元素，但可能无法在所有浏览器中正常工作。2display:flex;使用flexbox布局模型，并将元素的align-items属性设置为center。此方法适用于块级元素和内联元素。3position:absolute;将元素设置为绝对定位，并使用top和bottom属性将元素放置在父元素的中心位置。此方法适用于块级元素和内联元素。文档流元素在页面中排列的顺序，决定元素的位置默认情况下，元素按照代码顺序排列正常文档流默认布局所有元素默认情况下按照其在HTML代码中的顺序排列。块级元素块级元素占据一整行，会自动换行。内联元素内联元素不会换行，会和周围元素并排排列。浮动float元素脱离文档流浮动元素会脱离标准文档流，使其不再占据正常空间.环绕文本内容文本内容会环绕浮动元素，形成类似于文字环