元素波动以后文本会围绕而并不是重叠缘故示例

日期:2020-12-12 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

近期在学习培训CSS,在波动上遇到1难题:既然波动元素摆脱了文本文档流,为何文本会围绕在波动元素的附近而并不是跟波动元素重叠呢?

这难题困扰了我整整1天,上网各种各样搜、各种各样问人,也沒有让我相信的回答(将会有的回答是正确的,可是我基本差,沒有听懂)。最终历经1一天到晚检索、了解的沉定,最终在他人的强烈推荐下看了《CSS权威性指南》,如今自觉得算是基础上搞清楚如何回事了。下列全是我自身所想,期待能够帮到和我1样的初学者。假如有不正确或不当之处的地区,也请大神指出,我定当纠正,感谢!!

以便完全搞清楚这个难题,务必先弄搞清楚几个难题。

第1,波动的目地。最开始时,波动只能用于图象(一些访问器还适用表的波动),目地便是以便容许别的內容(如文字)“紧紧围绕”该图象。然后来的CSS容许波动任何元素。

第1,肯定精准定位与波动的差别。

拷贝编码
编码以下:

<body>
<div id="container">
<div id="A">你好</div>
<div id="B">
第1,肯定精准定位与波动的差别。肯定精准定位是将元素完全从文本文档流删掉,并相对其包括块精准定位(包括块将会是文本文档中的另外一个元素或是原始包括块),元素本来在一切正常文本文档流中所占的室内空间会关掉,就仿佛该元素原先不存在1样,该元素不再会危害别的元素的合理布局了。假如对元素A应用肯定精准定位的话,元素B占有元素A以前的部位,与元素A重叠在1起,并被元素A遮盖。如图所示。
</div>
</div>
</body>

肯定精准定位是将元素完全从文本文档流删掉,并相对其包括块精准定位(包括块将会是文本文档中的另外一个元素或是原始包括块),元素本来在一切正常文本文档流中所占的室内空间会关掉,就仿佛该元素原先不存在1样,该元素不再会危害别的元素的合理布局了。比如,针对上面的html片断,假如将元素A精准定位到左上角的话,元素B占有元素A以前的部位,与元素A重叠在1起,并被元素A遮盖。CSS编码和实际效果图以下。

拷贝编码
编码以下:

body {
color:#FFF;
}
#container {
position:relative;
width:500px;
height:250px;
background:#039;
}
#A {
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
background:#C00;
}

 

拷贝编码
编码以下:

而波动,会以某种方法将波动元素从文本文档的一切正常流中删掉,并把波动元素向左侧和右侧波动,但是它還是会危害合理布局,有关波动的有很多标准,读者可自主阅读文章《CSS权威性指南》1书,详细介绍地很详尽。选用CSS的独有方法,波动元素基本上“自成1派”,但是它们還是对文本文档的其余一部分有危害。这类危害源自于这样1个客观事实:1个元素波动时,别的內容会“围绕”该元素。假如将元素A向左波动的话,CSS编码和实际效果图以下图所示。不难看出,波动以后,文本跑到了元素A的右侧,即完成了文本围绕波动元素的作用(假如A不波动的话,div是块级元素,不能能有两个div处在同1行)。
可是这儿有1小难题,假如你细心观查CSS编码的话和实际效果图的话,会发现元素B的情况和元素A的情况重叠了1一部分。这便是用来解释为何说波动元素摆脱了一切正常的文本文档流可是还会危害合理布局的缘故。之因此说元素A摆脱了文本文档流,是由于元素B的确占有了元素A以前的部位,仿佛元素A早已不存在了似的。只因此说会危害合理布局,是由于元素B里的文本并沒有随之占有元素A的部位,而是围绕在波动以后的元素A周围。这是以便防止元素A将元素B里的文本遮盖了,这正好便是波动的目地!


拷贝编码
编码以下:

body {
color:#FFF;
}
#container {
width:500px;
height:250px;
background:#039;
}
#A {
float:left;
width:200px;
height:200px;
background:#C00;
}
#B {
width:480px;
height:230px;
background:#000;