CSS（6）定位拓展/css常用单位

一、定位

表示盒子位置偏移。
1 是否脱标
2 相对于谁进行偏移
1.1 相对定位
水平：left right
垂直： top bottom水平和垂直二选一

1	position: relative;

相对定位的元素没有脱离标准文档流，保留了原位置。
新位置相对于原位置进行偏移。

应用：

1 进行位置微调
1	.box p span {
2		font-size: 12px;
3		/*位置微调*/
4		position: relative;
5		top: -10px;
6		left: 3px; 
7	} 

2 相对定位作为绝对定位的参考盒子。（子绝父相）

1.2 绝对定位
绝对定位脱离标准文档流。原位置不保留
不针对祖先定位参考
有top参与，参考的是页面的左上/右上角。
有bottom参与，参考的是首屏左下/右下角。

针对祖先定位参考
结论：距离最近（html结构）且有定位的祖先元素。

1.3 绝对定位参考顶点
参考的是border以内的四个顶点，无视参考祖先的padding

1	.box {
2		width: 300px;
3		height: 300px;
4		padding: 50px;
5		border: 20px solid #000;
6		margin: 50px auto;
7		/*绝对定位参考盒子*/
8		position: relative;
9	}
10	.box .son {
11		width: 100px;
12		height: 100px;
13		background-color: lightblue;
14		/*绝对定位必须书写位置偏移 不然会受原位置的影响*/
15		position: absolute;
16		left: 50px;
17		top: 50px;	}

1.4 压盖效果
同级元素实现压盖效果使用定位。

1	.box {
2		width: 300px;
3		height: 300px;
4		padding: 50px;
5		border: 1px solid #000;
6		margin: 50px auto;
7		/*距离最近且有定位的祖先祖先祖先*/
8		position: relative;
9	}
10	.box .son1 {
11		height: 200px;
12		background-color: lightblue;
13	}
14	.box .son2 {
15		/*绝对定位不设置宽高是内容撑开*/
16		width: 100px;
17		height: 100px;
18		background-color: orange;
19		position: absolute;   //son2压盖son1  son2设置绝对定位
20		left: 50px;
21		top: 100px;	}

1.5 绝对定位水平居中
绝对定位的元素水平居中： margin: 0 auto失效
1 left: 50%;(绝对定位盒子左侧居中)

2 margin-left: -（盒子自身实际宽度的一半）

1	.box .son2 {
2		/*绝对定位不设置宽高是内容撑开*/
3		width: 100px;
4		height: 100px;
5		background-color: orange;
6		padding: 50px;
7		border: 10px solid red;
8		top: 100px;
9		position: absolute;
10		/*left相对于参考元素位置进行偏移*/
11		left: 50%;
12		/*mgl 向左偏移50px  自身实际宽度一半*/
13		margin-left: -110px;
14		15	}

绝对定位垂直居中：
方式一：

1	.box .son3 {
2		width: 100px;
3		height: 50px;
4		padding: 50px;
5		border: 10px solid red;
6		position: absolute;
7		left: 100px;
8		/*参考元素border以内高度一半*/
9		top: 50%;
10		/*向上移动自身实际高度的一半*/
11		margin-top: -85px;12	}
 

方式二：

 .box {
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            
        }

1.6 应用
相对定位作为绝对定位参考盒子。（子绝父相，子绝父绝，子绝父固）
相对定位位置比较固定，作为绝对定位参考盒子。

1.7 固定定位

1 position: fixed;
1 固定定位的元素脱离标准文档流
2 固定定位的元素相对浏览器四个顶点偏移

1.8 z-index
默认压盖顺序：
有定位的元素压盖住没有定位的元素。
都有定位后面的压盖住前面的。

z-index: 自定义压盖顺序
1 有定位的元素才可以使用z-index(浮动元素不能使用z-index)
2 属性值是数字，数字越大压盖顺序越靠上
3 z-index数值相同，后面的压盖住前面的
4 父子盒都有z-index，父盒子z-index小，子盒子z-index即使再大也没用

