运用CSS精准定位情况照片的常见方式总结

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

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

序言

大伙儿在网络上最多见的1种计划方案便是在父元素中relative,随后子元素absolute。这类计划方案自然好,但是带来的1个缺陷便是会更改元素的等级关联,假如在好几个地区应用,这样的堆叠嵌套循环的关联会10分错乱。本文先临时抛下那种计划方案,给大伙儿共享几种CSS情况照片精准定位的计划方案。

1.无依靠的absolute精准定位

在互联网上,对absolute存在这样1个误会,觉得肯定精准定位absolute的应用务必要设定父元素相对性精准定位relative。这样的了解不可以觉得是错的,只能说对界定沒有彻底了解。在W3C文本文档中是这样界定absolute的:

转化成肯定精准定位的元素,相对static精准定位之外的第1个父元素开展精准定位。元素的部位根据'left' , 'right' , 'bottom' , 'top' 特性开展要求。

对这句话的了解应当以下(L : left,R:right,B:bottom,T:top)

a:当给1个元素设定position:absolute以后,假如父元素沒有设定position:relative,则该元素是根据LRBT根据可视性对话框地区的左上角开展精准定位;假如父元素设定了position:relative,则该元素是根据LRBT根据父元素器皿的左上角开展精准定位。

b:在转化成肯定精准定位的元素时,无论父元素是不是设定了position:relative,应用margin-top , margin-left , margin-right , margin-bottom在其中的两个非相反向开展精准定位,其实际效果会像相对性精准定位relative1样,依据本身部位开展精准定位。可是应用margin精准定位与relative唯1的差别便是,absolute摆脱文本文档流,原先的物理学室内空间早已消退,而relative沒有摆脱文本文档流,原先的物理学室内空间仍然占有。

因此,可使用无依靠relative的absolute开展精准定位,精准定位方式是应用margin,而不可以应用LRBT。

编码以下:


拷贝编码
编码以下:

<div class="keith">
<div class="main"></p> <p> </div>
</div>


拷贝编码
编码以下:

.keith {
margin: 2em;
width: 5em;
height: 5em;
background: lightgreen;
}</p> <p>.keith .main {
position: absolute;
background: url("../images/my-icons/Loginicon.png") scroll no-repeat 0 0;
width: 21px;
height: 21px;
margin-left: calc(5em - 25px);
margin-top: calc(5em - 25px);
}

上面编码中,应用margin-left , margin-top 与 position:absolute来对照片开展精准定位。应用了CSS3中的calc()来测算必须精准定位的值。

示例照片以下:

2.background-position拓展英语的语法

 在CSS3情况与边框中,background-position特性早已获得拓展,它容许大家特定情况照片间距随意角的偏位量,要是大家在偏位量前面特定重要字便可。

编码以下:

拷贝编码
编码以下:

<div class="keith"></div>


拷贝编码
编码以下:

.keith{
margin:2em;
width:5em;
height:5em;
background:lightgreen url('../images/my-icons/Loginicon.png') scroll no-repeat ;
background-position:right 5px bottom 5px;
};

上面编码中,应用background-position拓展英语的语法便可完成间距右下角5px间距的精准定位。

3.background-origin精准定位

 background-origin是CSS3中新增的特性,关键用来决策background-position特性的参照原点,即决策情况照片精准定位的起始点。在默认设置状况下,情况照片的background-position特性一直以元素左上角为座标原定对情况照片开展情况精准定位。

background-origin有3个特性值content-box , padding-box(默认设置值) , border-box 。

看看怎样应用这个特性来对情况照片开展右下角5px的精准定位,编码以下。


拷贝编码
编码以下:

<div class="keith"></div>


拷贝编码
编码以下:

.keith {
margin: 2em;
width: 5em;
height: 5em;
padding: .5em;
background: lightgreen url("../images/my-icons/Loginicon.png") scroll no-repeat;
background-position: right bottom;
-moz-background-origin: content;
-o-background-origin: content-box;
-webkit-background-origin: content;
background-origin: content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

上面编码中,给盒子设定了padding值。应用box-sizing特性来调剂div在访问器下的盒实体模型为IE盒实体模型,border-box的意思是总宽度=content area + padding + border 。这里给background-origin特性设定了content-box,将会大伙儿会不太了解,为何并不是padding-box。看1个火狐下的截图。

上面照片中,黄色地区的是margin,紫色地区的是padding,浅蓝色地区的是content-area。假如给元素设定了padding-box,那末此时照片会精准定位在右下角,与右下角沒有任何室内空间。因此此时要应用content-box开展精准定位。最后的实际效果以下。

4.calc()精准定位

假如大家期待根据內容来撑开器皿的宽度和高宽比时,而不去固定不动高宽比和宽度时,这时候必须应用calc特性+background-position特性融合应用,来对照片开展精准定位。由于这时候候其实不了解器皿的高宽比和宽度,只能有100%来开展测算。


拷贝编码
编码以下:

<div class="keith">
这是1段文本,用于撑开器皿。
</div>


拷贝编码
编码以下:

.keith{
margin:2em;
padding:2em;
display:inline-block;
background:lightgreen url('../images/my-icons/Loginicon.png') scroll no-repeat;
background-position:calc(100% - 5px) calc(100% - 5px);
}</p> <p>

示例照片以下:

 

好了,以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能有一定的协助,假如有疑惑大伙儿能够留言沟通交流。

上一篇:谈谈对css特性box 返回下一篇:没有了