，你知道“会”字有四种写法，但你知道display有32种写法吗？今天我们就一一道来，让你一次完全掌握显示器，再也不用担心了。大分类的话，显示的32种写法可以分为6类，加上1个全局类，一共7类：外部值内部值列表值属性值显示值混合值全局值外部值所谓外部值是指这些值只会直接影响一个元素的外部性能，而不会影响元素内部子级孙级元素的性能。显示：块；这个值大家都很熟悉。我们最熟悉的
的默认值就是这个值。最基本的块级元素属于CSS初学者所熟知的概念。只要是容器类型的元素，基本都是这个值。除了bbb
.a{font-size:36px;display:run-in;}什么是使用？我们可以通过设置font-size和span来实现这个效果，让IE自己玩吧！说实话，在人力资源如此宝贵的今天，IE的产品经理们脑子进水了都不知道。与其派工程师去实现那么多比这重要得多的功能，他们还花时间做这么没用的东西。男孩，工程师的时间不是金钱吗？难怪市场份额逐年下降。内在价值观说完外在价值观，我们再来看看内在价值观。这组数值还是挺有意思的。在css3如日中天的今天，如果你不能玩转这些价值观，你可能找不到工作。内部值主要用来控制其下属子级元素的排列方式，规定它们要么排列成S形，要么排列成B形。显示：流量；意思不明确，是实验室阶段的产品，Chrome不支持。如果还不足以说服你暂时不要碰它，试着理解下面的英文文本：Ifitsouterdisplaytypeisinlineorrun-in,anditisparticipatedinablockorinlineformattingcontext,thenitgenerates一个内联框。否则生成块容器box.display:flow-root;和刚才说的flow不同，现在越来越多的人用flow-root，因为它可以支持你飘走的块级元素的高度。外层容器有一个高度，像这样：background-color:#e3fafc;width:400px;padding:5px;}.item{height:100px;width:100px;background-color:#1098ad;border:1pxsolid#0b7285;border-radius:5px;}结果是因为你想让那条线往上走，所以你加了一个float:leftto.item;结果是这样的，外层容器的高度下降了，这不是很多人常犯的错误吗？现在我们将display:flow-root添加到.container；再看看：这里，外容器的高度又回来了，这个效果是不是杠杆了？同学说，我们不能用clear:both;吗？达到这个效果？.container::after{content:'';clear:both;display:table;}小明，请出去！我们说的是display:flow-root;，不清楚：both;！显示：表格；这个属性，还有下面其他8个表格相关的属性，是用来控制如何把div显示成表格样式的，因为我们不喜欢，还有到
到、
、
| 标签，全部替换成display:block;也可以自动换行，就是有点麻烦。display:table;的详细用法可以参考这篇文章，这里不再赘述。显示：弹性；敲黑板，画重点！作为新一代的前端工程师，你一定对胸罩这个属性不陌生，哦，错了，是在胸口。显示：弹性；以及与之相关的一系列属性：flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content，所有这些属性的取值由你自己决定，需要反复磨合。这个2009年诞生的属性，可以说是不亚于css世界蒸汽机诞生一样的一次工业革命。它那漂浮的胎记，如同一辆马车，已经彻底被扔进了历史的垃圾场。关于它的细节，会说中文的可以参考阮一峰的这篇文章，但我认为更好的格式是csstrick上的这篇文章。没有一张图能充分展现flex的魅力，所以放这张我比较喜欢的图：display:grid;flex会不会很悬？网格将挂得更多！说不定这就是下一次前端面试的重点！网格布局，中文翻译是网格布局。学习网格布局有两个重点：一是网格布局引入了一个全新的单位：fr，是fraction（分数）的缩写，所以从现在开始，除了px，em，rem，percentage等.在你的武器库里除了vw、vh等武器和新武器，还有一个侧门暗器fr。要想用好网格，就必须充分掌握fr。另一个重点是斜杠运算符，它不是分数。它代表开始位置和结束位置。比如3/4，这个不是四分之三的意思，是指从第3行开始到第4行结束的一个元素，但不包括第4行。同样，与grid相关的旁门属性也很多，学习display:grid;时必须掌握。包括网格、网格列开始、网格列结束、网格行开始、网格行结束、网格模板、网格模板列、网格模板行、网格模板区域、网格-间隙，网格列间隙，网格行间隙，网格自动列，网格自动行，网格自动流，网格列，网格行。不能细说，写这个又是大文章了。具体可以参考csstrick上的这篇文章，写的很详细，也很清楚。显示：红宝石；ruby的价值其实对于我们亚洲人来说是一个非常有用的东西，但是目前除了Firefox之外的其他浏览器都支持的不是很好。简而言之，什么display:ruby;确实是做这样的事情：好东西，对吧？如果能用上，对我国的初等教育能有很大的促进作用。不幸的是，我们还不能使用它。ruby这个词英文是红宝石的意思，但日文是ルイ，中文翻译成红宝石标记。我们的中文红宝石商标是汉语拼音。可以想象，这个标准的制定者一定是日本人。如果我们是中国人，那么这个标签就不是红宝石了，而是拼音。还有一种ruby语言，发明者也是日本人，和html中的这个ruby是两码事，别搞混了。Ruby的语法大致如下：display:subgrid;2015年8月6日，W3C的层叠样式表（CSS）工作组（CascadingStyleSheetsWorkingGroup）发布了CSSGridLayoutModuleLevel1（CSSGridLayoutModuleLevel1）的工作草案。在这个草案中，显示：网格；我们在上一节中提到的方案是规定的。并显示：子网格；属于2017年11月9日发布的非官方CSS网格布局模块的第二层。所以它是一个非常新的草案，围绕它一直没有太多争议。子网格的总体思路是小网格也可以设置在大网格中，互不影响。但是如果grid中可以设置subgrid，那么想在subgrid中设置subgrid怎么办呢？子网格？而且，到底是不是grid:subgrid；也没有统一的说法。或显示：子网格；。关于这一系列的争论，有兴趣的同学可以看这篇文章，英语好的同学可以看这篇文章。列表值显示：list-item;display:list-item;和display:table;一样，也是一群讨厌各种html标签，想只用 来写所有html的鬼东西，实践中很少用到，而且效果是这样的：你看，你用
最新推荐
猜你喜欢
|