1	<div class="big">   //z-index: 3
2		<p class="big-son">big</p>//z-index: 44
3	</div>
4	<div class="small"> //z-index: 4
5		<p class="sma-son">small</p> //z-index: 33
6	</div>

二、css常用单位

2.1 em
相对单位，相对于父盒子字号比值。属性值是数字可以带有小数点

1	p {
2		/*父盒子12px * 2 = 24px*/
3		font-size: 2em;
4	}
5	span {
6		/*p字号是继承 12px  相对于父盒子字号12 * 2 = 24px的比值*/
7		/*font-size: 2em;*/
8	
9		/*span如果不设置字号从p继承2em继承的是计算后的数值*/10	}

2.2 rem
相对单位，相对于根元素(html)字号的比值和父盒子没有任何关系。属性值是数字可以带有小数点

1	html {
2		font-size: 20px;
3	}
4	body {
5		font-family: "Arial","Microsoft Yahei";
6		font-size: 12px;
7	}
8	.box {
9		/*rem 相对于根元素html比值 20 * 2 = 40px*/
10		font-size: 2rem;	}

px
像素，是屏幕上显示数据的最基本的点。用于网页设计，直观方便，相对单位
像素是相对于显示器屏幕分辨率而言的。
　　譬如，windows的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
pt是印刷行业常用单位，1pt = 1/72英寸。绝对单位
pc：派卡,绝对单位，
In:英寸，绝对单位
Mm:绝对单位，毫米
Cm:绝对单位，厘米
1in = 2.54cm = 25.4 mm = 72pt = 6pc

三、hack

hacker黑客
因为浏览器的兼容性问题，我们针对不同的浏览器书写不同html或者css代码，以便达到不同浏览器查看效果相同。
html hack 和css hack
3.1 html hack
IE浏览器兼容有很大问题，给我们提供了很多端口，书写hack。

1	<!--[if lte IE 9]>
2	内容部分
3	<![endif]-->

针对不同的浏览器在同一个html文件里，去写不同的html结构。
IE浏览器有很多兼容性问题，给我们提供了一些接口。
表示Hack符里面的内容只在IE9及以下的浏览器内显示，IE10及以上或者高级浏览器会认为这是注释。
if是如果，lte是less than or equal，小于或者等于，IE浏览器，9代表版本。
lte : less than or equal , 表示小于或等于。
lt : less than , 表示小于。
gt : greater than , 表示大于。
gte:表示大于或者等于

1	<!--[if lt IE 8]>
2			<h3>您的浏览器版本过低，请更新浏览器！</h3>
3	<![endif]-->
4	<div class="box">文字</div>

html hack：表示小于IE8版本的浏览器可以显示h3标签，大于等于IE8版本的浏览器或者高级浏览器都不显示，认为你这是注释。

1	<!--[if gt IE 8]>
2			<h3>只有IE8以上版本的IE低版本浏览器可以显示，高级浏览器或者IE高版本都认为是注释</h3>
3	<![endif]-->
4	<div class="box">文字</div>

gt:表示大于IE的低版本浏览器可以显示，小于或者其他高级浏览器仍然不显示，认为是注释。

应用：可以针对低版本浏览器书写特定的代码。
针对某一个特定的 IE版本有特殊写法：

5	<!--[if IE 6]>
6			<h3>只有IE6浏览器可以显示，高级浏览器或者IE高版本都认为是注释</h3>
7	<![endif]-->1	

只给IE6浏览器加js 代码，

8	<!--[if IE 6]>
9	     <script src=”js/png.js”></script>
10	<![endif]-->1	

3.2 css hack
css hack ：值的hack 和选择器hack
3.2.1css值的hack

/* IE 6 */ 
	.selector { _color: blue; }    
	.selector { -color: blue; } 

Hack符**：-、_**
在属性名的前面加下划线或横线。
表示这个属性只有IE6认识，其他的都不认识这个属性。

