前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）

注：本文的css样式均使用less写法

1、字体居中

（1）先text-align:center;行内元素水平居中

（2）再line-heigh:(盒子高度);行内元素垂直居中

 text-align: center;
 line-height:  ( 30 / @vw );

2、盒子居中

情景1：版心居中

margin:0 auto;

情景2：标题栏制作时让左右两个弹性盒子居中的方法

（1）设置浮动

（2）给父级添加行高line-height: (25 /@vw );

.head{
  display: flex;
  justify-content: space-between;
  width: (345 /@vw );
  height:(26 /@vw ) ;
  background-color: pink;
  margin-bottom: (16 /@vw );
  line-height: (25 /@vw );

  h4{
    font-size:(20 /@vw ) ;
  }
  a{
    font-size:(12 /@vw ) ;
    color: #a1a4b3;
  }
}

3、图片居中

•  情景1：弹性盒子含img

一般是flex布局的几个弹性盒子居中，直接给父级设置纵轴对齐方式属性align-items:center;

• 情景2：背景图图片

（1）仅需要设置background-image和background-size

（2）水平居中方法：background-position：center 0；

4、图片不符合盒子比例

方法1：盒子里放图片

（1）设置包括图片的盒子大小

（2）设置图片宽高成100%

（3）给图片加属性object-fit: cover；（不挤压变形）

• object-fit:
  • cover 以缩放的方式显示图片（等比例缩放，不挤压变形）
  • contain 改变图片的比例

 li{
    width: ( 345 / @vw );
    height: ( 108 / @vw );
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

5、固定定位出现的问题

（1）需要定位的区域需要设置width:100%;

（2）设置需要固定定位盒子position:fixed;以及left、top等方位。

（3）固定定位元素脱标，与之相邻的盒子需要加margin，不然会重叠。

6、运用less写法公共样式不要嵌套到父级中

否则无法达到效果