layout布局_TailwindCSS学习-LAYOUT布局

Container 容器

The .container class sets the max-width of an element to match the min-width of the current breakpoint. 根据不同尺寸屏幕设置最大最小值。

Note that unlike containers you might have used in other frameworks, Tailwind's container does not center itself automatically and does not have any built-in horizontal padding.

请注意Tailwind中.container和别的框架不一样，没有任何内置水平边距，也不会自动居中。

设置居中，使用.mx-auto

<div class="container mx-auto">
  <!-- ... -->
</div>

设置内置水平边距，使用.px-{size}

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

Box Sizing 盒子尺寸

Utilities for controlling how the browser should calculate an element's total size.

关于浏览器如何计算元素整体尺寸的设置

• box-border 将元素的边距和边框纳入计算

Usebox-borderto set an element'sbox-sizingtoborder-box, telling the browser to include the element's borders and padding when you give it a height or width.

• box-content 将元素的边距和边框排除计算

Usebox-contentto set an element'sbox-sizingtocontent-box, telling the browser to add borders and padding on top of the element's specified width or height.

Display 用于设置元素边框

Utilities for controlling the display box type of an element.

• block
• inline-block
• inline
• flex / flex-1
• inline-flex / flex-1
• Grid
• table

Use the.table,.table-row,.table-cell,.table-caption,.table-column,.table-column-group,.table-header-group,table-row-group, and.table-footer-grouputilities to create elements that behave like their respective table elements.

• hidden

Float 用于设置元素周围文字包裹效果

Utilities for controlling the wrapping of content around an element.

• float-right
• float-left
• float-none : default

Clear 用于设置元素周围文字包裹效果

Utilities for controlling the wrapping of content around an element.

• clear-left

Useclear-leftto position an element below any preceding left-floated elements.

• clear-right

Use clear-right to position an element below any preceding right-floated elements.

• clear-both

Object fit 用于设置替换元素尺寸

Utilities for controlling how a replaced element's content should be resized.

Object Position 用于设置替换元素在容器内位置

Utilities for controlling how a replaced element's content should be positioned within its container.

Overflow 用于设置超过容器尺寸如何安置

Utilities for controlling how an element handles content that is too large for the container.

Position 用于设置元素在DOM中的位置

Utilities for controlling how an element is positioned in the DOM.

Top/Right/Bottom/Left 用于设置替换元素位置

Utilities for controlling the placement of positioned elements.

Visibility 用于设置元素是否可见

Utilities for controlling the visibility of an element.

Z-index 用于设置元素的层叠词序

Utilities for controlling the stack order of an element.