前端盒子模型详解目录一、盒子模型概述盒子模型是CSS布局的核心概念描述了HTML元素在页面中的呈现方式。每个元素被视为一个矩形盒子二、盒子模型的构成内容区Content显示文本、图像等实际内容尺寸由width和height属性控制。例如设置width: 300px; height: 200px;定义内容区域大小。内边距Padding内容与边框之间的透明区域通过padding属性设置。示例padding: 20px;表示四个方向均为$20px$。边框Border包裹内边距和内容的边界线通过border属性控制样式、宽度和颜色。例如border: 2px solid #000;定义$2px$宽的黑色实线边框。外边距Margin盒子与其他元素之间的透明间隔通过margin属性调整。示例margin: 10px auto;设置上下$10px$边距左右自动居中目录前端盒子模型详解目录一、盒子模型概述二、盒子模型的构成三、盒子模型的作用三、盒子模型的作用布局控制盒子模型定义了元素在页面中的占位规则通过调整各部分尺寸控制元素的实际显示大小和间距。元素定位通过外边距margin实现元素间的相对位置调整内边距padding控制内容与边框的距离边框border则明确元素的边界范围。视觉层次通过调整内边距和边框增强可读性如按钮的点击区域利用外边距避免元素堆叠提升页面可操作性。接下来小白来实操一下title盒子属性的练习/title style body { margin: 0; padding: 20px; font-family: 微软雅黑, sans-serif; } .box-bold { background-color: gray; color: black; font-weight: bold; border: 2px solid green; padding: 5px; width: 350px; margin-bottom: 30px; } .box-underline { background-color: #8888cc; color: blue; text-decoration: underline; border: 2px solid blue; padding: 5px; width: 350px; margin-bottom: 50px; } .img-container { display: inline-block; background-color: gray; border: 3px solid red; border-radius: 20px; padding: 15px; margin-right: 30px; vertical-align: middle; } .img-container img { display: block; background-color: white; } .size-s { width: 80px; height: 80px; } .size-m { width: 150x; height: 160px; } .size-i{ width: 200x; height: 180px; } /style /head body div classbox-bold 这个课堂练习禁止使用br和hr标签:加粗文本 /div div classbox-underline 这个课堂练习禁止使用br和hr标签:下划线文本 /div div classimg-container img srcJennie.jpg altclasssize-s /div div classimg-container img srcJennie.jpg altclasssize-m /div div classimg-container img srcJennie.jpg altclasssize-i /div /body这是盒子模型的实操代码希望大家跟着小白一起学习
