display 的 32 种写法_前端开发者_网站前端开发

 前端开发者_网站前端开发丨css

你知道 display 有 32 种写法吗？ 今天我们一一道来， 让你一次性完全掌握 display， 从此再也不用对它发愁。 从大的分类来讲， display 的 32 种写法可以分为 6 个大类， 再加上 1 个全局类， 一共是 7 大类： 所谓外部值， 就是说这些值只会直接影响一个元素的外部表现， 而不影响元素里面的儿子级孙子级元素的表现。 这个值大家不陌生， 我们最熟悉的 < div > 缺省就是这个值， 最基本的块级元素， 属于 css 入门初学者都知道的概念， 只要是容器类型的元素基本都是这个值。 除 < div > 之外， 还有 < h1 > 到 < h6 > , < p > , < form > , < header > , < footer > , < section > , < article > 天生都是这个值。 display: inline;

这个值大家也不陌生， 行内元素嘛， 只要是个行内元素都是这个值， 最典型的是 < span > ，还有 < a > ， < img > ，以及古代 html 语言当中的 < b > ， < i > 都属于这一类型。 display: run – in ;

这个值有点奇怪， 通常没人用它， 但你可以知道它。 因为除了 IE 和 Opera 支持它以外， 其他所有主流浏览器包括 Chrome, Safari, Firefox 全都对它置若罔闻。 这东西说白了也没什么神秘， 它的意思就是说如果我们命令一个元素 run – in ，中文意思就是『 闯入』！ 那么这个元素就直接闯入下一行。 比如说这样： 写起来大概就是这样： < div class = “a” > aaa < /div> <div class=”b”>bbb</div > .a {

font-size: 36px;

display: run-in ;

}

1 2 3 4 5 6 < div class = “a” > aaa < / div > < div class = “b” > bbb < /div > .a {

font-size: 36px;

display: run-in ;

}

这有什么用呢？ 我们拿 span 设置 font – size 一样可以实现这个效果， 就让 IE 自己跟自己玩去吧！ 说实话， 在人力资源如此宝贵的今天， IE 的产品经理不知脑子是不是进水了， 不派工程师去实现那么多比这重要的多得多的特性， 却花时间做这么个没用的玩意儿， 难道工程师的时间不是金钱吗？ 难怪市场占有率连年下滑。 内部值谈完了外部值， 我们来看看内部值。 这一组值比较有意思了， 在 css3 如火如荼的今天， 你要玩不转这些值， 怕是哪儿也找不到工作的。 内部值主要是用来管束自己下属的儿子级元素的排布的， 规定它们或者排成 S 形， 或者排成 B 形这样的。 display: flow;

含义不清， 实验室阶段产品， Chrome 不支持。 如果还不够说服你暂时不要碰它的话， 试着理解以下英文原文： If its outer display type is inline or run – in , and it is participating in a block or inline formatting context, then it generates an inline box.Otherwise it generates a block container box.display: flow – root;

不同于刚才谈到的 flow， 现在用 flow – root 的渐渐多起来了， 因为它可以撑起被你 float 掉的块级元素的高度。 外容器本来是有高度的， 就像这样： Example one.container {

border: 2pxsolid #3bc9db; border-radius: 5px; background-color: # e3fafc;width: 400px;padding: 5px;

}.item {

height: 100px;width: 100px;background-color: #1098ad; border: 1pxsolid # 0b7285;border-radius: 5px;

}

1 2 3 4 5 6 7 8 9 10 11 12 13 14.container {

border: 2pxsolid #3bc9db; border-radius : 5px ; background-color : # e3fafc;width: 400px;padding: 5px;

}.item {

height: 100px;width: 100px;background-color: #1098ad; border : 1pxsolid # 0b7285;border-radius: 5px;

}

结果因为你想让那一行字上去， 于是你给.item 加了一个 float: left;

结果就成这样了， 外容器高度掉了， 这不是很多人常犯的错误吗？ 现在我们给.container 加上 display: flow – root;

再看一下： 喏， 外容器高度又回来了， 这效果是不是杠杠的？ 那位同学说， 我们用 clear: both;

不是一样可以达到这效果吗？.container::after {

content: ”;clear: both;display: table;

}

1 2 3 4 5.container::after {

content: ”;clear: both;display: table;

}

 前端开发者_网站前端开发丨css