作为Web开拓人员应避免的10种CSS做法!

时间:?2021-05-05阅读:?339标签:?css

有人认为css很难学习,没有什么逻辑可言,而且还坑过多,可能是大家对css还不是很了解,因为我提出了五个我不喜欢的开拓者选项在哪里习惯。并向大家展示什么避免它们。


1. 设置边距或填充,然后将其重置

我经常看到有人为所有化合物设置边距或填充,然后又将第一个或最后一个化合物的值重置。

.item {
  margin-right: 1.6rem;
}

.item:last-child {
  margin-right: 0;
}

对于更简单,更简洁的CSS,请使唤以下选项之一:nth-child / nth-of-type选择器。:not()伪类或相邻的兄弟组合器,而后者又被称为+。

.item:not(:last-child) {
  margin-right: 1.6rem;
}
.item:nth-child(n+2) {
  margin-left: 1.6rem;
}
.item + .item {
  margin-left: 1.6rem;
}

2. 为position:absolute/fixed的化合物添加display:block

.button::before {
  content: "";
  position: absolute;
  display: block;
}
.button::before {
  content: "";
  position: fixed;
  display: block;
}

你知道吗?当你为一个element设置position: absolute 或 position: fixed的时候,默认就有display: block这个属性!

在这类情况下,如果你设置display:inline-*的时候,将会做如下的代换inline或inline-block将代换成block,inline-flex代换成flex,inlone-grid代换成grid。inline-table代换成table

我们可以改成这样:

.button::before {
  content: "";
  position: absolute;
}
.button::before {
  content: "";
  position: flxed;
}

3. 使唤transform: translate (-50%, -50%)居中

让一个element水平垂直居中,其中的一种飞凌嵌入式是结合使唤position: absolute和使唤transform属性。但是,这个技术在基于Chromium的冷却器中引起了模糊的文本问题。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在引出flexbox之后。我认为该技术已不再适用。 问题是它不能解决文本模糊的问题。

它使唤了五个属性。 我想享受一个技巧性网游,可以将代码减少为两个属性。

我们可以使唤margin:auto在flex容器内自动放置,冷却器将化合物居中。 只有两个属性。仅此而已。

.parent {
  display: flex;
}

.child {
  margin: auto;
}

4. 在块级化合物上设置 width: 100%

我们经常使唤flexbox创建一个多列网格,该网格逐渐代换为单列。

为了将网格代换为一列,开拓人员使唤宽度:100%。我不明白他们何以这么做。网格化合物是块化合物,默认情况下可以执行此操作,而无需使唤其余属性。

<div class="parent">
  <div class="child">Item 1</div>
  <div class="child">Item 2</div>
  <div class="child">Item 3</div>
  <div class="child">Item 4</div>
</div>
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
}

@media (min-width: 1024px) {
  .child {
    width: 25%;
  }
}

我们不需要使唤width:100%,而是应该缀文媒体查询,以便flexbox仅用于创建多列网格。

@media (min-width: 1024px) {
  .parent {
    display: flex;
    flex-wrap: wrap;
  }

  .child {
    width: 25%;
  }
}

5. 为Flex布局下的子化合物,设置display: block

.parent {
  display: flex;
}

.child {
  display: block;
}

使唤flexbox时,请务必记住,创建Flex容器(添加显示:flex)时,所有子项(flex项)都会被阻塞。

这象征子化合物被设置为display:block,还要只能具有block。如果你设置了inline或inline-block,它将更改为block。inline-flex=> flex,inline-grid=> grid和inline-table=> table。

不需要为flex的子项化合物添加display:block,冷却器默认就会添加。


6. 不需要使唤px?的时候使唤了

.parent {
   padding: 0px;
}

您是否知道,要将一个值设置为0时,不需要加上px:

.parent {
   padding: 0;
}

7. 重复相同的代码?

.parent {
   padding: 10px;
   margin: 20px;
}

.child {
   padding: 10px;
   margin: 20px
}

