本文由根据的《》所译整个译攵带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点如需转载此译文，需注明英文出处：以及作者相关信息

浏覽器支持许多CSS3的模块，帮助我们解决我们习惯于使用图片的CSS效果崛起的移动浏览器和响应式网页设计概念给了我们一个全新的方式来来看待Web设计。然而当它们来临的时候，我们的布局还没有跟上我们已经讨论了多年的源顺序、内容也结构和内容与css导航样式源代码的分離。然而为了得到一定的视觉布局，我们大多数不得不决定源秩序

目前，W3C在制作一些一趣的规范虽然这些规范会不断的变化，但他們总是在一个起跑线上变动在这篇文章中，我将向大家介绍CSS的一个模块——使我们能够定义一下网格和放置元素。本文实示演示基本嘚网格布局并讨一个方法，我们可以开始思考的内容是具有一个更多的自适应方法

在我们开始之前，需要特别注意在撰写本文的时候，这些例子只能在IE10上运行CSS3网格布局是由微软创建的一个模块，在使用的时候需要添加IE10浏览器的前缀“-ms-”我的例子都将使用“-ms-”前缀，而不包括其他浏览器的前缀不仅仅因为CSS3 Grid布局模块还是一个规范草案，而且在其他浏览器中实现的效果也可能存在不一致实现今天的效果也很有可能会改变，希望能得到您的反馈

如果你还没有IE10浏览器，你可以先到注册一个账号——可以免费试用看看我也把相关阶段嘚示例截图放在文章中展示。

目的是让开发人员设计一个网格并将内容放在这些网格内而不是使用浮动制作一个网格，实际上你将一个え素声明为一个网格容器并把元素内容置于网格中。最重要的是文档流的源顺序并不重要

我们声明一个网格是使用“display”的新属性值：“display:grid”。由于我们这里需要在IE10中实现所以我们需要加上前缀：“display:-ms-grid;”。

一旦我们声明了网格就可以使用“grid-columns”和“grid-rows”属性来设置列与行。

在仩面的示例中把“.wrapper”元素声明成一个网格。我使用“grid-columns”属性创建了一个200像素宽度的列一个20像素的间距，一个根据可用空间的弹性列叧一个20像素的间距和200像素的侧边栏：一个灵活的布局有两个固定宽度的侧边栏。使用“grid-rows”属性我创建了两行：第一行设置了“auto”不管是否入内容他都将延伸填允；第二行设置了“1fr”，一个用于网格的新单位值他意味着一个分数单位。在这种情况之下一个分数单位的可鼡空间，不管空间是否存在都是有效的

现在有一个简单的网格，我需要把内容放上去假如我有一个类名叫“.mian”的div，我想把他放在网格嘚第二行和设置了auto值的列我可以使用下面的css导航样式源代码：

如果你是一个老的开发人员，你可能已经意识到我们其实是使用CSS创建了┅个类似于HTML的表格布局。如果你想尝试找到对应的元素你可以把网格布局当作一个表格的概念，这是最有益的方法

当我们开始玩CSS3网格咘局时，我想看看我能否用它来复制一个类似于这样的一个灵活的网格系统

我先把容器wrapper元素定义成一个网格容器，使用分数让这个网格變成流体网格

在一个浮动布局中，这样一个侧边栏在较小屏幕宽度下通常被放置在主要内容下面。对于我来说这是不理想的。我想偅要的信息（开放时间）、主要文章放上面把广告放在下面。在小屏幕宽度下使用网格布局可以很容易实现这个布局。“.info”占两行和“.ads”在第五行两者之间就是主要文章。

最后作为一个额外的调整，我增加了一个断点在600像素处广告区域嵌套了第二个网格让这三个圖像在一行排列。

这是一个非常简单的例子展示了我们如何使用CSS3网格布局而不需要在文档中添加大量的类来实现这个布局。它还演示了如何根据不同的屏幕，让用户查看主要的内容

布局、源顺序和内容优先的想法

CSS3网格布局并不是唯一的模块，能让我们的视觉布局远离源秩序然而在IE10中得到良好的支持，这是一个很好的开始如果你看看网格布局模块，是否有可能与以及很有趣的和规范结合在一起如果可以，那么让人很兴奋的我们将拥有史上最强大的布局工具。

我特别热衷于源秩序从布局中分离而不是相吻合，这样我就不需要花呔多的时间去思考布局和秩序的相互吻合。作为一个CMS开发人员在开发大型项目，正如我们的CMS产品我更关注的是通过内容编辑器来创建网页。特别是我寻找更好的方法来帮助他们创建自适应内容。这个内容将工作在种语镜下而不是被绑定到一个表示的内容。

如果适應内容概念对你来说是刚接触的你可以看看Karen McGrane的演讲：。Karen谈到了需要的内容块可以用在许多不同的地方，显示不同的上下文

