深层次学习培训CSS中怎样应用精准定位(小结)

日期:2021-02-28 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

CSS中精准定位详细介绍

position 特性在英文单词中表明 部位 的意思,在 CSS 中关键功效设定元素的精准定位。

CSS 中1共有 3 种精准定位以下: 

    特性值 叙述 fixed 设定固定不动精准定位。 relative 设定相对性精准定位。 absolute 设定肯定精准定位。

固定不动精准定位实践活动

在实践活动固定不动精准定位以前大家先看看编码构造是甚么模样的呢。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      
       width: 100px;
       height: 100px;
       background-color: red;
       margin: 0;
       padding: 0;
     }
     div{
       width: 200px;
       height: 200px;
       background-color:springgreen;
        margin: 0;
        padding: 0;
     }
  </style>
</head>

<body>
   <h1 class="box"></h1>
   <div></div>
</body>

</html>

結果图

如今笔者将 h1 元素设定为固定不动精准定位,看看和上面的构造实践活动有甚么差别,随后大家在剖析1些固定不动精准定位的特性。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      position:fixed;
       width: 100px;
       height: 100px;
       background-color: red;
       margin: 0;
       padding: 0;
     }
     div{
       width: 200px;
       height: 200px;
       background-color:springgreen;
        margin: 0;
        padding: 0;
     }
  </style>
</head>

<body>
   <h1 class="box"></h1>
   <div></div>
</body>

</html>

結果图

固定不动精准定位特性剖析以下:

  •  固定不动精准定位,它是相对访问器对话框开展设定精准定位,无论网页页面假如翻转,固定不动精准定位的元素部位不容易遭受任何危害。
  • 固定不动精准定位的元素特性:它早已摆脱了规范文本文档流。
  • 固定不动精准定位的元素特性:它的等级比规范文本文档流的元素要高,因此大家给h1标识设定了固定不动精准定位会压盖到div标识。
  • 固定不动精准定位的元素特性:h1标识在div标识之上,因此固定不动精准定位的元素早已已不占有任何室内空间

相对性精准定位实践活动

在实践活动相对性精准定位以前大家先看看编码构造是甚么模样的呢。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果图

如今笔者将 class 特性值为 .div2 元素设定为相对性精准定位,看看和上面的构造实践活动有甚么差别,随后大家在剖析1些相对性精准定位的特性。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position: relative;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果图

留意:在大家沒有给相对性精准定位设定座标部位,它是不容易有任何挪动的。

笔者给 class 特性值为 div2 元素设定精准定位座标实践活动。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position: relative;
       left: 50px;
       top: 50px;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果图

相对性精准定位特性剖析以下:

  • 相对性精准定位的元素它沒有摆脱规范文本文档流。
  • 相对性精准定位的元素假如沒有设定座标它会在原影响力置。
  • 相对性精准定位的元素设定了座标部位,它会依据原先的部位刚开始测算挪动的部位。
  • 相对性精准定位的元素它比规范文本文档流的元素等级要高,会遮盖规范文本文档流中的元素。
  • 相对性精准定位的元素它能够设定为负数。

 肯定精准定位实践活动

在实践活动肯定精准定位以前大家先看看编码构造是甚么模样的呢。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果图

如今笔者将 class 特性值为 .div2 元素设定为肯定精准定位,看看和上面的构造实践活动有甚么差别,随后大家在剖析1些肯定精准定位的特性。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果图

留意:肯定精准定位早已摆脱了规范文本文档流。

笔者给 class 特性值为 div2 元素设定精准定位座标实践活动,以便让读者有1个直观的印象我给最外层的 div 元素设定了垂直居中对齐。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      margin: 0px auto;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
       left:0px ;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果图

留意:肯定精准定位元素为何会出現在访问器左侧缘呢,肯定精准定位挪动基本原理:肯定精准定位的元素它会找寻父元素是不是有精准定位,假如有精准定位它会依据父元素开展精准定位,假如父元素沒有设定精准定位,它会在找父元素的父元素是不是有精准定位,以此类推直至 body 元素就终止了,由于 body 元素便是访问器的部位,说了这么多笔者给新学者1个直观的印象,那我们就实践活动见真招。

编码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>精准定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      margin: 0px auto;
      position: relative;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
       right:0px ;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果图

留意:如今笔者给肯定精准定位座标拆换变成向右精准定位,父元素设定了1个相对性精准定位,在这里就很少开展实践活动了,假如精准定位的父元素的父元素也便是爷爷的元素,父元素和爷爷元素另外都设定了精准定位,该元素会依据父元素决策精准定位而并不是爷爷元素。

肯定精准定位特性剖析以下:

  • 肯定精准定位元素它早已摆脱了规范文本文档流。
  • 肯定精准定位元素它会遮盖掉规范文本文档流的元素。
  • 肯定精准定位元素它早已已不占有任何室内空间了。
  • 肯定精准定位元素它依据父元素之先祖元素之间是不是有精准定位,假如有依据近期元素开展设定精准定位的部位,假如沒有依据body元素开展精准定位。
  • 肯定精准定位元素的父元素能够是用任何精准定位包含肯定精准定位,笔者提议是用相对性精准定位,1般相对性精准定位是相互配合着肯定精准定位应用的

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:详解CSS3新增的情况特性 返回下一篇:没有了