20191229

Posted 2020-11-26 xiaomi0610

项目练习中遇到的问题记录：

1. 鼠标点击超链接时不显示小手掌：父元素绝对定位影响到了子元素

解决办法：

.father{
    z-index:998;
}

2. object-fit  CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

3. 弹性盒布局中，弹性元素的 nth-child() 选择符失效

解决办法：弹性元素设置CSS属性 position: relative;

4. 为某个行标签(例如P标签)设置了高度和行高，并不能使得一行中的所有元素在一条水平线上对齐：一行中的某些元素的高度与其他的元素高度不同

解决办法：为高度不同的元素设置vertical-align

在企业开发中，如果为众多图标设置了vertical-align后，图标对其，那么这些图标的高度是相同的；如果没有对其，最好为父元素设置高度和行高后，为高度不同的图标设置vertical-align与顶部对其

5. 一般对于左浮动的元素，不设置左外边距而是设置右外边距

6. 图片在弹性元素中显示：

.father{
    position:flex;  
    justify-content:space-between;
}
.son{
    flex:1 ;  
    position:relative;
    overflow:hidden;
    height:300px;  /* 撑起高度 */
}
.son img{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

7. 元素设置 text-align 不起作用：是否为元素设置高度

8. 代码实现步骤：

• 页面分割成块：从上到下，从左到右
• 盒子属性：

  /* 盒子整体样式 */
  .first{
      height: 200px;
      width:200px;
      background: #333;
  }
  /* 排版与定位(弹性布局、浮动、内外边距、居中) */
  .second{
      display:flex;
      float:left;
      margin: 0 auto; /* 兄弟元素之间设置 */
      padding: 12px; /* 父元素设置，子元素到父元素边框的距离 */
      position:absolute;
      top:20px;
      left:20px;/* 绝对/相对定位，子绝父相 */
  }
  .third{
      display:absolute;
      left:50%;
      transform:translateX(-50%);/* 盒子水平、垂直居中 */
      text-align:center;/* 内联元素居中 */
      vertical-align:center;/* 某个元素的垂直方向对齐方式 */
      line-height: 30px;/* 行内元素水平对齐 */
      margin:0 auto;/* 嵌套盒子垂直居中 */
  }
  .fourth{
      /* 行高字体字号边框等 */
      /*动画等其他*/
  }