知识库

html
<!-- html 宽度默认为视口宽度，高度由内容撑开，设置 h-full 时高度为视口高度。 -->
<html>
  <!-- body 宽度和高度默认和 html 一致  -->
  <body>
    <!-- 块元素 w-full 表示宽度继承父元素，由于没有高度，因此不会有背景色 -->
    <div class='w-full bg-red-200'></div>
    
    <!-- 有背景色 -->
    <div class='w-full bg-red-200'>foo</div>

    <!-- 
      不写宽度表示宽度由内容撑开，由于块元素独占一行，因此只要有内容宽度就是父元素宽度。
    -->
    <div class='w-10'>
      <!-- 宽度为 w-10 -->
      <div class='bg-red-200'>foo</div>
    </div>

    <div class='w-20'>
      <div>
        <!-- 宽度为 w-20 -->
        <div class='bg-red-200'>foo</div>
      </div>
    </div>

    <!-- 行内元素宽度始终由内容撑开， w-full 无任何作用。 -->
    <span class='w-full bg-red-200'>foo</span>
  </body>
</html>