了解CSS波动float、精准定位position

日期：2021-01-20 类型：科技新闻 

关键词：抠图软件电脑版，在线图片加水印，在线 抠图，在线画图网站，淘宝做图片用什么软件好

1 . 波动float

I . 界定及标准

float默认设置为none,对应规范流的状况。当float : left;时，元素就会向其父元素的左边靠紧，摆脱规范流，另外宽度已不屈伸至填满父器皿，而是依据本身內容来明确。

II . 演试标准

提前准备编码

XML/HTML Code拷贝內容到剪贴板
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  4.     <title></title>  
  5.     <style>  
  6.         body   
  7.         {   
  8.             margin: 0;   
  9.             padding: 0;   
  10.         }   
  11.   
  12.         #father   
  13.         {   
  14.             background-color: cyan;   
  15.   
  16.             /*父级div 沒有精准定位 导致子div的margin-top传送给父级*/   
  17.             position: absolute;   
  18.         }   
  19.   
  20.             #father *   
  21.             {   
  22.                 margin: 10px;   
  23.                 padding: 10px;   
  24.                 border: 1px dashed red;   
  25.             }   
  26.   
  27.         #son1   
  28.         {   
  29.         }   
  30.   
  31.         #son2   
  32.         {   
  33.         }   
  34.   
  35.         #son3   
  36.         {   
  37.         }   
  38.     </style>  
  39. </head>  
  40. <body>  
  41.     <div id="father">  
  42.         <div id="son1">#son1</div>  
  43.         <div id="son2">#son2</div>  
  44.         <div id="son3">#son3-son3son3son3</div>  
  45.         <p>  
  46.         这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本   
  47.         </p>  
  48.     </div>  
  49. </body>  
  50. </html>  

1、正中间给#father再加position:absolute,是以便清除待定位父div的margin-top传送难题,有关內容以下

嵌套循环div中margin-top迁移难题的处理方法

在这两个访问器中，有两个嵌套循环关联的div，假如外层div的父元素padding值为0，那末里层div的margin-top或margin-bottom的值会“迁移”给外层div。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  5. <title>无题目文本文档</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div style="background-color:#FF0000;width:300px; height:100px">上部层</div>  
  10.   
  11. <div style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->  
  12.      <div style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</div>  
  13. </div>  
  14.   
  15. </body>  
  16. </html>  
  17.   

缘故：盒子沒有得到 haslayout  导致 margin-top失效
 
处理方法：
1、在父层div再加：overflow:hidden；
2、把margin-top外边距改为padding-top内边距 ；
3、父元素造成边距重合的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
    父层div加： padding-top: 1px;
4、让父元素转化成1个 block formating context，下列特性能够完成
    * float: left/right
    * position: absolute
    * display: inline-block/table-cell(或别的 table 种类)
    * overflow: hidden/auto
   父层div加：position: absolute;

显示信息实际效果为

2、1,2的float各自为left right时,有


可见1,2摆脱规范流,规范流中的son3当她们不存在,因而son3替代原先son1的部位,而son1的左border、son2的右border与son3的上下border重叠

3、当1,2,3统统float left时

文本紧紧围绕着float过的div

4、1,2左波动，3右波动，当对话框宽度减小时，3会被挤下来

当3左波动，2右波动的情况下，显示信息为

当访问器对话框宽度减小时，猜猜谁会被挤下来，son2么？


回答還是son3，标准为 ： 写在html文档中后边的会被挤下来，在html文档中，son3在son2后边，因而一直son3先挤下来。

5、提升son1高宽比，son3挤下来时会卡在那里

6、删掉盒子中的文本，3个子div所有左波动
显示信息为

父div中的3个子div所有摆脱规范流了,父div就缩成1条线了,能够用clear来调整
加1个margin-padding-border全为0,clear为both的空div,来撑大父div

III . clear消除波动
假如前面有float:left的元素,他会危害下面元素,如上例中的p,在p元素中写clear : left便可清除前面左波动元素对本元素的危害.同理clear:both是上下都消除.

2 . 精准定位position

position赋值有static absolute relative fixed

1. static
这个是默认设置的,即规范流排下来,便是static精准定位方法.

2. fixed
在访问器对话框中固定不动,甚么论坛中的[返回顶部]这类按钮便是fixed做的
训练做个返回顶部玩玩

CSS Code拷贝內容到剪贴板
  1. <div id="backToTop">   
  2.     返回顶部   
  3. </div>   
  4. #backToTop   
  5. {   
  6.     width: 100px;   
  7.     height: 50px;   
  8.   
  9.   
  10.     background-color: red;   
  11.     color: white;   
  12.     cursor: pointer;   
  13.     border-radius: 25px 0 0 25px;   
  14.     padding-left: 20px;   
  15.   
  16.   
  17.     text-align: center;   
  18.     line-height: 50px;   
  19.   
  20.     position: fixed;   
  21.     bottombottom: 80px;   
  22.     rightright: 0;   
  23. }   
  24.   

显示信息实际效果


3. relative相对性精准定位

相对自身的偏位,并且不摆脱规范流,应用top/bottom left/right特定偏位量

4. absolute肯定精准定位

依据其他已精准定位元素开展精准定位,运用absolute标准的摆脱规范流

1）、这某些的元素:
离它近期的已精准定位的先祖元素 或 访问器对话框,当找不到前面的先祖元素时,就之后者访问器对话框来精准定位.
2）、早已精准定位 : 是指position早已设定,并且并不是static...即position值不为static便是早已精准定位的元素,未设定position或设定为static觉得它沒有精准定位.
Trick

只设定 position : absolute,而不设定top/bottom/left/right值,那末元素会维持在原地,可是早已摆脱规范流.

3 . display

display赋值有inline block none

设定为none，便可将其掩藏，像inline-block等新加上的

以上便是本文的所有內容，期待对大伙儿学习培训CSS实例教程有一定的协助。

原文网站地址：http://www.cnblogs.com/shouce/archive/2016/04/21/5415502.html

上一篇：CSS3 三d位移translate实际效果案例详细介绍 返回下一篇：没有了