2020 July 21 HTML与CSS

CSS第七篇：CSS属性-定位

标准流（Normal Flow）

  1. 默认情况下，元素都是按照normal flow进行定位的
    1. 从上到下，从左到右按顺序摆放好
    2. 相互之间不存在层叠现象
  2. margin、padding定位
    1. 在标准流中，可以使用margin、padding对元素进行定位
      1. 其中margin还可以设置负数
    2. 比较明显的缺点是：
      1. 设置一个元素的margin或者padding，通常会影响到标注流中其他元素的定位效果
      2. 不便于实现元素的层叠效果
      3. 也就是说一个元素位置移动了，其他元素就会侵入他移动的位置

CSS属性-Position

  1. 利用position可以对元素进行定位，常用取值有4个
    1. static：静态定位
    2. relative：相对定位
    3. absolute：绝对定位
    4. fixed：固定定位

relative-相对定位

  1. 元素按照normal flow布局
  2. 可以通过left、right、top、bottom进行定位
    1. 定位参照的对象是元素自己原来的位置
    2. 也就是说尽管元素的位置移动了，他原来的的位置还占据这，不允许其他元素侵入

  3. left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示：

    pic

  4. 相对定位一般用于对元素位置微调
    1. 在不影响其他元素位置的前提，对当前元素位置进行微调
  5. 相对定位与margin定位效果如下
    1. 给元素设置position: relative;
    2. 给元素设置left、right、top、bottom值

    3. 代码举例：

        div {
     width: 100px;
     height: 100px;
 }
 .div1 {
     background-color: #ff0;
 }
 .div2 {
     background-color: #f00;
     /* margin定位 */
     /* margin-top: -50px; */
            
     /* .div2 可以进行相对定位 */
     position: relative;
     top: -50px;
 }
 .div3 {
     background-color: #0f0;
 }
        
 <div class="div1">div1</div>
 <div class="div2">div2</div>
 <div class="div3">div3</div>

    pic

  6. 通过relative实现屏幕缩放，背景图片居中效果（重要！！！）
    1. 场景：div尺寸不管如何变化，总是显示图片的最中间的地方
      1. 默认不做处理，img的左上角与div的左上角重合，只能显示图片的左上角
      2. 处理后，div尺寸不断变化，总是能够显示img的最中间部分
      3. 条件：img的中线总是与div的中线重合
      4. 步骤：
        1. img先向左移动图片宽度的一半，用left
        2. img再向右移动div宽度的一半，用margin
     <style>
     body {
         margin: 0;
     }
     div {
         overflow: hidden;
     }
     /* 
     效果：无论怎样缩放屏幕，背景图片始终居中
     图片在div居中计算方法：（img宽度-div宽度）*0.5
     图片固定宽度为1920px，一半为960px
     解决方案：
     往左边移动图片宽度的一半
     往右边移动div元素宽度的一半
      */
     img {
         position: relative;
         /* 父元素div的宽度 * 50% */
         /* left: -50%; */

         /* 往左边移动图片宽度的一半 */
         left: -960px;
         /* 往右边移动div元素宽度的一半*/
         margin-left: 50%;
     }
 </style>
 <div>
     <img src="./images/mhxy.jpg" alt="">
 </div>

static- 静态定位

  1. position属性的默认值
  2. 元素按照normal flow布局
  3. left、right、top、bottom没有任何作用

fixed-固定定位

  1. 元素脱离normal flow布局（脱离标准流、脱标）
  2. 可以通过left、right、top、bottom进行定位
    1. 定位参考对象是视口（viewport），可以简单理解为浏览器窗口
  3. 当画布滚动时，固定不动
    1. 悬浮框的场景

  4. 脱离标准流效果如下：

    pic

    div {
     width: 100px;
     height: 100px;
 }
 .div1 {
     background-color: #ff0;
 }
 .div2 {
     background-color: rgba(255,0, 0, 0.5);
     /* .div2 固定定位 */
     position: fixed;
     left: 0;
     top: 0;
 }
 .div3 {
     background-color: #0f0;
}

画布和视口

  1. 视口
    1. 文档的可视区域
  2. 画布（canvas）
    1. 用于渲染文档的区域
    2. 文档内容超出视口范围，可以通过滚动查看
  3. 宽高对比
    1. 画布>=视口
  4. 总结：
    1. 视口就是浏览器的窗口
    2. 画布就是这个窗口显示的所有内容，包括滚动显示的那部分

脱标元素的特点

  1. 既然已经脱标，就不再受标准流约束，也不在区分它是块级元素、行内级元素、行内块级元素（注意理解）
  2. 脱标元素特点：
    1. 可以随意设置宽高
    2. 宽高默认由内容决定
    3. 不再受标准流的约束
      1. 不再严格按照从上到下、从左到右排布
      2. 不再严格区分块级、行内级，块级、行内级的很多特性都会消失
    4. 不再给父元素汇报宽高数据
    5. 脱标元素内部默认还是按标准流布局
    6. 脱标的元素不会占据标准流的位置，其他标准流元素会占据当前位置

