盒子模型、层模型

盒子模型

margin 外边距、 border 边框、 padding 内边距、 content 内容

padding:100px;                    /*一个值代表四个方向*/
padding:100px 150px 200px 250px;  /*四个值分别是上、左、右、下*/
padding:100px 150px 200px;        /*三个值分别是上、左右、下*/
padding:100px 150px;              /*两个值分别是上下、左右*/

border、margin的值同样是这样。

计算问题

计算可视的真实宽高。

注：margin是看不到的区域，所以不能算在里面。

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

width:302

height:102

层模型

定位

1. absolute 脱离原来位置进行定位

相对于最近的有定位的父级进行定位，如果没有，那么相对于文档定位。

position:absolute;
left:;
top:;
/*right和bottom也可以设置*/

当一个元素成为定位元素，它就脱离原来的层，所以在原来的层面上它的那一块真空了，其他的元素就可以出现在这里。

.demo{
	position:absolute;
	width:100px;
	height:100px;
	background-color:red;
	opacity: 0.5;
}
.box{
	width:150px;
	height:150px;
	background-color:green;
}

2. relative 保留原来位置进行定位

相对自己原来的位置进行定位。

position:relative;
left:;
top:;

同样可以重叠，但它原来所在的位置不能让其他元素出现。

.demo{
	position:relative;
	left:100px;
	top:100px;
	width:100px;
	height:100px;
	background-color:red;
	opacity: 0.5;
}
.box{
	width:150px;
	height:150px;
	background-color:green;
}

3. fixed

无论滚动条怎么移动，都不会动。

position:fixed;
left:;
top:;

相对于可视窗口居中

div{
	position:fixed;
	left:50%;
	top:50%;
	width:100px;
	height:100px;
	background-color:red;
	margin-left:-50px;
	margin-top:-50px;
}