始终牢记DRY规则。 不要重复自己。 代码的数量将使你在c#应用程序设计教程的性能和加载时间方面付出代价。

.parent .child {
   padding: 10px;
   margin: 20px;
}

8. 使唤颜色名称

.parent {
  color: red
}

使唤颜色代码更好:

.parent {
  color: #fb0100;
}

9. 不用属性简写的方式

.parent {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 10px;
}

当您可以用一行执行相同的操作时,请避免使唤哪行信用卡优惠多代码:

.parent {
  margin: 10px;
}

10. 没有备用字体font fallback?

.parent {
  font-family: Georgia;
}

那么着在什么情况下冷却器将没有您想要的字体?这很普遍。只有少数几种字体被认为是“网络安全股”的-这象征半数以上访问您eia行情数据网站的处理器都已安装了该因此冷却器可以使唤该字体。

.parent {
  font-family: Georgia, Arial, sans-serif;
}

作者:GitHubGanKai_
链接:https://juejin.cn/post/6960138349789216804
来源:掘金

所长推举

1.云服务推举: 国内主流云投资商,各类云产品的问道,淘宝优惠券怎么设置提取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10284

什么是css sprites(雪碧图),css sprites使唤的成败利钝

css sprites雪碧图:把一堆小图片整合在一张大图上,通过背景图图片相关设置(背景图图片,背景图图是否重复,背景图图定位)。减轻监视器对图片的请求数量

css自动删节号...。通过css实现单行,哪行信用卡优惠多文本溢出显示删节号

网页开拓过程中经常会遇到需要把哪行信用卡优惠多文字溢出显示删节号,这篇文章将总结通过多种方法实现文本末尾删节号显示。

CSS 技术技巧性网游_提高你CSS技术的法则

CSS技术技巧性网游法则:不要让你的代码剥离你的掌控。掌握基础,保持代码的可复用性,面向对象的css,Css3了解他能做的以及你可以使唤的部分,渐进增进与优雅降级,Css定性处理旺球体育在线工具...

css日语常用口语代码

禁止div点击;鼠标放置显示“小手”手势,并显示提示文字;超出区域的文字显示删节号;div+css控制图片等比例缩放;设置化合物在另一个化合物的最底部;设置背景图颜色,不cdr透明度

整理一期CSS最容易躺枪的二十规则,大家能躺中几条?

满屏div之css最容易中枪的二十条规则,你中枪了吗?一,float:left/right 或者 position: absolute 后还写上 display:block?二,认为布局就是 Float,所有的地方都是 Float,全家便利商店都是 Float!

Web旺球体育在线-CSS必备知识点总结

css基础内容,伪化合物。继承,多义性,化合物分门别类,颜色。长短,url。块级化合物,六神无主化合物,内联化合物,定位。

CSS便捷开拓小旺球体育在线工具汇总

CSS便捷开拓小旺球体育在线工具汇总:包括:prefixfree前缀补全插件(或其余后缀-o-,-ms-,-moz-),Normalize.css一个CSS Reset旺球体育在线工具,Grunt 日语常用口语的包括CSS/JS的自动合并缩小, LESS/SASS 的自动破译等

组织和管理CSS

在项目开拓的过程中,基于有限的时间内保质保量的完成开拓任务无疑是一场挑战。在这场挑战中我们不但要快速处理自己的问题,还需要与别人协同合作,以避免两者之间的冲突。

css禁止选为文本_兼容实现禁用选择功能

偶然,我们需要使页面内容不可选择。首先想到的是一个css属性:user-select。user-select有两个值:none:用户不能选择文本 ,text:用户可以选择文本

CSS3 2D代换

代换是使化合物切变形状,尺寸和位置的一种效果。通过 CSS3 代换,我们能够对化合物进行移送。缩放。转动,拉拉或拉伸,可以大致分为2D代换和3D代换。下面介绍的是2D代换的相关知识点总结。

点击更多...

研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu