css的学习笔记
tailwindcss
1.CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
2.
Relative 定位
相对定位元素的定位是相对其正常位置。
3.
Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠
4.
盒子模型
重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.
适用于display属性为块状的元素，例如block，inline-block
例如
<style>
div{
width:200px;
height:200px;
}
</style>
<div></div>
当div的宽高设定为200px的时候，其实设定的是content内容块的大小的设定，当给该div设置padding或border边框的时候，content内容区域的大小不变，整个div会在视觉上感觉变大了，是因为整个盒子的大小应该是margin+bprder+padding+content组成的
，但是我们设置的狂高只适用于content，当设定其他大小时，在content大小保持不变的情况下，自然会把盒子撑大。
若想保持盒子大小不变的情况下，则可以设置box-sizing=border-box;这样设置的大小相当于就是整个盒子的大小，那么在添加padding属性的时候，会压缩盒子内部的元素大小
5.
flex布局时容器问题
flex是css3中新增的布局方式，叫做弹性盒子，设置方法 ：display:flex
当设置flex-wrap:warp时，flex容器就变成了多行容器，否则默认为单行容器，当变成多行容器时，容器会自动拆分容器的大小为多份，当你在该容器中添加多个块状元素，自动换行的时候，会在多个div之间留有空白
要想去除空白，可以使用align-content：flex-start进行空白去除，其实相当于顶端对齐。
align-content与align-items的区别：
align-content：适用于多行容器，当容器时多行的时候，可以设置容器内的div在纵轴的布局方式
align-items：适用于单行容器，当容器为单行的时候，可以设置容器内的div的布局方式
