自适应内部元素

如果不给元素一个height，它就会自适应其内部的高度，但是对于width不会。那么宽度怎么样才能让它和内部元素的宽度自适应呢？
这里就需要 width: min-content到达 以下效果。

• 未使用该属性时，宽度会是默认的100%
  
• 使用width: min-content，父元素的宽度就会随着image图片的宽度而自适应。
  
• html

<div class="adaptive-ele"><img src="https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png" alt="Before"/><div>我们需要做到让父元素能够自适应图片的宽度，而不会被文字撑开宽度。</div></div>

• stylus

.adaptive-elepadding 5pxtext-align centerborder solid 1px #666width min-content

精确控制表格列宽

当我们要用到表格去展示数据时，我们希望单元格的宽度是自适应内容的宽度呢？还是希望固定列宽？

• 当采用自适应内容宽度，可能会造成意外的布局。通常情况下例如ant-deisgn-vue用的是固定宽度。那么我们需要用 table-layout:fixed属性。

介绍一下table-layout。

• 固定表格布局table-layout:fixed
  – 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
  – 通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

• 自动表格布局table-layout:auto
  – 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
  – 此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

来看看两个最终样式：

• html

  <table class="one" width="100%">  <!--自动表格布局--><tr><td width="20%">1000000000000000000000000000</td><td width="40%">10000000</td><td width="40%">100</td></tr></table><br /><table class="two" width="100%">  <!--固定表格布局--><tr><td width="20%">1000000000000000000000000000</td><td width="40%">10000000</td><td width="40%">100</td></tr></table>

• stylus

// 自动表格布局
.onetable-layout: automatictdborder solid 1px #666// 固定表格布局
.twotable-layout: fixedtdword-break: break-allborder solid 1px #666

根据兄弟元素的数量来设置样式

当有这样一个场景的需求：计划列表中逐渐增加计划数，每增加一项计划，每一项计划的样式就会发生变化，该怎么实现呢？

• 对于只有一个列表项的特殊场景来说，解决方案显然就是:only-child，这个伪类选择符就是为这种情况而设计。
  当li元素个数大于1时，only-child样式不会生效。
  
  当li只有一个元素时，样式会加上
  

li:only-childcolor red

• 当有多个元素时，命中所有列表项
  

li:first-child:nth-last-child(7),
li:first-child:nth-last-child(7) ~ licolor red

满幅的背景，定宽的内容

.wrapperpadding 10px calc(50% - 450px)

垂直居中

• 绝对定位方法

.mainposition absolutetop 50%left 50%transform translate(-50%, -50%)

• flex布局方法

.maindisplay flexjustify-content center // 主轴居中align-items center  // 交叉轴居中

PS：主轴，交叉轴并不是固定的横轴纵轴，而是相对于flex-direction确定的。若设为column则主轴为竖轴。

紧贴底部的页脚 (Sticky Footer布局)

这章概括的内容在现在我们常称为 Sticky Footer，是一个较常见的方法。

• 指的是页面中内容不充满整个屏幕时在底部有一个页脚，当内容大于页面长度时，页脚随着内容被撑到下方而不影响阅读。
  

<div class="stickey"><div class="main">内容</div><div class="footer">页脚</div></div>

.stickeyheight 160pxwidth 300pxoverflow auto.mainmin-height calc(100% - 60px).footerheight 60px