CSS 全自动精准定位 的运用

日期:2021-03-14 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

在应用css建立相近title特性提醒框,普遍的方式是应用肯定精准定位,用负值使其偏位于显示屏以外,在电脑鼠标历经时界定1个适合的恰逢使其显示信息到大家所必须的部位。可是,有1个大家不常见的特性大家经常将其闲置1旁而未加运用--”auto”。《Auto Positioning for Absolute Elements 》这篇文章内容详尽详细介绍了该特性的应用方式,自己曾汉语翻译了此文--《肯定精准定位元素的全自动精准定位》,但文章内容过长,不甚直观,本文根据比照两种建立提醒框的方式来详细介绍该特性的应用方式。
1、基本方式
看下面的html結果,大家让.test相对性精准定位,明确其內部span标识的定为基点,在电脑鼠标历经时,界定span标识的left为0。
1.<div class="box">普遍的完成信息提醒框的方式,是让父元素相对性精准定位,信息內容肯定精准定位。默认设置情况让其掩藏于显示屏以外,电脑鼠标历经时界定1个恰逢使其显示信息在大家必须的部位。看看这个<a class="test" href="#">信息提醒框<span>电脑鼠标历经时我会出現</span></a>。你能够看到,电脑鼠标历经时,信息框会出現在电脑鼠标的部位。</div>

拷贝编码
编码以下:

.test{
   position:relative;
   display:inline-block;//使其在IE8中一切正常显示信息; color:#fff;
}
.test span{
   position:absolute;
   top:15px;
   left:⑼99em;
   border:1px soid #6c3;
   background-color:#F60;
}
.test:hover{
   background:#fff;/修补IE中的bug,这里是以便检测,假如不必须色调,可使用1张1×1px尺寸的全透明照片来替代。/
   color:#00f;
}
.test:hover span{
   left:0;
}

留意在电脑鼠标历经时,大家界定了情况色调,这时候以便修补 IE中独有的bug,有关bug这里不做太多叙述,读者可参照有关材料。普遍的方式在IE6、IE7中工作中优良,但在IE8中看起来很怪异,假如给.test界定1个display:inline-block特性,它将显示信息优良。IE6与IE7、IE8、FF、chrome显示信息略有不一样,IE6中span标识里的內容全自动拓展,而在IE7、IE8、FF、chrome中,其宽度与文字“信息提醒框”等宽,超出的换行显示信息。
2、应用“全自动精准定位”
应用“全自动精准定位”,针对.test大家不必须应用精准定位特性,针对其內部标识span,去掉top特性,保存left特性,在电脑鼠标历经时,让span标识的left特性为auto。这看起来不能思议,但确实工作中优良。span标识肯定精准定位后,它保存了在文字流中的一切正常部位,它是它在1个新的层上。css以下:

拷贝编码
编码以下:

.test-auto{
   color:#fff;
}
.test-auto span{
   position:absolute;
   left:⑼99em;
   border:1px soid #6c3;
   background-color:#F60;
   text-decoration:none;
}
.test-auto:hover{
   background:#fff;
   color:#00f;
}
.test-auto:hover span{
   left:auto;
}

如今,应用全自动精准定位能够完成弹出信息提醒框。可是,除上面提及的那个bug外,也有几个bug必须留意。
span标识界定display:block时,在FF和IE下显示信息有区别。
当大家给.test-auto span提升display:block时。你能够看到,电脑鼠标历经时,在FF中信息框另起1行(这是应用该特性一切正常的实际效果)。但在IE6、IE7中查询,大家看到它仍在原先的部位之上。
span标识界定font-style:italic;时,在IE7中出現翻转条。
能够看到,电脑鼠标历经时,在FF和IE6中信息框出現,沒有任何出现异常。但在IE7中查询,大家看到水平翻转条出現了。这好像便是IE中的italics bug。针对该bug,给其界定overflow:hidden,电脑鼠标历经时,翻转条可能消退。
此外,在 chrome中查询,电脑鼠标历经时,信息框并沒有出現在电脑鼠标历经的部位,而是出紧靠父元素的左边,真怪异!!
3、“全自动精准定位”的运用
全自动精准定位有哪些主要用途呢?但大家在网页页面的有关文字插进肯定精准定位图象时,大家可使其top和bottom特性为“auto”,随后界定left或right特性值,那末其竖直部位就由文字流来操纵,水平部位有left或right的长度值来决策。
4、总结
“全自动精准定位”使大家不常见的1个特性,坚信看完本文你对全自动精准定位有1个很深的了解。本篇文章内容扼要的详细介绍了“全自动精准定位”的运用,假如你想进1步精准定位提醒框出現的部位,请参照我汉语翻译的此外此外1篇文章内容--《边距和肯定精准定位》,期待能对你有一定的启迪。