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

你知道 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;
}
» 本文来自:前端开发者 » 《display 的 32 种写法_前端开发者_网站前端开发》
» 本文链接地址:https://www.rokub.com/2297.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!