深入解析CSS ​

[!abstract] 深入解析CSS

• 
• 书名： 深入解析CSS
• 作者： henrry welson
• 简介：
• 出版时间
• ISBN：
• 分类：
• 出版社：
• 出版社：
• bookId： CB_FZ6FhMFej7Xn6oN6om8mK8Jr

高亮划线 ​

3.5.2　更通用的解决方案：猫头鹰选择器 ​

• 📌 也就是说，它会选中页面上有着相同父级的非第一个子元素 ^CB-FZ6FhMFej7Xn6oN6om8mK8Jr-57-2118-2144
  • ⏱ 2024-05-23 21:18:33

4.2.2　理解清除浮动 ​

• 📌 这个清除浮动还有个一致性问题没有解决：浮动元素的外边距不会折叠到清除浮动容器的外部，非浮动元素的外边距则会正常折叠。比如在前面的页面里，标题“Running tips”紧挨着白色的<main>元素的顶部（如图 4-8 所示），它的外边距在容器外面折叠了。 ^CB-FZ6FhMFej7Xn6oN6om8mK8Jr-62-4176-4323
  • ⏱ 2024-05-23 21:18:37

4.3　出乎意料的“浮动陷阱” ​

• 📌 display: table; content: " "; } .clearfix::after { clear: both; } 这个版本使用 display: table 而不是 display: block。给::before 和::after 伪元 素都加上这一属性，所有子元素的外边距都会包含在容器的顶部和底部之间 ^CB-FZ6FhMFej7Xn6oN6om8mK8Jr-63-585-1150

  • ⏱ 2024-05-23 21:18:35

• 📌 更通用的做法是，清除每行的第一个元素上面的浮动。 ^CB-FZ6FhMFej7Xn6oN6om8mK8Jr-63-4522-4546

  • ⏱ 2024-05-23 21:18:34

4.5　网格系统 ​

• 📌 使用 overflow: auto 通常是创建 BFC 最简单的一种方式。也可以使用前面提到的其他方式，但是有些问题需要注意，比如，使用浮动或者 inline-block 方式创建 BFC 的元素宽度会变成 100%，因此需要限制一下元素的宽度，防止因为过宽而换行，导致内容移动到浮动图片的下面。相反，使用 table-cell 方式显示的元素，其宽度只会刚好容纳其中的内容，因此需要设置一个较大的宽度，强制使其填满剩余空间。 ^CB-FZ6FhMFej7Xn6oN6om8mK8Jr-67-1467-1680
  • ⏱ 2024-05-23 21:23:09

4.5.1　理解网格系统 ​

• 📌 row::after { content: " "; display: block; clear: both; } [插图] 复制清除浮动规则，让行元素包含内部的浮 ^CB-FZ6FhMFej7Xn6oN6om8mK8Jr-68-3054-3713
  • ⏱ 2024-05-23 21:32:18

4.5.3　添加间隔 ​

• 📌 给行元素添加一个−0.75em 的左侧外边距，把行元素的左侧拉伸到容器外面。列元素的内边距会把里面的内容往右推 0.75e ^CB-FZ6FhMFej7Xn6oN6om8mK8Jr-69-3777-3838
  • ⏱ 2024-05-23 21:37:17

读书笔记 ​

本书评论 ​