1	.box{
2		width: 200px;
3		height: 200px;
4		background: orange;
5		color:#000;
6		-color:#fff;      //只有IE6显示文字颜色为白色。7	}
 

/* IE 6/7 */
Hack符：! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
表示这个属性只有IE6/7认识，其他的都不认识这个属性。

/* IE 8/9 */ 
	.selector { color: blue\0/; } 

Hack符：\0/。
需要写在属性值的后面。
只在IE8、9里认识。

/* IE 6/7/8/9/10 */ 
	.selector { color: blue\9; }

Hack符：\9.
需要写在属性值的后面，分号前。

3.2.2 css选择器hack

/* IE 6 and below */ 
	* html .selector  {}   
这种选择器只在IE6里加载，其他的浏览器认为你的选择器是错的。
高级浏览器认为html已经是根标签，*不是他的祖先元素。
1	* html .box{
2		width: 200px;
3		height: 200px;
4		background: orange;
5		color:#000;
6	}7	

/* IE 7 and below */
.selector, {}
这种选择器只在IE7及以下版本里加载，其他的浏览器认为你的选择器是错的。

1	.box,{
2		width: 200px;
3		height: 200px;
4		background: orange;
5		color:#000;6	}

/* 除了IE 6 */
html > body .selector {}

子级选择器：只选择儿子级，后代其他级别不选。
IE6不认识子级选择器。
除了IE6都能正常加载。

1	html > body .box{
2		width: 200px;
3		height: 200px;
4		background: orange;
5		color:#000;6	}

四、IE6的兼容

4.1 选择器的兼容
IE6不兼容交集选择器里的类选择器连写（权重，可以渲染）。
div.box 可以兼容
div.box.cl 不兼容（注意）
解决办法：
使用标签和一个类的交集。
其他的7种选择器完美的兼容：
标签、id、类、交集（div.box）、后代、并集、通配符

1	div.box.cl{
2		width: 200px;
3		height: 200px;
4		background: orange;
5	}
6	div.box {
7		background-color: red;   
8	}
9	//高级浏览器中.box.cl权重比.box高渲染为橘色
10	//IE6中.box 和.box.cl权重相同，css书写后面的层叠掉前面的颜色渲染为红色。

4.2 盒模型的兼容
4.2.1如果不写DTD，IE6里的盒子是内减的，其他浏览器是外扩。
解决方法：
必须写DTD。

4.2.2如果盒子高度小于默认字号，不会正常显示。高度会是默认的字号。
解决方法：
单独给IE6浏览器，强制给个很小的字号。

1	.box{
2		width: 200px;
3		height:3px;
4		background: orange;
5		-font-size:3px;6	}

4.3 浮动的兼容
4.3.1 不浮动的盒子不会钻到底下

情况：一个盒子浮动，一个盒子不浮动，在IE6里，不浮动的盒子不会钻到浮动盒子的下面占领它原来的标准流位置。
解决办法：制作压盖效果用定位。同一级的盒子要浮动都浮动，要不浮动都不浮动。
4.3.2 3px bug
情况：一个浮动，一个不浮动，IE6里两个盒子之间会出现3px的间距。
解决方法：（不允许这么写）。
必须解决：给左边的浮动盒子加一个-3px的右margin。
只给IE6浏览器加，注意Hack符。

1	.box1{
2		width: 200px;
3		height: 200px;
4		background: pink;
5		-margin-right:-3px;   //且只有ie6认识。6	}

4.3.3 双倍margin问题
情况：一些元素浮动，有一个与浮动方向相同的方向的margin，第一个元素会出现双倍边距的问题。

1	.box p{
2		float: left;
3		margin-left:10px;
4		width: 100px;
5		height: 100px;
6		background: pink;7	}

解决办法：①用父亲的padding去挤

1	.box{
2		width: 590px;
3		height: 100px;
4		border:1px solid #ddd;
5		margin:100px auto;
6		padding-left:10px;
7	}
8	.box p.first{
9		margin-left: 0;10	}

②给第一个浮动的元素margin减半(只有IE6添加)

1	.box p.first{
2		-margin-left: 5px;3	}