首页 > 代码库 > Html 基础（一）盒模式
Html 基础（一）盒模式
现在开始细致学习HTML基础，把学习的记录一点一滴的记录下来，可能有问题欢迎拍砖
在学HTML的时候就听到一个著名的盒模式概念，这个概念遍布于现在的div+css设计，首先是一张很老的但是很经典的图
margin：外边距，margin: top right bottom left，分别决定模块的上下左右的外边距，通常以px（像素点）作为大小标示，也可以使用百分比进行标示
border: 边框，也有 top right bottom left 的区别， border大小的变化不会影响到内容区的大小变化
padding：内边距按照像素点多少的变化会改变整个模块的大小，但是模块的content区域的大小不会发生改变
来看一段代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Web测试</title> <style type="text/css"> .parent { border: 1px solid #e00000; width: 800px; height: 300px; background-color: #808080; z-index: 1; margin: auto; } .child { width: 200px; height: 200px; border: 1px solid #f00000; background-color: #00ff90; margin: 20px 30px auto 60px; } </style></head><body> <div class="parent"> <div class="child"> </div> </div></body></html>
这段代码创建了2个div，parent、child，
parent的属性设置为边框颜色为红色大小是1个像素点的实线，宽度为800px，高度为300px背景颜色为灰色，margin设置为auto自然居中显示
child的属性设置为边框颜色为红色大小是1个像素点的实线，宽度为200px，高度为200px背景颜色为绿色，外边距top为20px，left为30px（相对于parent模块的外边距后面会结合position属性来详细介绍margin）
在这个基础上我们可以对定义的parent和child的border、padding的参数值进行设置和变化，可以体会到这3个属性对html元素的影响
Html 基础（一）盒模式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。