盒模型

display

块:1.独行显示 2.支持宽高,宽默认适应父级,高默认由子级或内容撑开 3.设置宽高后,一定采用设置的宽高
内联:1.同行显示 2.不支持宽高
内联块:1.同行显示,之间有间距 2.支持宽高,宽高由内容撑开 3.设置宽高后,一定采用设置的宽高,但只设置其中一个,另一个会根据内容等比缩放

	嵌套规则:
	块可以嵌套所有类型(p一般只允许嵌套内联)
	内联一般只嵌套内联
	内联块一般只作为最内层级
	div {
		/*块*/
		display: block;
		/*自适应父级可用content的宽度*/
		/* auto;*/
		/*默认0*/
		/*height: 0px;*/
	}
	span {
		/*内联*/
		display: inline;
		/*不支持宽高*/
	}
	img {
		/*内联块*/
		display: inline-block;
		 auto;
		height: auto;
	}

overflow

<!-- 显示区域只能由父级大小决定 -->
<!-- 在display:block背景下 -->
<style>
	/*子级会被父级覆盖*/
	.sup{
		 100px;
		height: 100px;
		/*默认border值*/
		/*border:3px none black;*/
		/*清除边框*/
		/*border: 0px;*/
		/*border: none;*/
		/*最简单的设置*/
		border: solid;
	}
	.sub{
		 200px;
		height: 200px;
		background-color: red;
	}
	/*对父级进行overflow设置*/
	.sup{
		/*允许以滚动的方式允许子级所有内容显示*/
		/*overflow: auto;*/
		/*overflow: scroll;*/
		/*只允许子级在父级所在区域的部分显示,超出的部分隐藏*/
		/*overflow: hidden;*/
	}
</style>

隐藏

<style>
	/*盒子间会相互影响*/
	div{
		 50px;
		height: 50px;
	}
	.d1{
		background-color: red;
		/*以背景颜色透明度隐藏,不需要掌握*/
		/*盒子还在,内容或子级标签均会被显示*/
		background-color: transparent;
	}
	.d2{
		background-color: green;
		/*以盒子的透明度隐藏:范围0~1;*/
		/*盒子真正意义上的透明,但盒子区域的位置还在*/
		opacity: 0;
	}
	.d3{
		background-color: #700;
		/*盒子从文档中移除,盒子的区域站位消失*/
		/*当盒子重新获得显示,该盒子依旧从消失位置显示*/
		display: none;
	}
	.d4{
		background-color: #999;
	}
	/*需求:通过悬浮body让d3
	重新显示*/
	/*1 明确控制的对象
	2 确定对该对象的修饰
	3 找出修饰与对象的关系*/
	body:hover .d3{
		display: block;
	}
</style>

margin

/前提 sup显示宽全屏 高200,sub显示区域宽高个100px/
/需求1:sup左上右定格显示/
html,body{
/body默认具有margin:8px/
margin: 0;
}
.sup{
auto;
height: 200px;
background-color: red;

	}
	.sub{
		 100px;
		height: 100px;
		background-color: green;
	}
	/*需求2:sub在sup的水平中央显示*/
	.sub{
		/*上下0,左右auto*/
		/*auto:左右auto,自适应(平方)剩余的可布局空间*/
		margin:0 auto; 
	}
	/*需求3:sub在sup的垂直中央显示*/
	/*垂直会遇到margin父子坑*/
	/*.sub{
		margin: auto;
	}*/
	.sup{
		height: 100px;
		padding: 50px 0;
	}
	/*需求4:sub在sup的水平居右显示*/
	.sub{
		margin-left: auto;
		margin-right: 0;			
	}
</style>

样式支持

.sup{
500px;
height: 500px;
background-color: red;
}
/水平居中/
/display对margin的支持/
/block支持所有marg布局/
/inline与inline-blok只支持上下布局/
.sub{
display: block;
margin: 0 auto;
}