HTML&CSS常见问题如何理解HTML语义化让人更容易读懂（增加代码可读性）让搜索引擎更容易读懂（SEO）默认情

HTML&CSS常见问题

如何理解HTML语义化

让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO）

默认情况下，哪些HTML标签是块级元素、哪些是内联元素

块级：display: block/table; 包括div、p、h1-h5、table、ul、ol、p等

内联：display: inline/inline-block; 包括span、img、input、button等

img脱口而出就是块级，因为宽高可以设置，但是仔细一查是内联可替换元素，相当于设置了display:inline-block;

line-height继承问题

我们在line-height为数值时都知道是可以直接继承给子元素，但是遇到当为百分比时，就像

body {
  font-size: 20px;
  line-height: 200%;
}
p {
  background-color: #eee;
  font-size: 16px;
}

这里的p标签line-height是多少呢？来看看浏览器结果

可以看到line-height为40px，所以在line-height时是先计算完在继承。

em、rem、px、rpx区别

em

子元素字体大小的em是相对于父元素大小
元素中的width/height/padding/margin用em的话是相对于该元素的font-size

来看实际的栗子：

<div>父元素
  <p>子元素
    <span>孙子元素</span>
  </p>
</div>

div {
  font-size: 40px;
  width: 6em; /* 240px */
  height: 6em;
  border: 2px solid #000;
}
p {
  font-size: 0.5em; /* 20px */
  width: 6em; /* 120px */
  height: 6em;
  border: 2px solid #000;
}
span {
  font-size: 0.5em; /* 10px */
  width: 6em; /* 60px */
  height: 6em;
  border: 2px solid #000;
  display: block;
}

效果如下：

rem

相对单位
rem是全部的长度都相对根元素html，通常做法是给html元素设置一个字体大小

来看看实际的栗子：

<div>父元素
  <p>子元素
    <span>孙子元素</span>
  </p>
</div>

html {
  font-size: 10px;
}
div {
  font-size: 4rem;
  width: 24rem;
  height: 24rem;
  border: 2px solid #000;
}
p {
  font-size: 2rem;
  width: 12rem;
  height: 12rem;
  border: 2px solid #000;
}
span {
  display: block;
  font-size: 1rem;
  width: 6rem;
  height: 6rem;
  border: 2px solid #000;
}

效果如下：

rpx

相对单位
rpx是微信小程序解决自适应屏幕的尺寸单位，微信小程序规定屏幕宽度为750rpx
来iphone6来讲屏幕宽度为375px，所以1rpx=375px/750=0.5px

flex画一个3点筛子

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      width: 200px;
      height: 200px;
      border-radius: 10%;
      border: 2px solid #999;
      justify-content: space-between;
      padding: 20px;
    }
    .item {
      width: 50px;
      height: 50px;
      background-color: rgb(238, 35, 35);
      border-radius: 50%;
    }
    .item:nth-child(2) {
      align-self: center;
    }
    .item:nth-child(3) {
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

实现效果：