结构与布局

Time Flying

标签

Edit in GitHub

display(布局)

block: 有宽高, 不在同一行;
inline-block: 有宽高，在同一行;(父节点上使用 inline-block 会自动获取子节点的宽度)
inline: 无宽高, 在同一行;

inline-block 的问题

Here is demo:

<html lang="en">
  <style>
    li {
      display: inline-block;
      background: red;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 30px
    }

    .demo {
      width: 90px;
    }

    .clearfix {
      overflow: visible;
    }
  </style>
  <body>
    <ul class="demo">
      <li>testtest</li>
      <li>testtest</li>
      <li>testtest</li>
      <li>testtest</li>
      <li>testtest</li>
      <li>testtest</li>
    </ul>
  </body>
</html>

I'm confused why is it, I want to use overflow: hidden and not expect the strange gap, how can I do?

原因是因为代码间的标签符号之间包含空格，浏览器也会处理这部分占位，因此解决方法如下:

The solve way is to add line-height: 0 or font-size: 0 to the class demo and add line-height: 12px or font-size: 12px to the tag li.

there-is-an-strange-distance-when-using-overflow-hidden

position(位置)

relative: 元素根据正常的文档流相进行定位;
absolute: 脱离当前文档流, 相对其最近的 position 属性值为非 static 祖先元素进行定位, 直到 body;
fixed: 脱离当前文档流, 相对视窗定位。注意: 当父元素上有这几个属性时, transform, perspective, filter 时, fixed 定位会失效;
sticky: relative 与 fixed 的结合;

使用 sticky 布局有一些限制:

<div>
  <div style="position: sticky; top: 20px; background: pink; margin-top: 50px;">Header</div>
  <div style="height: 1000px">Content</div> // 比如这一行不可或缺
</div>

margin

margin 的百分比值是以父元素的宽度作为解析基准的。

自适应内部元素宽度

自适应内部元素宽度

精确控制表格列宽

.demo {
  table-layout: fixed; /* 固定表格布局算法 */
  width: 100%;
}

背景占屏幕全宽，内容的长度定宽

.footer {
  padding: 1em calc(100% - 450px); /* 暗藏内容宽度为 900 px */
  background: #ccc;
}