分享20个CSS技巧提升自己CSS技能

时间:20-02-11 04:45 责任编辑: admin 来源:电脑吧 点击:

  随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常见的问题。

分享20个CSS技巧提升自己CSS技能

  1、使用CSS重置(reset)

  css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则,可以通过一条简单的规则来应用于布局中的所有元素,删除所有的margin、padding改变浏览器默认的盒模型。

  *{

  box-sizing:border-box;

  margin:0;

  padding:0

  }

  使用box-sizing声明是可选择,如果你使用下面继承的盒模型形式可以跳过它

  2、继承盒模型

  让盒模型从html 继承:

  html {

  box-sizing: border-box;

  }

  *, *:before, *:after {

  box-sizing: inherit;

  }

  3、使用flexbox布局来避免margin的问题 (Get Rid of Margin hacks width Flexbox)

  当你多少次试着去设计栅格布局如:组合或者图片画廊,如果使用浮动的方式,那么就需要去清除浮动和重置外边距来使其分解成所需要行数。为了避免nth-、first-、last-child 问题 ,可以使用flexbox 的space-between 属性值

  .flex-container{

  display:flex;

  justify-content:space-between;

  }

  .flex-container .item{

  flex-basis:23%;

  }

  4、使用:not() 解决lists边框的问题

  在web设计中,我们通常使用:last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。比如说一个导航菜单,通过使用borders 来给每个链接Link创建分割符,然后再在加上一条规则 解除最后一个link的border

  .nav li {

  border-right: 1px solid #666;

  }

  .nav li:last-child {

  border-right: none;

  }

  这是一种很混乱的方式,它不仅强制浏览器以一种方式渲染,然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而,最重要的是,我们可以通过使用:not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式:

  .nav li:not(:last-child) {

  border-right: 1px solid #666;

  }

  上面就是,除了最后一个li以外,所有的 .nav li 都加上了border样式,是不是很简单! 当然,你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 :not是更有语义化(semantic)和容易理解的。

  如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

  5、body上加入line-height样式

  导致低样式效率(inefficient stylesheets)的一件事就是不断的重复声明。最好是做下项目规划和组合规则,这样CSS会更流畅。实现这一点,就需要我们理解级联(cascade),以及如何在通用选择器写的样式可以继承在其他地方。行间距(line-height)可以作为 给你的整个项目设置的一个属性,不仅可以减小代码量,而且可以让你的网站的样式给一个标准的外观

  body {

  line-height: 1.5;

  }

  请注意,这里的声明没有单位,我们只是告诉浏览器 让它渲染行高是 渲染字体大小的1.5倍

  6、垂直居中任何元素 (vertical-center anything)

  在没有准备使用CSSGrid 布局的时候,设置垂直居中布局的全局规则是一个很好的方式,可以为优雅(elegantly)的设置内容布局奠定一个基础

  html, body {

  height: 100%;

  margin: 0;

  }

  body {

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  display: -webkit-flex;

  display: flex;

  }

  这15种CSS居中的方式,你都用过哪几种?

  7、使用SVG icons

  SVG使用于所有分辨类,并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG的图标字体。设置SVG的格式就跟其他图片类型一样:

  .logo {

  background: url("logo.svg");

  }

  温馨提示:如果将SVG用在可交互的元素上比如说button,SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到(确保在HTML中已设置适当的aria属性)

  .no-svg .icon-only:after {

  content: attr(aria-label);

  }

  如何提升你的CSS技能?掌握这20个css技巧即可[完整版]

  8、使用 “OWL选择器”

  使用通用选择器(universal selector)* 和相邻的兄弟选择器(adjacent sibling selector)+ 可以提供一个强大的的CSS功能,给紧跟其他元素中的文档流中的所有元素设置统一的规则

  * + * {

  margin-top: 1.5rem;

  }

  这是一个很棒的技巧,可以帮你创建更加均匀的类型跟间距。在上面的列子中,跟在其他元素后面的元素,比如说H3后面的H4,或者一个段落之后的一个段落,他们之间至少1.5rems的间距(大约为30px)

  9、一致的垂直结构(Consistent Vertical Rhythm)

  一致的垂直节奏提供了一种视觉美学,使内容更具可读性。如果owl选择器过于通用,请在元素内使用通用选择器(*)为布局的特定部分创建一致的垂直节奏:

  .intro > * {

  margin-bottom: 1.25rem;

  }

最新更新

视觉焦点

新闻排行

  1. 电脑蓝屏代码0x000007B如何解决?
  2. Win XP桌面快捷键变成.lnk文件如何解决?
  3. 怎么样删除IE工具栏上其他网站链接呢?
  4. Winxp系统netcfg.hlp文件丢失找不到如何解决?
  5. WinXP桌面图标存在着蓝色阴影如何修复?
  6. XP电脑文件名变成蓝色了怎么回事?
  7. winxp如何取消开机磁盘扫描?
  8. 解决activex部件不能创建对象的两个办法
  9. xp系统出现“无法识别的USB设备”如何解决?
  10. xp系统提示“没有找到comres.dll”如何解决呢?