# 1.0 HTML/CSS 优化--《高效前端》学习笔记

切图的三个境界：

• 长得好看
• 灵活
• 友好的交互

# 高效前端1：能用 HTML/CSS 解决的问题就不要用 JS

# 导航高亮

给不同页面添加不同类，标识不同页面，然后设置当前页面样式，覆盖掉默认样式。

自己的想法：这种方式虽然好，但是，需要为每个导航都写一个默认和高亮样式，如果不是同一个人写的代码，在新增导航的时候，很容易会忘记去加上。

看到后面的时候，发现书中有这个问题相关的回答，可以用 sass 进行 for 循环实现。同时，还可以定义主题色变量。

# 鼠标悬浮时显示

hover 到某个菜单时，显示子菜单。

自己的想法：书中提到，可以通过 absolute 给 .menu 定位，我想了好久，都想不出来怎么实现，如果有实现方法的，请告知，谢谢！

对上面的 demo 做了布局的改变，现在可以简单的通过 absolute 来定位了，参考：

可以看到，加了 mouse 事件后，鼠标悬浮后，会在元素的 style 中加上 display: none;，导致 css 中的样式失效：

意外情况：移动端 Safari 上，触摸会触发 CSS 的 hover，hover 会很高概率地先于 touchstart 事件，此时会判断当前是显示还是隐藏状态，由于 CSS 的 hover 发挥了作用，所以判断为显示，然后又把它隐藏了。也就是说，点一次不出来，要点两次。所以最好别两个同时写。

使用子元素的话，hover 可直接加在父容器上，隐藏元素本身不需要加 hover。

# 自定义 radio/checkbox 的样式

可以使用 :checked 代替鼠标点击事件。

使用 :checked 属性时，要注意兼容性：

# 多列等高

# padding 补偿法

设置一个很大的 padding-bottom，这样容器被最大的子元素撑开时，其他的子元素使用可以用 padding-bottom 来补偿缺少的高度。然后设置一个同方向的 margin-bottom 负值，可以抵消设置的 padding-bottom。 同时设置父容器的 overflow: hidden;，将多余的部分裁剪（隐藏）掉。

缺点：底部的 border 没有了，底部圆角也不显示了。

# table 布局

table 中的每个 td 都是等高的，所以可以设置容器 display: table;，设置里面的子元素 display: table-cell;。将子元素的宽度设大点，可以实现等分。

注意：虽然 table 布局可以实现等分，但是有一种情况需要注意，就是英文单词很长，没有设置 word-break 的时候，这种情况是不会自动等分的。

这种布局的另一个好处，就是可以在媒体查询时，实现响应式。

可以尝试拉伸屏幕，观察下面的布局变化。（大屏显示每行四列，中屏显示每行两列，小屏显示每行一列。）

可以看到，从一行两列布局拉伸到宽屏时，.tr 的 display: none; 不起作用了。因为 table 布局已经计算好了。要解决这个问题，需要借助 JavaScript。

# 根据个数显示不同样式

需求：

例如有 1 ~ 3 个 item 显示在同一行，但 item 的个数不一定，如果只有 1 个，那 item 占宽 100%；如果有 2 个，每个占 50%；如果有 3 个，每个占 33%。

:nth-last-child(an+b) 这个 CSS 伪类匹配文档树中在其之后具有 an+b-1 个兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处。MDN

需要注意的是，如果 item 有 border，这样设置是不行的，因为 border 也会占据一定的宽度。设置一下 box-sizing: border-box; 即可。

需求：

手机屏幕比较小，左边图标比较多，一行排不下，把右边的电话换行，隐藏竖线。(左边图标个数不定)

感觉需求描述不完整，想象不出这种场景，无法实现代码。

# 使用表单提交

请求提交方式：

• AJAX
• 表单提交

假设：

首页有一个搜索的表单，单击 SEARCH 跳到列表页。

演示省略...

# 自动监听回车事件

略...

# 巧用 CSS3 伪类（pseudo class）

• :focus
• :invalid

# 其他

需求：

hover 时显示提示信息。不想用 title，也不想用 JavaScript，更不想引入第三方库。