学习验证布局的CSS技巧

今天你吸猫了么
65 阅读4分钟

验证布局的CSS技巧

作为一个前端开发员，我花了很多时间处理设计，确保产品设计看起来和Sketch文件完全一样，然而，这项任务，虽然听起来很琐碎，但会让我很头疼。但为什么呢？

尽管在过去的几年里，网页设计发生了很大的变化，而且情况也越来越好，但每个浏览器呈现某些布局的方式仍然有很多不同，当你需要考虑对IE的支持时，这种情况就会变得非常严重。有了足够的经验，你产生的布局错误类型就会减少，然而，它们仍然会发生。也许我一开始就没有写完全不兼容的代码，但错位是会发生的，我们需要好的方法来处理它们。

处理填充、边距和布局结构

当网页结构中有很多移动的部分时，出现的问题是你不容易区分一个部分的开始和结束，因为也许它们都有相同的背景颜色，或者它们没有任何边框，这些使你很难调试例如文本可能适合的区域，如果你不是很小心，可能会导致一些奇怪的设计问题，特别是当我们在处理不同窗口尺寸时。这是一个常见的问题，当开发者为他/她的屏幕做了一切漂亮的东西，然后当我们进入另一台电脑时，事情就变得有点混乱了。

根据我的经验，我看到了2种识别和解决这些问题的方法，在进入我通常的做法之前，我想先解释一下。

1.更新特定对象的样式

如果你不确定我在说什么，我指的是做这样的事情。

<div style="background-color: red;">.......</div>

重新加载页面，检查我们需要的东西，删除代码，并测试另一个对象。其实并不理想。

2.Chrome开发工具

识别这类问题的一个更好的方法是使用Chrome开发工具，它可以轻松地让你用鼠标导航，看到每个元素的尺寸、边距和填充。

image.png

浏览器开发工具

尽管有时我使用Chrome开发工具，而且我相信这是一个很好的工具，但有一个简单的CSS技巧，当我需要对我的布局进行处理时，我喜欢使用。

html * {
  background: rgba(255, 0, 0, .1);
  box-shadow: 0 0 0 1px red;
}

非常简单和强大，但它到底是做什么的呢？让我给你看一个应用这个技巧后的网站的例子。

image.png

布局亮点

当然，你不应该把这段代码运到生产中去，但简单一看，它可以让你看到每个组件和它的边界。它非常简单，而且帮助很大。你可以自由地使用你选择的任何颜色，你可以通过应用类来启用/禁用这段代码，不过我把这个问题留给你，因为这在很大程度上取决于你是否使用框架，或者是哪个框架。

错位

你有没有听说过 "左边的标题比右边的内容高2px "这样的话？当你遇到这种情况时，通常我们会开始添加边框，以确保一切正常，但有时添加边框是根本不可能的，因为网站布局的方式。当这种情况发生时，我们放大并验证它，如果两组之间的距离太长，我们的眼睛无法验证它，我们就拿一把尺子或纸，把它放在屏幕上测量。这个黑客技术真的没什么不好，我现在还在做，不过我在不久前学到了一个CSS技巧，我想和大家分享一下。

html {
  background: url("data:image/svg+xml;base64,IDxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgPGRlZnM+CiAgICAgIDxwYXR0ZXJuIGlkPSJzbWFsbEdyaWQiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgPHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iZ3JheSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KICAgICAgPC9wYXR0ZXJuPgogICAgICA8cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgIDxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3NtYWxsR3JpZCkiLz4KICAgICAgICA8cGF0aCBkPSJNIDEwMCAwIEwgMCAwIDAgMTAwIiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPgogIDwvc3ZnPg==");
}

html body {
  opacity: 0.8;
}

你可能想知道那个背景是什么，是下面这个SVG的base64表示。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
      </pattern>
      <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100" height="100" fill="url(#smallGrid)"/>
        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" />
  </svg>

那它到底对我们有什么帮助呢？请看这里的例子。

image.png 布局网格

这段代码只是将一个网格作为背景，所以我们可以用网格作为参考。

总结

处理布局问题是很痛苦的，我自己每天都在挣扎，然而，这些简单的技巧在我的日常工作中帮助了我。我知道有些人可能会指出，外面有一些扩展可以做类似的事情，但是，我更愿意把我的扩展保持在最低限度，只安装那些对我的工作流程必不可少的、我真正信任的。

avatar
文章
阅读
粉丝