36-自适应内部元素
介绍：使用 width: min-content; 来将内部文本宽度根据最小内容宽度计算，得到如下案例，文字的换行宽度依据图片的宽度。
<p>Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.</p> <figure> <img src="http://placekitten.com/g/200/300" /> <figcaption> The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever. </figcaption> </figure> <p>We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.</p> /** * Intrinsic sizing */ figure { max-width: 300px; max-width: min-content; margin: auto; } figure > img { max-width: inherit } /* Basic styling */ figure { padding: 10px; border: 1px solid silver; }
37-精确控制表格列宽
介绍：display: table 布局的用法，相比传统的table 表格更加可控。
/** * Taming table column widths */ body { background: #ddd } section { width: 500px; margin: 2em; background: white; } table { border-collapse: collapse; margin-bottom: 1em; width: 100%; } section + section table { table-layout: fixed } td { border: 1px solid #aaa; } td.preformatted { white-space: pre; font-family: Consolas, Monaco, monospace; text-overflow: ellipsis; overflow: hidden; }
38-根据兄弟元素的数量来设置样式
背景知识：nth-child(n+b) 会选中 所有从 b 个开始的所有子元素
介绍：某些场景下，我们需要根据兄弟元素的数量来为它们设置样式，比如： 电子邮件列表，当列表中只有少量列表项，我们可以为每一项展示多行预览文字；当列表项不断增加时，需要逐渐减少每一项的预览行数。
调色板程序，每个色块都展示出配套的控件，当色块的数量不断增加时，它们所占据的空间也相应增加，此时我嗯可能希望色块的控件变得紧凑一些。
这里通过 nth-child() 来实现效果。
<ul class="palette"> <li> <div class="color-options"> <a class="add" href="#">Add</a> <a class="delete" href="#">Delete</a> </div> </li> </ul> /** * Styling by sibling count: Color palette example */ /* Hide "color" 4 items or more */ .palette li:first-child:nth-last-child(n+4) .color-options a:after, .palette li:first-child:nth-last-child(n+4) ~ li .color-options a:after { content: none; } /* Hide word when 6 items or more */ .palette li:first-child:nth-last-child(n+6) .color-options a, .palette li:first-child:nth-last-child(n+6) ~ li .color-options a { color: transparent; font-size: 0; } .palette li:only-child .delete { display:none; } /* From this point it’s just styling */ .palette { display: flex; height: 200px; max-width:900px; font: bold 90%/1 sans-serif; } .palette li { flex: 1; list-style: none; background: #D6E055; } .color-options { background: rgba(0,0,0,.5); padding: 10px; margin: 0 10px; overflow:hidden; border-radius:0 0 10px 10px; } .color-options .add { float:left; } .color-options .delete { float:right; } .color-options a { color: white; text-decoration:none; } .color-options a:before { display:inline-block; font-size: 1rem; width:1.3rem; margin-right:.3rem; text-align: center; line-height: 1.3; background:white; border-radius: 50%; letter-spacing: normal; } .color-options .add:before { content:'✚'; color:#590; } .color-options .delete:before { content:'✖'; color:#b00; } .color-options a:after { content: ' color'; font-weight: normal; }
39-满幅的背景，定宽的内容
介绍：很多官网或者页脚区域都是这样的设计，一大张背景图，上面定宽区域显示文字内容，这需要至少2个HTML 元素来实现, 一个负责背景，一个负责内容区域的包裹，通过 margin 实现居中。
这里使用 calc 动态计算元素位置来去掉了多余的 HTML 元素
<header> <h1>Fluid background, fixed content</h1> </header> <section> <h1>Heading</h1> <p>Bacon ipsum dolor amet voluptate et shoulder, ipsum flank tongue exercitation commodo sed beef ribs drumstick in venison laborum. Laboris ut enim id drumstick, et aute esse. Consequat ad kielbasa anim pork loin turkey qui cupidatat drumstick doner labore. Nulla sirloin jerky do sed magna meatloaf. Ribeye ea ut elit leberkas laboris sausage corned beef drumstick cillum non.</p> </section> <section> <h1>Another heading</h1> <p>Nostrud landjaeger cillum beef cow tail cupidatat non mollit voluptate jowl. Enim sunt in, flank hamburger proident qui. Id aute excepteur chuck magna tempor ipsum pork chop t-bone. Frankfurter meatball pork loin beef et leberkas pork. Pig ball tip pancetta in.</p> <p>Ribeye in veniam ipsum flank. Elit incididunt t-bone proident meatball. Porchetta exercitation prosciutto sausage chuck ut eu brisket shank pastrami turkey sunt laboris tenderloin anim. Landjaeger do venison laboris kevin.</p> </section> <footer> <p>© 2015 Lea Verou (j/k, feel free to use wherever)</p> <p>Consectetur et t-bone pork loin. Tri-tip cupim in, spare ribs velit exercitation in. Tempor cillum fugiat, nisi leberkas reprehenderit anim laboris proident cow. Eu fatback kevin sint, ad shoulder in venison picanha. Sausage drumstick capicola, culpa boudin pork belly minim aute ipsum biltong picanha venison nulla adipisicing.</p> </footer> /** * Fluid background, fixed content */ header, section, footer { padding: 1em calc(50% - 350px); } footer { background: #333; color: white; } header { background: orange; color: white; } section + section { background: #eee; } body { margin: 0; font: 100%/1.5 sans-serif; }
40-垂直居中
介绍了几种垂直居中的方案，其中提出 flex 是最佳选择
基于绝对定位的解决方案
利用绝对定位和CSS变形属性来实现，不用固定设置宽高，但是这个方案也有不足，比如:
绝对定位有时对整个布局的影响太多强烈；
如果居中的元素在高度上超过视口，顶部会被裁切掉；
某些浏览器中会导致元素显示有些模糊，因为元素可能被放置在半个像素上，虽然可以通过 transform-style: preseve-3d 来修复，不过hack 意味太浓，不太可靠。
<main> <h1>Am I centered yet?</h1> <p>Center me, please!</p> </main> /** * Vertical centering - absolute positioning method */ main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 1em 1.5em; box-sizing: border-box; background: #655; color: white; text-align: center; } h1 { margin: 0 0 .2em; font-size: 150%; } p { margin: 0; } body { background: #fb3; font: 100%/1.5 sans-serif; }
基于视口单位的解决方案
此方案实用性有限，因为它只适用于在视口中居中的场景。
<main> <h1>Am I centered yet?</h1> <p>Center me, please!</p> </main> /** * Vertical centering - Viewport unit method */ main { width: 18em; padding: 1em 1.5em; margin: 50vh auto 0; transform: translateY(-50%); box-sizing: border-box; background: #655; color: white; text-align: center; } h1 { margin: 0 0 .2em; font-size: 150%; } p { margin: 0; } body { background: #fb3; font: 100%/1.5 sans-serif; }
基于 Flexbox 的解决方案 一（ align-items: center）
<main> Center me, please! </main> /** * Vertical centering - Flexbox solution for text */ body { display: flex; align-items: center; min-height: 100%; margin: 0; } html { height: 100% } main { display: flex; justify-content: center; align-items: center; width: 18em; height: 10em; padding: 1em 1.5em; margin: 0 auto; box-sizing: border-box; background: #655; color: white; text-align: center; } h1 { margin: 0 0 .2em; font-size: 150%; } p { margin: 0; } body { background: #fb3; font: 100%/1.5 sans-serif; }
基于 Flexbox 的解决方案 二（margin: auto）
亮点在于这里并不是用的 align-items: center; 而是对子元素设置 margin: auto; 当使用 Flexbox 时，margin: auto 不仅在水平方向上将元素居中，垂直方向上也是如此。
<main> <h1>Am I centered yet?</h1> <p>Center me, please!</p> </main> /** * Vertical centering - Flexbox solution */ * { margin: 0 } body { display: flex; min-height: 100vh; } main { padding: 1em 2em; margin: auto; box-sizing: border-box; background: #655; color: white; text-align: center; } h1 { margin-bottom: .2em; font-size: 150%; } body { background: #fb3; font: 100%/1.5 sans-serif; }
