教材错误

float

第四章浮动布局，讲到高度不同导致浮动出现非预期情况。处理这个问题应该清除浮动然后调整元素外边距。

教材给出的css

.media:nth-child(2n+1) {
    clear: left;
}

这个写法是错的 2n+1时：

应该是

.media:nth-child(2n) {
    clear: left;
}

仔细想想确实，每行两个元素，是向左去浮动。那么取消偶数个的浮动，奇数个向左浮动就行。抽象。
实际情况（2n时）

grid

第六章 grid
教材使用了grid-gap
但是实际上应该使用gap 属性定义水平和垂直方向的间隔

代码错误

16 章 16-5 的 code，书本里是对的 但是 github 仓库里的是错的

CssInDepth_16-5

所有的卡片类名都应是 flyin-grid__item

我犯的错

行高设置

.cost{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 子元素行高决定了子元素高度 */
    /* 行高一般不带单位 不然继承的时候出问题 因为带单位继承计算值 */
    line-height: .7;
}

设置行高应该不带单位 这样每次都是根据元素单位去计算 指定单位的话无法做到预期的效果

响应式@media

首先，做响应式一定要先检查 head 里有没有 不然拿不到设备的视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后，要注意@media 的闭合在哪里，depthcss 教材上疑似出现了两种写法，一种使用 @media (max-width:){} 不同屏幕的全部放在最后写，先写了 1080 的屏幕然后写包括手机在内的其它。一种使用 @media (min-width:){} 先写了手机屏的样式然后每个涉及到要改的样式下面加了查询，写别的屏幕大小下的情况。后者一开始有点混乱我看岔眼了以为全都写在了查询里面，其实中间有些是默认的设置好的样式。注意括号的闭合。

vh vw

视口 单位 100vh 意思是视口高度的100%

display和position

总是将position误写为display

a作为块级

.site-nav>li>a {
    /* display block */
    display: block;
    color: white;
    text-decoration: none;
    background-color: #cc6b5a;
    padding: 0.5em 1em;
}

首先为了符合预期应该对a直接去调整 这样点到哪里都有用

a默认是inline元素 所以内外边距的设置有可能不会表现出来 要设置变成块级元素才能正常布局

悬浮逻辑

    .nav-links:hover .nav-links__label,
    .nav-links a:focus > .nav-links__label{}

想要让hover后所有li一起显示，做一个不透明度的transition，逻辑上来说不应该选中每个a后面的label 而是对上面容器整体做一个选中

此外还有两点：

1. 想要对inline元素用transform必须先转化为inline-block等非inline的值
2. > 选择器选择的是直接的子代 不能乱用 非直接子代的情况下，还有空格的话选中的是所有符合的元素

（未完）