css 层级脱标流可见性_css 脱标图片层级问题-CSDN博客

本文链接：https://blog.csdn.net/u011301203/article/details/52349029

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*
		 
		 * 脱标的盒子居中显示（重点）
		 * 		1 首先走父盒子宽度一半
		 * 		2 使用margin-left设置往回走子元素自己宽度的一半
		 * 				position: absolute;
		 *				left: 50%;
		 * 				margin-left: -250px;
		 * Z-index(层级)
		 * 		1 元素与元素之间的层级关系
		 * 		2 在css2中，只有定位的元素才有z-index
		 * 		3 默认情况下，定位的元素z-index的值auto (0)
		 * 			Z-index可以取正数还可以取负数。 
		 * 		特点:
		 * 			1 如果两个元素都设置了定位，那么后面定位的元素会覆盖前面定位的元素（后来居上）
		 * 			2 如果想让一个盒子压另一个盒子，可以设置z-index值。
		 * 			3 如果元素的父元素设置了z-index值，那么程序会以父元素的z-index值为准
		 * 
		 * CSS标签包含规范
		 * 		1 段落标签不能包含div
		 * 		2 段落标签不能包含标题标签
		 * 		3 段落标签不能包含列表
		 * 		注意：
		 * 			1 行内元素最好不要包含其他元素（行内元素包含块级元素）
		 * 			2 行内元素可以包含行内元素
		 * 
		 * 规避脱标流：
		 * 		1 要实现元素的模式转换（display）
		 * 		2 如果想让一个元素在最右侧显示
		 * 		3 margin-left: auto；让元素左侧自适应（让元素左侧自动填满）
		 * 		4 网页布局：
		 * 				优先   	标准流
		 * 				其次   	浮动
		 * 				最后		定位
		 * 
		 * img/img4垂直对齐
		 * 		vertical-align: baseline 只对img/img4和表格起作用
		 * 		vertical-align: middle;  垂直居中对齐
		 * 
		 * css可见性
		 * 		overflow：hidden；  	超出的部分隐藏  
		 * 		visibility：hidden； 元素隐藏  该属性隐藏元素后，元素占位置
		 * 		display：none: ;		元素隐藏 隐藏元素不占位置
		 * 		display: block;     显示元素
		 * 
		 * Logo优化内容移除
		 * 		text-indent：-20em；	
		 * 
		 * */
		
		#div{
			width: 500px;
			height: 500px;
			background-color: green;
			/*overflow: hidden;*/
			/*visibility: hidden;*/
			/*display:none;
			display: block;   */
			/*vertical-align: middle;*/
			vertical-align: middle;
			margin-left: auto;
		}
		P{
			/*visibility: hidden;*/
		}
		#div1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.f{
			vertical-align: middle;
		}
		</style>
	</head>
	<body>
		
		<div id="div">
			<img class="f" src="img/img2/1.jpg"  width="100" height="100px"/>
			<img class="f" src="img/img2/1.jpg"  width="100" height="100px"/>
			<img class="f" src="img/img2/1.jpg"  width="100" height="100px"/>
		</div>
		<!--<div id="div1">
			
		</div>-->
	</body>
</html>