css 中的position z-index em rem zoom 的基本用法

Posted 2020-06-14

1、position定位：

CSS 定位和浮动

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)html 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

相对定位、绝对定位和浮动。。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

 

2.z-index 元素堆叠排序
z-index用于设置或检索对象的堆叠顺序，对应的脚本特性为zIndex。
z-index的数值越大，该元素的堆叠层级越高。

<style>
      .a{
          width: 300px;
          height: 300px;
          background: purple;  /*这里定义个背景，让我们知道这个div在哪*/
          position: absolute;
          left:50px;
          top:50px;
          z-index: 1
      }
      .b{
          position:absolute;
          left:80px;
          top:80px;
          width:50px;
          height: 50px;
          background: white;
          z-index: 0
      }
  </style>
  <div class="a"></div>
  <div class="b"></div>　　

zoom 元素缩放比例
zoom适用于所有元素，用于设置或检索对象的缩放比例，对应的脚本特性为zoom，原比例的值是1。
代码：

 

 

 

 

 

CSS

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<style>       div{           width: 100px;           height: 100px;           float: left       }       .first-div{           background: purple;           zoom:1.5       }       .second-div{           background: black;           zoom:1       }       .third-div{           background: red;           zoom:.5       }   </style>   <div class="first-div"></div>   <div class="second-div"></div>   <div class="third-div"></div>

以上代码将会展示的依次是紫色-黑色-红色的div，大小分别是100px的1.5倍，1倍，0.5倍。
em 和 rem 是什么
1em等于当前的字体尺寸，数值的改变意味着字体大小的调整。em 有继承这个特性，也就是说，外部父元素定义了字体的em大小，内部子元素会继承这一属性的样式。
rem = root em 。顾名思义，root即根部的，顶部的。也就是根部的em，这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。
代码：

 

 

 

 

 

CSS

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<style>       body{         font-size: 12px;         }       /*html{           font-size: 12px;       }*/       div{           width: 200px;           height: 100px;           float:left       }       .first-div{           font-size: 1em       }       .second-div{           font-size: 2em       }       .third-div{           font-size: 1rem       }       .fourth-div{           font-size: 2rem       }   </style>   <div class="first-div">Hello World</div>   <div class="second-div">Hello World</div>   <div class="third-div">Hello World</div>   <div class="fourth-div">Hello World</div>

以上代码分别展示了不同大小的字体，em和rem的区别可以通过仅仅注释body字体样式和html字体样式来看看他们之间的差别。