样式表有两个主要目标。首先，我们想利用像Flexbox这样的现代CSS特性来设计我们的UI。其次，我们希望采取一些小步骤，使应用程序的外观和感觉更像一个真实的web应用程序(参见图3.6)。
图3.6 我们的应用程序已经使用CSS的现代特性给出了一些基本的样式。
box-sizing属性在CSS中处理一个历史上的奇怪现象，在一个宽度为200像素的元素中添加50个像素的填充将导致它的宽度为300像素(每边添加50个像素的填充)，对于边框也是一样。
当box-sizing被设置为border-box时，我们的元素会考虑到我们设置它们的高度和宽度。总的来说，这是一件好事。在这个CSS规则中，我们还让所有其他元素和伪元素都尊重我们通过将box-sizing设置为border-box所做的艰苦工作。
我们希望我们的应用程序能够适应本地应用程序。朝着这个方向迈出的重要一步是使用所有其他应用程序都使用的系统字体。例如，尽管macOS在整个操作系统中使用San Francisco作为默认字体，但它不能作为常规字体使用。我们将font属性设置为menu，它依赖于操作系统来使用它的默认字体——即使我们无法访问它。
浏览器在当前活动的UI元素周围设置一个边框。在macOS中，这个边框是蓝色的辉光。您可能从未过多地考虑过它，因为我们已经习惯了在web上使用它，但是当我们开发桌面应用程序时，它看起来并不合适。在我们的应用程序中，它看起来尤其糟糕，其中一半的UI实际上是一个大型文本输入。通过将outline设置为none，我们删除了活动元素周围的非自然辉光。
在.content、.raw-markdown和.rendered-html规则中，我们实现了一个简单的Flexbox布局，这将使我们的应用程序看起来更像我们在图3.1中介绍的效果。content类的元素将包含我们的两列。我们将display属性设置为flex，以使用前面讨论的Flexbox技术。下一步，我们设置flex- growth，它指定flex项的增长因子， 当然可以。把它看作元素的尺度相对于它的兄弟元素可能是有帮助的。在本例中，我们使用Flexbox将两列设置为相等的比例。
优雅地显示浏览器窗口
如果你仔细观察你的应用程序的启动，您将注意到，在Electron加载index.html并在窗口中呈现DOM之前，窗口完全为空。用户不习惯在本地应用程序中看到这种情况，我们可以通过重新思考如何启动窗口来避免这种情况。
如果您认为应用程序第一次启动时的虚无闪光是无意义的，考虑主进程中的代码:它创建一个窗口，然后在其中加载内容。如果我们隐藏窗口直到内容被加载呢?然后，当UI准备好时，我们显示窗口，并避免短暂地暴露一个空窗口。
列表3.5 当DOM就绪时优雅地显示窗口
app.on('ready', () => {//使用默认属性创建一个新的BrowserWindow
mainWindow = new BrowserWindow({
show: false,
webPreferences: {
// webPreferences中的nodeIntegrationInWorker选项设置为true,Electron5.x以后,缺省为false
nodeIntegration: true
}
})
//在刚才创建的BrowserWindow实例中加载app/index.html
mainWindow.loadFile('app/index.html');
mainWindow.once('ready-to-show', () => {
//当DOM就绪时显示窗口。
mainWindow.show();
});
mainWindow.on('closed', () => {
//在窗口关闭时将进程设置为null
mainWindow = null;
});
});