携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

塌陷问题

<div style="vertical-align:middle;">
  <span style="display:inline-block;overflow:hidden;">
    ...
  </span>
</div>

解决

在标签增加vertical-align:middle;。

原因是overflow:hidden引发了子节点spanverticl-align: baseline;，基线发生了变化。

单行居中，两行居左

<h2 style='text-align: center;'>
  <p style='text-align:left; display:inline-block;'>
    单行居中，多行居左
  </p>
</h2>

如何做到的呢？

display：inline-block；始用于CSS2，含义是：指定对象为内联块元素。这里主要利用inline-block元素可以当前元素实现text-align居左的特性。

text-align其他属性值：

text-align: start; 内容对齐开始边界
text-align: end;
text-align: justify;

可分别实现居左、居右和两边对齐。

text-align: justify-all无效。因为现在几乎没有浏览器实现这个属性功能。

可以采用text-align-last：justify;来替换实现。属性值justify和justify-all唯一的区别在于是否处理最后一行。

单位

px、rem和em

px: 像素，通常用于屏幕媒体，根据屏幕分辨率不同，可大可小。

em：和父级的font-size有关，也可能与多层父都有关系，任一层父改变，都可能会带来问题，计算复杂。

rem：CSS3新增属性。可以理解为根em，与html文档根font-size相关。

响应式和适配

响应式设计是EthanMarcotte在2010年5月份提出的一个概念。它主要是对多个终端，仅需要一套代码。

适配指的是在同一个终端下，多个尺寸的兼容展示。

BEM

是定义CSS类的1种规范方式。由俄罗斯Yandex团队提出。

Yandex：在俄罗斯本地搜索引擎市场份额第1，超过Google，在欧洲市场份额第2。

B：Block(块) 如header、footer块
E：Element(元素) 如btn、input元素
M：Modifiy(修饰器) 元素active状态

B__E--M：双下划线连接B和E，双中线连接E和M。

可以采用BEM的思想，没必要一定要采用它那种连接方式。B_E-M也不错，或B-E-M。

link标签

怎么判断link标签是否加载完成

现代浏览器支持onload/onreadystatechange方法：

if(supportOnload){
 // 支持onload
}else{
  node.onreadystatechange = function() {
    if(/loaded|complete/.test(node.readyState)) {
      onload()
    }
  }
}

link链接css资源是通过href，而href仅是链接资源位置，而不会下载到当前文档位置，所以说我觉得onload仅是判断是否链接成功，而不是判断样式是否已经渲染成功。

link和@import区别

link在文档加载时并行加载，@import在文档加载完成后加载；
link是XHTML标签，除了能加载css，还能加载RSS等其他事务，@import只能加载css，并且它是CSS2.1提出的，太低版本可能出现兼容性问题。

src和href

src：指定的资源将会下载到当前文件中，如script、img。串行加载。

href：建立当前标签与资源的联系。如link、a。并行加载。

样式常见问题