前端前端基础

【CSS】display的32种写法

2019-09-30  本文已影响0人  前端菜篮子

转自（担心原作者会删除文章，所以这里自己做个备份）：display的32种写法

你知道『回』字有四种写法，但你知道display有32种写法吗？今天我们一一道来，让你一次性完全掌握display，从此再也不用对它发愁。

从大的分类来讲，display的32种写法可以分为6个大类，再加上1个全局类，一共是7大类

1. 外部值

所谓外部值，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。

2. 内部值【CSS3相关：重要】

谈完了外部值，我们来看看内部值。这一组值比较有意思了，在css3如火如荼的今天，你要玩不转这些值，怕是哪儿也找不到工作的。内部值主要是用来管束自己下属的儿子级元素的排布的，规定它们或者排成S形，或者排成B形这样的。

<html>
    <head>
        <style>
            .pdiv {
                background-color:cornflowerblue;
                border: 2px solid red;
                /**父元素加overflow:hidden
                可以消除子元素float对父元素的影响*/
                /**overflow: hidden; */
                
                /**
                display新的属性值
                虽然目前仅几个最新浏览器支持，
                但完全可以通过@supports()属性做完美降级处理。
                */
                display: flow-root;
            }
            /**
            为父元素添加伪类可以
            消除子元素float对父元素的影响
            .pdiv::after {
                content:"";
                clear:both;     //清除浮动
                display:block;  //确保该元素是一个块级元素
            }
            */
            .cdiv {
                background-color:burlywood;
                border: 1px solid brown;
                width: 100px;
                height: 100px;
                margin: 20px;
                /** float: left; */
            }
        </style>
    </head>
    <body>
        <div class="pdiv">
            <div class="cdiv">
            </div>
            <div class="cdiv">
            </div>
        </div>
    </body>
</html>

未加float时：

image
将上面代码中的float放开：
image

在第一个示例中仿佛父元素消失了，但在第二个示例中发现其实父元素并没有消失，只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）

解决方法：

a、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。

b、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。

c、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。

d、给父元素添加 overflow：hidden;

e、给父元素添加伪类::after清除浮动

新的解决方法：display: flow-root;

阮老师的Flex布局教程

A Complete Guide to Flexbox

3. 列表值【极少用】

4. 属性值【附属于主值】

比如主值里设置了display: table;，就可以在子元素里使用display: table-row-group;等等属性，不过并不绝对。关于它们的作用，主要参考主值就够了。

display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;

我所知道的几种display:table-cell的应用

display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

5. 显示值

MDN里把它叫做<display-box> values（盒子值），我把它叫做显示值，主要是为了便于理解。

image

然而这不是一个典型的HTML网页表格，因为通常我们会在表格内部使用列表，这样使用读屏软件的用户就能预先知道有多少空要填。所以HTML网页看起来更可能会是这样的：

<form>
    <ul>
        <li><label>Name</label><input /></li>
        <li><label>Mail</label><input /></li>
        <li><button>Send</button></li>
    </ul>
</form>

有了display: contents样式，就可以做出和第一个例子相同的布局，用的CSS也差不多：

ul{ 
    display: grid;
}
li{ 
    display: contents;
}
label{ 
    grid-column: 1;
}
input{ 
    grid-column: 2;
}
button { 
    grid-column: span 2; 
}

现在这样，网站转用CSS网格布局(Grid Layout)时，HTML代码不用大改，也不需要舍去一些确实有用的HTML元素，如上面例子里的列表元素，真的很不错。

6. 混合值

7. 全局值

这些值不是display属性的专利，几乎其它任意属性都可以用，列在这里凑个数。

总结

以上就是在css里display的32种写法。谈了这么多，不知道你记住了多少呢？其实，单纯理解每一个display属性的取值都不难，难的是融会贯通，在恰当的地方运用恰当的值，毕竟我们的目的是为了把代码写短，而不是把代码写长。如果你怕记不太清的话，就请你收藏这篇小文，也许将来的某一天，你会用得着。

上一篇下一篇

猜你喜欢

热点阅读