关闭

css 层级 脱标流 可见性

478人阅读 评论(0) 收藏 举报
分类:
<!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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:87889次
    • 积分:1797
    • 等级:
    • 排名:千里之外
    • 原创:101篇
    • 转载:30篇
    • 译文:2篇
    • 评论:4条
    最新评论