CSS网页页面合理布局实例教程:肯定精准定位和相

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

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序


本文关键叙述XHTML中相对性精准定位和肯定精准定位各有的实质、用法、差别和二者之间的关联。和应用CSS的Left、Right、Top、Bottom特性(偏位特性)和Margin特性(外边距)对精准定位块级元素开展合理布局的方式。
CSS网页页面合理布局实例教程:肯定精准定位和相对性精准定位。根据本文你肯定能了解肯定精准定位和相对性精准定位了,假如你看完本篇文章内容还没理解肯定精准定位和相对性精准定位的话,我看你就别学CSS了!哈哈!
概述:
本文关键叙述XHTML中相对性精准定位和肯定精准定位各有的实质、用法、差别和二者之间的关联。和应用CSS的Left、Right、Top、Bottom特性(偏位特性)和Margin特性(外边距)对精准定位块级元素开展合理布局的方式。(本文的示例,请看这个附件demo。)
表明:
占位室内空间:元素在文本文档流中所占有的室内空间。
物理学室内空间:元素自身所占有的室内空间。
下面分3种状况各自对相对性精准定位和肯定精准定位开展探讨:
1.只应用css第1组特性合理布局精准定位元素的状况
2.只应用css第2组特性合理布局精准定位元素的状况
3.混和应用第1组和第2组特性的状况
图1为待定位时的原始实际效果,
等级关联为:
<div
<div box1
<div box2
<div box3
实际效果图:

图1
1、用相对性精准定位合理布局块级元素
元素设定position值: position:relative
此特性值的设定,元素沒有摆脱文本文档流,還是一般流精准定位实体模型的1一部分,会对文本文档流中其它元素合理布局造成危害。(表明:蓝色意味着占位室内空间,鲜红色意味着元素)
看到本信息内容,表明该文章内容来源于于脚本制作之家www.jb51.net,假如文章内容不详细请到脚本制作之家jb51.net访问!
1.仅应用left、right、top和bottom特性合理布局相对性精准定位元素的状况
元素本来所占的占位室内空间仍保存,物理学室内空间偏位。
看到本信息内容表明该文是根据网页页面课堂教学(jb51.net)梳理公布的,请不必删除!
图2中,设定元素的left和top的值,对box2开展合理布局,能够发现除box2偏位以外,别的块级元素的部位沒有被危害,可见box2的占位室内空间還是存在的。
等级关联为:
<div
<div box1
<div box2 ——– position:relative ; top:⑹0px; left:80px;
<div box3
实际效果图:

图2
2.仅应用margin特性合理布局相对性精准定位元素的状况
用margin-bottom特性和margin-top特性设定负值能够更改文本文档流中所占室内空间的高宽比,会危害文本文档流中的其它元素部位。比如:margin-top:负值; margin-bottom:负值
图3中,box1和box2都设定了元素margin-bottom的值,值等于它们高宽比的负值。box1和box2物理学室内空间沒有更改,占位室内空间高宽比为0。box3的margin-bottom值设定为0,物理学室内空间沒有更改,占位室内空间高宽比不会改变。再根据margin-left对box2和box3设定左偏位值。
等级关联为:
<div
<div box1 ——– position:relative ; margin-bottom:⑴02px;
<div box2 ——– position:relative ; margin-bottom:⑴02px; margin-left:110px;
<div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
实际效果图:

图3
3.混和应用left、right、top和bottom特性与margin特性合理布局相对性精准定位元素的状况
此状况,它们的值会造成累加的实际效果。在CSS2.1中全部的访问器都应用外边距界限来进行 偏位测算。本文从数学课的角度了解为偏位特性值和外边距特性值累加。
加此信息内容脚本制作之家(jb51.net)公布目地是以便避免你变懒!jb51.net不认为收集!
图4中,box2是在图3的基本上提升设定left的值造成的实际效果,可见margin-left的值和left的值造成了累加。(偏位量:80px = 110px - 30px)
等级关联为:
<div
<div box1 ——- position:relative ; margin-bottom:⑴02px;
<div box2 ——- position:relative ; margin-bottom:⑴02px;margin-left:110px; flet:⑶0px;
<div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
实际效果图:

