网页布局基石----盒子模型

目录一盒模型的构成二盒模型的核心属性三标准盒子模型代码实例CSS控制网页样式是通过盒子模型去实现的日常中我们所看到的网页上所以标签都可以视为一个盒子。所以网页都是放在盒子里面的。因此我们首先要对盒子模型有所了解。接下来我将通过一篇文章带你进一步掌握盒子模型的核心知识点。一盒模型的构成盒子模型由4个部分组成。它们分别是1.内容Content是盒子的最核心部分用于显示文本、图像或其他媒体内容。2.内边距padding围绕在内容区域周围的透明区域。它用于在内容和边框之间创造空间使内容不会紧贴边框。3.边框Border位于内边距外侧的线条作为盒子的边界。4.外边距margin盒子模型的最外层是边框之外的透明区域。它的作用是控制当前元素与其他相邻元素之间的距离。二盒模型的核心属性2.1内容区域相关属性width属性设置内容的宽度。height属性设置内容的高度。在盒子模型中width和height属性仅指内容区的宽高不包含内边距和边框。2.2内边距相关属性padding属性可以一次性设置上、右、下、左的内边距。padding-top上padding-right右padding-bottom下padding-left左在 盒子模型中padding、border和margin都是有4个方向的。4个方向的顺序分别是上、右、下、左。2.3边框相关属性定义属性值边框样式属性border-style定义页面中边框的风格。eg solid 实线, dashed 虚线, dotted 点线, double双实线边框宽度属性border-width设置边框的宽度。边框颜色属性border-color设置边框的颜色。圆角属性用于设置边框的圆角效果。border-radius2.4外边距的相关属性padding-top上padding-right右padding-bottom下padding-left左三标准盒子模型代码实例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代码效果图如下以上涉及到了img标签这个的知识点可以去看我的第二篇文章https://blog.csdn.net/zhong_728h/article/details/159509508?spm1001.2014.3001.5502在盒子模型图片标签要注意以下几点图片默认是inline(行内)元素。padding会影响图片位置。border会增加盒子实际大小。margin不会影响盒子自身大小只影响外部。图片尺寸不要“撑破盒子”。max—width的最大值不要超过100%不然图片下面会多出空白。盒子模型看似简单但在复杂的页面布局中往往会遇到各种“塌陷”或“溢出”的惊喜。从content到border每一个属性的细微变化都会直接影响到页面的最终呈现。真正掌握盒子模型意味着你不再只是机械地书写样式而是能够像搭积木一样精准地掌控页面上每一个元素的尺寸与间距。希望这篇文章能帮你彻底打通这一核心概念让你在后续的布局实战中更胜一筹。