盒子模型

CSS 中所有的元素都由盒子模型构成，盒子分为两种盒子：

盒子类型	特点
块盒子	产生换行。具有 width 和 height 属性。具有 margin, padding 和 border 并且会把其它盒子推开。如果未指定宽度，则盒子会占据所有可用宽度。
行内盒子	不产生换行。 width 和 height 属性不起作用。垂直方向的 margin, padding 和 border 不会把其他行内盒子推开。水平方向的 margin, padding 和 border 会把其它行内盒子推开。

盒子类型

特点

块盒子

行内盒子

组成部分

一个盒子构成成分如下：

两个相邻的 margin 会发生合并，遵循以下规则：

和 w-full 不同的是，h-full 需要当父组件存在高度的时候才会生效。这个高度既可以是显式指定的，也可以是通过 flex 盒子计算出来的。例如：

<div className='h-screen'>
    <div className='h-full'/>
</div>

亦或是使用 flex 计算得出：

<div className='h-screen flex flex-col'>
    <div className='flex grow'>
        <div className='h-full'/>
    </div>
</div>