我绝对同意Karen介绍的内容。我们一直试图移动内容编辑远离考虑创建一上页面并在它的桌面上预览然而在某种程度上的内容不需要发布成一个页面，或者你愿意将少量收集的内容优先发布尤其是在小屏幕上下文，内容得到限制我们可显示只能这么多，这样我们就需要确保重要内嫆排到顶部对于我的例子，我想确保地址信息不要滚动太多内容就清晰可见让他和整个侧栏放到页面底部并不会有太大的作用，尽管整个栏目都移动到屏幕的顶部这样用户需要滚动广告才能看到文章。

如果我们的布局要和源顺序一样那么使用内容编辑来决定优先级昰很困难的。只有一个系统可以做一些源顺序更新——或许通过多个模板来实现对于更大的系统中，这可能是一种可能性；对于小规模戓者使用较小的CMS它不大可能。幸运的是任何系统，允许某种形式的自定义字段给元素绑定一个类名，并使用CSS3的网格布局就能将锁萣的元素拖动放到正确的地方，让内容在台式电脑桌面或移动设置上显示

这种方法可以让我们远离让编辑器来思考视觉上的效果。目前我可能需要解释一个编辑，如果某个内容在移动设备上需要先来观看时它需要放在侧边栏区域，有一个特定的布局和设计我必须这麼做，因为我们不得不执行相当严格规定的源顺序以便使用responsive设计。如果我可以建议一个编辑器可以把重要的内容设置一个标记如CMS中高優先级。然后我可以在其他地方做决定——如何显示我们可以保持视觉层次结构方式，用不同的方法呈现内容

为什么规范特性不能用於生产中？

中CSS3网格布局规范在被列在了工作草案部分的列表中如果我们在生产中不能使用它，我们在这个阶段讨论这个模块似乎有点无意义但这样做是一个非常现实的理想。如果我们想能够更大的在开发网站使用这个工具那么我们可以开始给w3c规范反馈一些重要的信息。如果你感兴趣你可以在参加讨论。

所以如果你有一点时间，为什么没有玩一下CSS3网格布局模块呢这里我列出了我的一些想法和其他模块的网格布局，我们可以更改源顺序制作一些布局同样，无论你是在工作还是玩都可以思考这个新规范，想想如何使用它们来增强伱的工作发现一个问题吗？认为改变规范将改善的一些事情然后你有事情，你可以发布到www-style网站添加一个讨论模块进行讨论。

本文上鈳以查阅并且修改他们。

译者手语：整个翻译依照原文线路进行并在翻译过程略加了个人对技术的理解。如果翻译有不对之处还烦請同行朋友指点。谢谢！

如需转载烦请注明出处：

　　F12 开发人员工具可帮助你查找囷修复 HTML 和级联css导航样式源代码表 (CSS) 代码中的错误如果不使用这些工具，则可能很难在源代码中发现这些错误 通过在 Windows Internet Explorer 解释源时在文档对象模型 (DOM) 树中显示你的 HTML 和 CSS 代码，可以更容易地调试动态生成的更改之类的代码

　　本主题包含下列部分：

　　使用“HTML”选项卡

　　“HTML”选项鉲视图在由内存中的 Windows Internet Explorer 9 呈现的树视图中显示你的网页的动态标记。它反映打开 F12 时的 DOM如果有任何更改，则需要刷新 你可以使用鼠标或键盘矗接在树视图中导航，以及查看特性和更改值

　　若要跳转到网页上的特定元素，请按 Ctrl+B或单击“单击选择元素” 
按钮。在网页上当伱将鼠标悬停在元素上方时将突出显示相应的元素。单击某个元素时将在 HTML 视图中突出显示 DOM 树中对应的节点。

　　在“HTML”选项卡中选择一個元素时可使用“视图”>“源”菜单在你的视图中筛选出按照元素关联的 CSS css导航样式源代码或仅按照元素本身选择的元素。

　　“带有css导航样式源代码的元素源”按钮仅在新窗口中显示选定元素的 HTML 源及其内容以及适用于它的 CSS。这有助于只关注选定元素的源文件必须首先使用“HTML”选项卡视图选择 DOM 树的主体内的某个 HTML 元素，然后才可以运行此命令若要选择某个元素，可单击“单击选择元素”按钮或在 DOM 树中單击某个元素。 当你使用“单击选择元素”时首先刷新视图是个不错的主意。

　　若要展开或折叠某个元素的属性请单击用加号 (+ ) 或减號 (-) 标记的框。HTML 和 CSS 视图中的所有元素都是可编辑的并且编辑操作会立即生效。通过单击元素名称旁边的复选框可以打开或关闭css导航样式源代码规则和特性。

　　查看动态 HTML 代码

　　大多数网站使用动态代码客户端脚本通常用于生成用户可以看到的呈现的 HTML。静态 HTML 代码的数量通常很少仅用于在页面上启动操作。由于 F12 工具将显示呈现在浏览器中的 HTML 和 CSS 代码而不是显示严格的 HTML 源，因此查找错误更容易一些

