我们在vscode里安装好 Tailwind CSS IntelliSense 智能提示就开始起作用了
我直接看 文档 布局部分
tips:
<div class="container mx-auto">
这个container和bootstrap不同点在不会自己居中和没有内置padding
</div>
我看了一下bootstrap container默认带了:
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
2个margin auto ,对应就是 mx-auto ,m = margin , x:left and right , auto: auto 这个比较语义化
同理 padding left right,也有了 px-{number} 只不过在这个里面的单位都rem,px-4 对应就是 4/4 = 1rem
这个太熟悉了,我个人反正大部分都使用 border-box 少部分场景手动指定的
Class | Properties |
---|---|
.box-border | box-sizing: border-box; |
.box-content | box-sizing: content-box; |
除了一个 .hidden
代表 display: none;
其他都非常语义化
我个人基本不用float来布局,所以直接在 tailwind.config.js
禁掉了
module.exports = {
corePlugins: {
float: false,
clear: false,
}
}
这个用在img上的也不提了
我没理解,去mdn上查一下
Class | Properties |
---|---|
.scrolling-touch | -webkit-overflow-scrolling: touch; |
.scrolling-auto | -webkit-overflow-scrolling: touch; |
Sticky IE11不支持 .inset前缀 其他也没啥
看到这个让我想起了重绘(repaint)和重流(reflow)
这个让我想起了 svg 里的顺序,后面一个必然在前一个上面,也没啥z-index的意思
记录2个好文:
Padding Margin 没啥好讲
Space Between 要注意一个选择器问题 对第一个不生效
看到支持负数
看到 --space-x-reverse --space-y-reverse 这种变量,
想起ie11好像不支持吧,特地又去查了一下 var
ie不支持,感觉只有编译时,向下兼容了,postcss-custom-properties
n/m这种百分比挺有意思的,其他注意一下单位就好
总的来说 布局部分很简单,没啥注意的点 还有就是,这个的文档写的真的很好,完全可以当css新手教程来看