css 层级 脱标流 可见性

原创 2016年08月28日 23:38:08
<!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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS z-index 属性 控制div上下层次

CSS,z-index,div层次
  • jackpk
  • jackpk
  • 2010年10月20日 09:35
  • 37482

脱标流下的css定位 及其引发的思考总结

脱标流 在脱标流中,优先使用浮动,再使用绝对相对定位 浮动 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。 浮动会脱离文档 脱离文档,也就是说浮动不会影响普...

深入理解CSS元素可见性visibility及应用场景

前面的话   visibility属性常见于与display属性的比较中。但实际上,该属性有自己的一些有趣的用途。本文就visibility属性做详细整理和说明   定义 visibility...

CSS-display(显示)与visibility(可见性)

display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是这两种方法会产生不同...

CSS Display(显示) 与 Visibility(可见性)

1、隐藏元素 - display:none或visibility:hidden   隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是...

CSS z-index 属性的使用方法和层级树的概念

CSS z-index 属性的使用方法和层级树的概念 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-in...
  • yh0503
  • yh0503
  • 2014年07月09日 14:58
  • 398

CSS z-index 属性的使用方法和层级树的概念

中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 ...

CSS z-index 属性的使用方法和层级树的概念

CSS z-index 属性的使用方法和层级树的概念 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index...

CSS z-index 属性的使用方法和层级树的概念

原文 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对...
  • dl429
  • dl429
  • 2014年11月06日 10:41
  • 209

CSS z-index 属性的使用方法和层级树的概念

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 层级 脱标流 可见性
举报原因:
原因补充:

(最多只允许输入30个字)