css开发过程中遇到的坑

在CSS开发过程中，可能会遇到一些坑，下面总结了一些经验，帮助你避免这些错误。

/* 第一坑：命名规范 *//* 建议使用BEM命名法 *//* block-name__element-name--modifier-name *//* 例如：.header__logo--small *//* 第二坑：选择器的优先级问题 *//* 优先级规则：important >
     行内样式 >
     ID选择器 >
     类选择器/属性选择器/伪类选择器 >
 元素选择器/伪元素选择器 *//* 避免滥用!important *//* 尽可能精确匹配到元素 *//* 第三坑：盒模型问题 *//* box-sizing属性控制盒模型的计算方式 *//* 推荐使用border-box，可以减少计算量 */* {
      box-sizing: border-box;
}
/* 第四坑：居中问题 *//* 水平居中 *//* 要求父元素必须有宽度 */.parent {
      width: 100%;
      text-align: center;
}
.child {
      display: inline-block;
}
/* 垂直居中 *//* 使用flexbox */.parent {
      display: flex;
      align-items: center;
      justify-content: center;
  /* 还可以使用margin: auto */}
.child {
  /* 设置高度 */}
/* 第五坑：清除浮动 *//* 为了避免父元素因浮动子元素的原因导致高度不确定，需要清除浮动 *//* 推荐使用clearfix hack */.clearfix::after {
      content: '';
      display: table;
      clear: both;
}
/* 第六坑：移动端适配 *//* 推荐使用rem单位，以viewport为基准 *//* 也可以使用vw/vh单位 */html {
      font-size: 16px;
}
@media screen and (max-width: 768px) {
  html {
        font-size: 12px;
  }
}
/* 第七坑：字体问题 *//* 建议使用web安全字体 *//* 不建议使用字体单位，可能会导致样式错误 *//* 推荐使用@font-face引入自定义字体 */@font-face {
      font-family: 'myfont';
      src: url('myfont.woff');
}
/* 第八坑：兼容性问题 *//* 尽可能测试多个浏览器和设备 *//* 使用autoprefixer自动添加浏览器前缀 *//* 浏览器不支持的属性需要添加备选样式 */.box {
      display: flex;
      display: -webkit-flex;
      background: linear-gradient(90deg, #fff, #0000);
      background: -webkit-linear-gradient(90deg, #fff, #0000);
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！