2021-08-27

读书笔记：CSS 世界

最近刚刚接触了一下业务代码，之前一段时间都在看文档什么的，把 React 啊、Redux 啊还有一些七七八八的文档都看了。

组里面使用的框架总体而言上手难度还是不大的，交互方面几乎没什么需要特别注意的东西，我觉得熟练掌握目前这个阶段的工作有两个重点：

熟练掌握 CSS 修改页面的样式快速过关
学习 ECharts 来满足一些统计图表的要求，最好是能总结一个模版的代码出来

系统的学习一下 CSS 的相关内容，今天先看的就是张鑫旭的《 CSS 世界》。随手记录一些笔记。

3.2.3 CSS 流体布局下的宽度分离原则

这一章节介绍了一个我认为非常有用的技巧，就是为元素设置一个父元素，然后设置父元素的 width 以达到控制子元素总长度的功能，这个技巧比呆算 width 要强很多，不会说需求改一次呆算一次 width，十分有用。

所谓“宽度分离原则”，就是 CSS 中的 width 属性不与影响宽度的 padding / border (有时候包括 margin )属性共存。

分离，width 独立占用一层标签，而 padding、border、margin 利用流动性在内部自适应呈现。

.father {
  width: 180px;
}
.son {
  margin: 0 20px;
  padding: 20px;
  border: 1px solid;
}

如果不希望嵌套 div 的话，也可以采用 box-sizing: border-box 方案解决。但是这种方法必须要在没有水平 margin 的情况下才能生效。width 分离更好用一些。

4.1.1 content 与替换元素

这一节讲到替换元素与非替换元素最大的区别在于 content 的区别，里面有一个非常有趣的例子，就是鼠标悬浮图片上方更换图片的例子：

<img src="laugh.png" />

img:hover {
  content: url(laugh-tear.png);
}

样例的演示地址.

4.2.1 padding 与元素的尺寸

这一节讲了一个非常有意思的应用，锚点定位的时候，希望定位的地方与地址栏有一定的距离，但是又不希望影响页面的外观，就可以采用使用内联元素设置 padding 的方法来做到。

<h3><span id="hash">标题</span></h3>

h3 {
  line-height: 30px;
  font-size: 14px;
}
h3 > span {
  padding-top: 58px;
}

对于非替换元素的内联元素，不仅 padding 不会加入行盒高度的计算，margin 和 border 也都是如此，都是不计算高度，但实际上在内联盒周围发生了渲染。

6.4.5 overflow 与锚点定位

这一节讲了一个用纯 CSS 实现选项卡的效果，非常有意思。

<div class="box">
  <div class="list" id="one">1</div>
  <div class="list" id="two">2</div>
  <div class="list" id="three">3</div>
  <div class="list" id="four">4</div>
</div>
<div class="link">
  <a href="#one">1</a>
  <a href="#two">2</a>
  <a href="#three">3</a>
  <a href="#four">4</a>
</div>

.box {
  height: 10em;
  border: 1px solid #ddd;
  overflow: hidden;
}
.list {
  line-height: 10em;
  background: #ddd;
}

演示地址

由于锚点定位是从内部容器向外部容器逐个触发锚点的，因此可能会发生跳动现象。还有一个利用 focus 锚点效果，不会产生跳动的版本，但这个版本需要 JavaScript 支持。

演示地址

6.5.2 具有相对特性的无依赖 absolute 绝对定位

这一节的内容全程高能，讲述了在子元素仅仅包含 absolute 的情况下，不设置 top / bottom / left / right 的情况下，具有一种神奇的相对无依赖特性。

还有需要注意的是 absolute 定位下图片和图片的位置，以及图片和文字的位置关系。

例子都具有很强的实用性：

图片上的 top 标记：演示

导航上面的图标定位：演示

表格提示信息：演示