图4
2、用肯定精准定位合理布局块级元素
设定position值:position:absolute;
此特性值的设定,元素从文本文档流彻底删掉。
1.仅应用left、right、top和bottom特性合理布局肯定精准定位元素的状况
肯定精准定位的元素的偏位部位以近期的精准定位(包含相对性精准定位和肯定精准定位)先祖元素作参考物。假如元素沒有已精准定位(包含相对性精准定位和肯定精准定位)的先祖元素,那末它的参考物为最顶级元素(因为访问器的默认设置参考物不一样,物将会是BODY或 HTML 元素)。
留意:IE下参考物需设定宽度或高宽比bottom和right特性才能够正确的精准定位。
设定元素为肯定精准定位元素后,元素的Left、 Right、Top和Bottom特性默认设置值并不是0,只是将元素摆脱文本文档流。下列事例表明这个难题。
在图5中,将橘黄色的先祖元素设定为精准定位元素(即参考物),box2设为肯定精准定位,文本文档流由box1-box2-box3变成box1-box3,可box2却沒有挪动到间距参考物0值的部位上,可见box2的Left、 Right、Top和Bottom特性默认设置值不等于0,它只是摆脱了文本文档流罢了。
等级关联为:
<div ———————————position:relative 参考物
<div—————————-沒有设定为精准定位元素,并不是参考物
<div———————-沒有设定为精准定位元素,并不是参考物
<div box1
<div box2 ——–absolute
<div box3
实际效果图:

图5
以近期的先祖精准定位元素为参考物的状况
图6中,Box2设定成肯定精准定位元素,摆脱了文本文档流,文本文档流由box1-box2-box3变成box1-box3,box2以近期的精准定位先祖(蓝色框)为参考物。
本文是网页页面课堂教学www.jb51.net搜集梳理或原創內容,转载请注明出处!
等级关联为:
<div ——————————— position:relative; 并不是近期的先祖精准定位元素,并不是参考物
<div—————————-沒有设定为精准定位元素,并不是参考物
<div———————- position:relative 参考物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
实际效果图:

图6
图7中,为更改参考物(橘色框)后的实际效果
等级关联为:
<div ——————————— position:relative;近期的先祖精准定位元素,参考物
<div—————————-沒有设定为精准定位元素,并不是参考物
<div———————-沒有设定为精准定位元素,并不是参考物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
实际效果图:

图7
图8中,参考物为最顶级的元素状况
等级关联为:
<div ———————————沒有设定为精准定位元素,并不是参考物
<div—————————-沒有设定为精准定位元素,并不是参考物
<div———————-沒有设定为精准定位元素,并不是参考物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
实际效果图:

图8
2.仅应用margin特性合理布局肯定精准定位元素的状况
此状况,margin-bottom 和margin-right的值已不对文本文档流中的元素造成危害,由于该元素早已摆脱了文本文档流。此外,无论它的先祖元素有木有精准定位,全是以文本文档流中华来所属的部位上偏位参考物。
本文是网页页面课堂教学www.jb51.net搜集梳理或原創內容,转载请注明出处!
图9中,应用margin特性合理布局相对性精准定位元素。
等级关联为:
<div ——————————— position:relative; 并不是参考物
<div—————————-沒有设定为精准定位元素,并不是参考物
<div———————-沒有设定为精准定位元素,并不是参考物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
实际效果图:

图9
IE6的状况下,box2前面沒有弟兄连接点,则margin-left的值会出現双倍边距,见图10。
等级关联为:
<div ——————————— position:relative; 并不是参考物
<div—————————-沒有设定为精准定位元素,并不是参考物
<div———————-沒有设定为精准定位元素,并不是参考物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
实际效果图:

图10
3.混和应用left、right、top和bottom特性与margin特性合理布局相对性精准定位元素的状况
a.margin特性和top、bottom、left、right特性另外应用,假如同1方位偏位,它们的值会造成累加的实际效果,见图11。
本信息内容意味着文章内容来源于网页页面课堂教学jb51.net请大伙儿去www.jb51.net访问!
比如:margin-left:120px; left:⑵0px; 那末box2的偏位值为120px⑵0px=100px;
等级关联为:
<div ———————————-并不是参考物
<div—————————–并不是参考物
<div———————–position:relative; 参考物
<div box1
<div box2 ———position:absolute; margin-left:120px; left:⑵0px; top:50px;
<div box3
实际效果图:

图11
b.肯定精准定位和相对性精准定位的累加加实际效果不一样,假如top、bottom、left、right特性和margin特性偏位的方位相反,top、bottom、left、right特性值合理,反向的margin特性值失效,见图12。
等级关联为:
<div ———————————-并不是参考物
<div—————————–并不是参考物
<div———————–position:relative; 参考物
<div box1
<div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
<div box3
实际效果图:

图12
总结: 相对性精准定位的元素不容易摆脱文本文档流,占有文本文档流的室内空间,Left; Right; Top和Bottom特性与margin特性混和应用会造成累加实际效果。 肯定精准定位的元素摆脱文本文档流,偏位不危害文本文档流中的其它元素,Left; Right; Top和Bottom特性与margin特性混和应用,偏位方位同样值累加,方位相反,margin特性值失效。 肯定精准定位的元素以近期的精准定位先祖元素为参考物。
上一篇:import link的实际差别 返回下一篇:没有了