一、定位
表示盒子位置偏移。
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 }