《CSS Secrets》读书笔记（5）

最新推荐文章于 2025-05-07 13:14:58 发布

前端向朔

最新推荐文章于 2025-05-07 13:14:58 发布

阅读量629

点赞数

CC 4.0 BY-SA版权

分类专栏：读书笔记文章标签：帧动画 CSS技巧 html布局布局技巧

本文链接：https://blog.csdn.net/u013778905/article/details/86571297

读书笔记专栏收录该内容

7 篇文章

订阅专栏

本文为《CSSSecrets》一书的精读笔记，深入探讨CSS布局、过渡与动画等高级技巧，适合有一定基础的前端开发者阅读，涵盖min-content、max-content、table-layout等实用属性，以及CSS动画控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来，本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》，做笔记的过程中我会根据自己的过往经验加上自己的理解和看法，用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人，如果你是新手，阅读起来可能有点吃力，同时，笔记也是针对我个人的查漏补缺，有些知识点并不会记录进去。

文章目录

结构与布局

自适应内部元素，让元素的大小由内部来决定而不是外部父元素，我们可以设置 float , inline-block 等属性值，但是这样对原来的布局造成了一些副作用，下面让我们来学习新属性 min-content 吧，figure 和 figcaption 是 HTML5 新增的标签，用来表示图文，针对元素的宽度值，有属性值 min-content|max-content|fit-content 可以设置元素的宽度根据内容来决定。

<p>Some text [...]</p>
<figure>
    <img src="adamcatlace.jpg" />
    <figcaption>
        The great Sir Adam Catlace was named after
        Countess Ada Lovelace, the first programmer.
    </figcaption>
</figure>
<p>More text [...].</p>

figure {
    max-width: 300px;
    max-width: min-content;
    margin: auto;
}
figure > img { max-width: inherit; }

精确控制表格列宽，在没有给表格或者设置 display: table; 的元素添加任何属性前，表格的特性是自适应的，这种模式被称作自动表格布局算法，这种模式有很多弊端，比如在浏览器渲染的时候，表格会根据内容一直处在计算的过程中，直到最终计算完，布局才稳定，同时，表格有可能溢出父元素布局大小，内容文字的截断省略也是无效的，即使设置了表格 width: 100%;。解决这种现象可以用到 table-layout: fixed; 属性，设置该属性之后，单元格会均分表格的宽度，其次宽度设置，以及 text-overflow: ellipsis; 都能发挥作用，如果需要精确控制某一列的宽度，可以给该列添加宽度属性设置，也可以通过添加 <colgroup width="40%"></colgroup> 为某列设置精准的宽度值。
根据兄弟元素的数量来设置样式，关于这个知识点，可以看我之前分享的文章，https://blog.csdn.net/u013778905/article/details/79309773
满幅的背景，定宽的内容，这里主要用到的是 calc css计算函数，通过计算，得到一个900px的内容区域。

footer {
    padding: 1em;
    padding: 1em calc(50% - 450px);
    background: #333;
}

水平垂直居中，可以查看我的这篇文章，对方案进行了梳理，《还不会CSS水平垂直居中？这里有12种方案》

过渡与动画

动画有很多种形式，可以阅读《Web动画形式》
关于逐帧动画，我之前做过整理和研究，可以看《帧动画的多种实现方式与性能对比》
我们可以通过这个动画属性来控制动画的执行与停止：animation-play-state: paused|running 。

读后感

两年前读这本书的时候，一是惊叹CSS3的神奇魅力，二是看懂理解和看完之后记得的东西不多。所以这次选择再读一遍，同时也有案例实现，在笔记中也提供了 codepen 地址，有了更多的实践基础之后，再次看很多地方都很容易理解了，背景、圆角、阴影等的灵活运用，给我接下来的工作提供了更多的思路，也让我体会了如何读好一本好书的经历。

这本书不适合初学者阅读，需要有一定的基础，同时这本书也不是一个很好的教程，只是作为知识巧妙应用的思路拓展，对于知识点的详细探索没有很多，大都是介绍CSS技巧，比如在动画方面，我写了几篇文章，刚好可以补充到这里。总之，这本书是一本好书，书选择了读者，读者也选择了书，感谢作者给我们带来这么多优质的分享。

最后，贴出该书的购买地址：http://www.ituring.com.cn/book/1695 。

END.