《CSS揭秘》-总结47个Css技巧（六）：结构与布局

2024-02-01 13:06:52

自适应内部元素

如果不给元素一个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-ele
  padding 5px
  text-align center
  border solid 1px #666
  width 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

// 自动表格布局
.one
  table-layout: automatic
  td
    border solid 1px #666

// 固定表格布局
.two
  table-layout: fixed
  td
    word-break: break-all
    border solid 1px #666

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

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

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

当li只有一个元素时，样式会加上

li:only-child
  color red

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

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

满幅的背景，定宽的内容

.wrapper
	padding 10px calc(50% - 450px)

垂直居中

绝对定位方法

.main
	position absolute
	top 50%
	left 50%
	transform translate(-50%, -50%)

flex布局方法

.main
	display flex
	justify-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>

.stickey
  height 160px
  width 300px
  overflow auto
  .main
    min-height calc(100% - 60px)
  .footer
    height 60px

码农公寓