html图片布局工具栏,页面布局（CSS）：页头区域里的工具栏《 从设计到代码：布局设计 》...

现在这个在页头上显示的工具栏里面只有一个项目，我们再给它添加一个，找到 toolbar 这个容器，复制一份它里面的这个 toolbar__item 元素。

这样顶部工具栏会出现两个叠加到一块儿的项目。这里我们要让它们水平排列。 回到项目，在 assets/css 里面，新建一个样式表，名字叫 toolbar.css。

在这个 layout 文档里，链接刚才创建的这个 toolbar 这个样式表。 把这个样式表标签放在编辑器的上面。 在这个样式表里，设计一下 toolbar 这个类的样式，把 display 属性设置成 flex，让它变成一个 flexbox， 这样这个容器里包装的元素默认就会水平排列了。

我们可以试着把这个 flex-direction 的值是 column， 如果 flex 的方向是 colum，它里面的元素就会叠加到一块儿，默认这个属性的值应该是 row ，这样元素就会水平排列。

下面再给工具栏项目添加点样式，这些项目的上面都有一个 toolbar__item 类，用它作为样式选择器，里面用 margin-left ，在元素的左边添加点外边距，大小是 24 像素。

通常这些工具按钮项目里面都会用到链接，找到其中一个工具栏项目，在里面添加一个 a 标签，地址是 #，同样在下面这个项目里也添加一个 a 标签，地址也是 # 号。

回到浏览器，打开浏览器的开发者工具，打开 Elements 选项卡，选中页面上工具栏上的某个项目里的这个 a 标签，因为这个 a 标签是个行内元素，所以在它里面没有内容的时候它的宽度与高度的值都是 0 。

这里我希望它的宽高是包装它的这个容器的宽还有高。所以可以把这个 a 元素转换成区块元素。

在 toolbar 这个样式表里，设置一下 .toolbar__item 下面的 a 标签的样式，把 display 属性的值设置成 block，这样这个元素就会成为一个块级元素。 然后用 height ，把元素的高度设置成 100% 。

回到浏览器，观察一下这个工具栏项目里的 a 标签，你会发现，这次它的宽度还有高度就是包装它的这个容器的宽度还有高度。