ruby是用什么语言实现的 display的32种写法(2)

border-radius: 5px;

background-color: #e3fafc;

width: 400px; padding: 5px; } .item {

height: 100px;

width: 100px;

background-color: #1098ad;

border: 1px solid #0b7285;

border-radius: 5px; }

结果因为你想让那一行字上去，于是你给.item加了一个float: left;结果就成这样了，外容器高度掉了，这不是很常犯的错误吗？

现在我们给.container加上display: flow-root;再看一下：

喏，外容器高度又回来了，这效果是不是杠杠的？

那位同学说，我们用clear: both;不是一样可以达到这效果吗？

.container::after {

content: '';

clear: both;

display: table;}

小明，请你出去！我们在讲display: flow-root;，不是在讲clear: both;！

display: table;

这一个属性，以及下面的另外8个与table相关的属性，都是用来控制如何把div显示成table样式的，因为我们不喜欢<table>这个标签嘛，所以我们想把所有的<table>标签都换成<div>标签。

<div>有什么好？无非就是能自动换行而已，但其实你完全可以做一个<table><tr><td>标签，把它全都替换成display: block;也可以自动折行，只不过略微麻烦而已。

关于display: table;的详细用法，大家可以参考这篇文章，这里就不细说了。

display: flex;

敲黑板，划重点！作为新一代的前端工程师，这个属性你必须烂熟于胸衣中，哦，错了，是胸中。

display: flex;以及与它相关联的一系列属性：flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content，并且包括所有这些属性的取值，都是你需要反复研磨的。

2009年诞生的这个属性可以说是不亚于css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的float被彻底抛进历史的垃圾堆。

关于它的详情，会中文的可以参考阮一峰的这篇文章，但我认为，格式编排的更好还是csstrick上的这篇文章。

没有一张图能完整地展现flex的神韵，就放这张我比较喜欢的图片吧：

display: grid;

会flex很吊吗？会grid更吊哦！也许这就是下次前端面试的重点哦！

grid布局，中文翻译为网格布局。学习grid布局有两个重点：

一个重点是grid布局引入了一个全新的单位：fr，它是fraction（分数）的缩写，所以从此以后，你的兵器库里除了px, em, rem, 百分比这些常见兵器以及vw, vh这些新式武器之外，又多了一样旁门暗器fr，要想用好grid，必须充分掌握fr。

另一个重点是斜杠操作符，这可不是分数哦。它表示的是起始位置和结束位置。比如说3 / 4，这可不是四分之三的意思，这是指一个元素从第3行开始，到第4行结束，但又不包括第4行。

同样，与grid相关联的也有一大堆旁门属性，是在学习display: grid;的同时必须掌握的。

包括：grid, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template, grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column-gap, grid-row-gap, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-column, grid-row。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-85432-2.html