Html 基础（一）盒模式

浏览数：17 / 时间：2015年06月09日

现在开始细致学习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>