absolute-绝对定位

  1. 元素脱离标准流normal flow
  2. 可以通过left、right、top、bottom进行定位
    1. 定位参照对象是最邻近的定位祖先元素
    2. 如果找不到这样的祖先元素，参照对象是视口，此时就等价于 fixed固定定位
  3. 什么是定位元素？
    1. position值不为static的元素
    2. 也就是position值为relative、absolute、fixed的元素
    3. 定位祖先元素就是当前元素的祖先元素中某个元素的position值不为static

  4. 举例：

     <!-- di、d2、d3都是d4的祖先元素 -->
 <!-- 默认为static 非定位元素 -->
 <div class="d1" >
     <!-- 这个是定位元素，而且离d4最近，那么d2就是d4的参照物 -->
     <div class="d2" style="position: relative;">
         <!-- 默认为static 非定位元素 -->
         <div class="d3">
             <!-- 设置绝对定位 -->
             <div class="d4" style="position: absolute;"></div>
         </div>
     </div>
 </div>

子绝父相

  1. 在绝大多数情况下，子元素都是需要相对于父元素进行定位
  2. 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决办法是：
    1. 父元素设置：position:relative
    2. 子元素设置：position:absolute
    3. 简称：子绝父相

绝对定位技巧(重要！！！)

  1. 绝对定位元素概念
    1. position值为absolute或者fixed的元素
  2. 对于绝对定位元素来说：
    1. 定位参照对象的宽度 = left+right+margin-left+margin-right+绝对定位元素的实际占用宽度
    2. 定位参照对象的高度 = top+bottom+margin-top+margin-bottom+绝对定位元素的实际占用高度
  3. 通过2的结论，可以总结出下面的结论：
    1. 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
      1. left:0/right:0/top:0/bottom:0/margin:0
    2. 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
      1. left:0/right:0/top:0/bottom:0/margin:auto
      2. 另外还得设置具体的宽高值（宽高小于定位参照对象的宽高）

  4. 父控件在子控件内部居中代码举例：

     <style>
     .div1 {
         position: relative;
         width: 200px;
         height: 200px;
         background-color: #f00;
     }
     /* 子控件尺寸等于父控件尺寸 */
     .div21 {
         position: absolute;
         background-color: #ff0;
         /* width: 50px; */
         /* height: 50px; */
         left: 0;
         right: 0;
         top: 0;
         bottom: 0;
         margin: 0;
     }
     /* 子控件在父控件内部水平、垂直居中 */
     .div2 {
         position: absolute;
         background-color: #ff0;
         width: 50px;
         height: 50px;
         /* 水平居中方法1：重要 */
         /* 向左距离父控件宽度的一半 */
         /* left: 50%; */
         /* 向左偏移 -（当前控件宽度的一半） */
         /* margin-left: -25px; */

         /* 水平居中方法2：重要 */
         left: 0;
         right: 0;
         margin-left: auto;
         margin-right: auto;
         /* 垂直居中 */
         top: 0;
         bottom: 0;
         margin-top: auto;
         margin-bottom: auto;
            
         /* margin: auto; */
     }
 </style>

position总结

pic

Z-index

  1. 元素的层叠 pic

    1. 都是定位元素的情况，哪个元素写在后面默认就在最上面
  2. Z-index属性
    1. Z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
      1. 取值可以是：正整数、负整数、0
    2. 比较原则
      1. 如果是兄弟关系
        1. z-index越大，层叠在越上面
        2. z-index相等，写在后面的那个元素层叠在上面
      2. 如果不是兄弟关系
        1. 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
        2. 而且这2个定位元素必须有设置z-index的具体数值
  3. 举例：

    1. css部分：

       <style>
     .div1,.div2 {
         width: 300px;
         height: 300px;
     }
     .div1 {
         background-color: #f00;
     }
     .div2 {
         background-color: #0f0;
     }
     .div111,.div222 {
         width: 100px;
         height: 100px;
         position: absolute;
     }
     .div11{
         position: relative;
         z-index: 5;
     }
     .div22 {
    
     }
     .div111 {
         background-color: #ff0;
         top: 100px;
         z-index: 21;
     }
     .div222 {
         background-color: #0ff;
         top: 150px;
         left: 50px;
         z-index: 10;
     }
 </style>

    2. 标签

      1. div222与div11比较,这两个定位元素最近

         <div class="div1">
     <!-- relative; 5 -->
     <div class="div11">
         <!--absolute;21  -->
         <div class="div111"></div>
     </div>
 </div>
 <div class="div2">
     <div class="div22">
         <!--absolute; 10 -->
         <div class="div222"></div>
     </div>
 </div>

      2. div222与div11比较（div11没有设置Z-index具体值）

         <div class="div1">
     <!-- relative; -->
     <div class="div11">
         <!--absolute;21  -->
         <div class="div111"></div>
     </div>
 </div>
 <div class="div2">
     <div class="div22">
         <!-- absolute;10 -->
         <div class="div222"></div>
     </div>
 </div>

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents