盒子模型和层模型

盒子模型和层模型

需要注意：

• 盒子是由三部分组成的，即：盒子壁【border】+内边距【padding】+内容区【content=width+height】

• 而盒模型是由四部分组成的，即：外边距【margin】+盒子壁【border】+内边距【padding】+内容区【content=width+height】

• 我们平时设置的height和width是盒模型中的内容区部分！padding内边距区是不允许放内容的，内容是放在内容区的！

<div class="wrapper">
    <div class="box">
        <div class="content">
            <div class="content1"></div>
        </div>
    </div>
</div>

/*
盒子三大组成部分

盒子壁 border
内边距 padding
盒子内容 content(width + height);

外边距 margin
*/
/*div{  			 160*160
	width: 100px;
	height: 100px;
	background-color: red;
	border: 10px solid black;
	padding: 10px 20px 30px;
	margin: 10px 20px;
}*/

/*body{				102*102
	margin: 0;  一般编程body外边距有8px
}

#my-defined{
	width: 100px;
	height: 100px;
	padding: 0 100px;
	margin: 10px 20px 30px 40px;
	border: 1px solid orange;
	background-color: orange;
	padding: 0;
}*/

.content1{
	width: 10px;
	height: 10px;
	background-color: #fff;
}

.content{
	width: 10px;
	height: 10px;
	background-color: #0f0;
	padding: 10px;
}

.box{
	width: 30px;
	height: 30px;
	background-color: #fff;
	padding: 10px;
}

.wrapper{
	width: 50px;
	height: 50px;
	background-color: #0f0;
	padding: 10px;
}