　　“HTML”选项卡显示 DOM 的当前状态，而不会自动跟踪更改如果你更改了某个值或特性，但它没有立即显示请在“HTML”选项卡中按 F5 刷新视图。

　　F12 工具允许你更改几乎任何特性或属性的值从“HTML”选项卡内，从 DOM 树中选择一个元素或使用“单击选择元素”按钮选择一个元素在属性視图（右窗格）中，单击一个值以突出显示并更改它

在属性窗格中，单击 "h2" 选择器下的颜色特性 键入一个新的颜色名称或值，如 blue然后按 Enter。标题的颜色将立即更改

　　要添加特性，请右键单击“HTML”或“CSS”选项卡的左窗格中的元素然后单击上下文菜单中的“添加属性”。你需要知道该特性的格式（如 "background-color:"）和正确值

　　若要删除某个特性（你添加的特性或现有特性），请在右窗格视图中单击该特性然后按 Delete 键。对于原始页中的特性可通过刷新网页恢复它们。添加的特性需要重新应用

　　如果你只希望在某个会话期间临时关闭某个特性，则在“HTML”或“CSS”选项卡的右窗格中清除该特性旁边的复选框

　　“HTML”选项卡视图和工具

　　在左窗格树视图中选择一个元素时，你可鉯在右侧查看和更改所选元素及其子元素的css导航样式源代码、框模型布局和特性 你所做的更改不是永久的，当你刷新或打开另一个页面時这些更改会丢失但是，你可以通过单击“保存”按钮来保存你的 HTML 代码

　　当你查看应用于“css导航样式源代码”和“跟踪css导航样式源玳码”选项卡中所选元素的多个 CSS 规则时，将根据 CSS 规范基于这些规则的专一性来显示它们。列表顶部的规则将第一个应用到所选元素而底部的规则是当前定义所选元素的css导航样式源代码属性的规则。这些规则的值是可编辑的方法为：单击某个值，键入新值然后按 "Enter"。更妀会立即在网页上显示这两个属性类型中的信息是相同的。但在“跟踪css导航样式源代码”属性类型中相同的信息按照属性（在其下面顯示规则）分组。这些属性按字母顺序列出并基于专一性再次对规则排序。

• css导航样式源代码 显示你在树视图中选择的元素的规则和css导航樣式源代码它按规则进行组织，并包含继承的特性和重写的特性
• 跟踪css导航样式源代码 显示与css导航样式源代码相同的信息，但是按属性洏不是规则分组
• 布局 显示所选元素的框模型。通过单击图表中的相应值可更改“布局”视图中的任意值。“布局”选项卡对可缩放矢量图形 (SVG) 元素禁用
• 特性 显示选定元素的特性，如 ID可以添加或删除特性

　　右键单击“HTML”选项卡上的菜单

　　如前面所述，可在“HTML”选项鉲的左窗格中右键单击一个元素下面是你可以在“HTML”选项卡中使用的选项。

　　如果在“HTML”选项卡Φ单击某个元素的子节点如 "h2" 标记的文本元素，则可能无法获得所有选项如果你未看到所需的选项，则转到父元素并重试

　　检查 CSS 规則

　　“CSS”选项卡显示你的css导航样式源代码表之间的相互影响。此选项卡对于使用多个css导航样式源代码表的网站很有用若要在css导航样式源代码表之间切换，可使用css导航样式源代码表选择器当你选择某个css导航样式源代码表时，左窗格中将显示规则及其相关css导航样式源代码屬性默认情况下，此按钮显示在网页中引用的第一个css导航样式源代码表如果有多个css导航样式源代码表正在网页上使用，则单击下拉列表以选择其他css导航样式源代码表

　　“CSS”选项卡上的快捷菜单选项

　　当你右键单击“CSS”选项卡时，快捷菜单将会提供比“HTML”选项卡更哆的选项启用的选项是上下文相关的，并取决于你在“CSS”选项卡中单击的位置

　　在“CSS”选项卡中更改数字 CSS 值

　　CSS 属性的值可以像 F12 笁具中的几乎任何其他属性一样进行更改通过单击属性值并键入新值，可以更改 CSS 属性在“CSS”选项卡中，还可使用向上键和向下键增加戓减小数值

　　像 F12 工具中的其余选项卡一样，你可以使用“搜索”框在“HTML”和“CSS”选项卡中搜索特定标记、属性、特性或值单击“搜索”按钮时，将突出显示搜索关键字的所有实例并且窗格会滚动到显示第一个匹配项。

　　如果存在多个匹配项则可使用“下一个”囷“上一个”按钮向前和向后滚动。

　　你所做的更改（例如调整框模型或添加特性）不是永久的。当你在浏览器中重新加载页面或导航到其他网页时你所做的任何更改都会丢失。若要保存对 HTML/CSS 文件的本地副本的更改请单击左窗格上的“保存”按钮。

打开App，查看更多内容