CSS基础
CSS作用（层叠样式表）
层叠：
样式层叠： 多次对同一个选择器进行样式声明
选择器层叠：不同选择器对同一个元素进行样式声明
文件层叠：多个文件进行层叠
查看浏览器支持哪些属性
文件流
流动方向
inline 元素从左到右，到达最右边才会换行
block元素从上到下，每一个都是另起一行
inline-block 也是从左到右，但是到达最后的时候，他不会像inline那样分两行展示
宽度
inline 宽度为内部inline元素的和，不能用width指定
block 默认自动计算宽度，不会影响其他元素，width是auto，不是百分百宽度，可用width指定
inline-block 结合前两者特点，可用width
高度
inline 高度由line-height 间接确定，跟height无关
block 高度由内部文档流元素决定，可以设height
inline-block 跟 block 类似，可以设置height
溢出
**overflow: **
visible 超出显示，不隐藏，不占位置(默认)
hidden 超出的部分饮茶
scroll 永远显示，不推荐，因为他没有超出也显示滚动条
auto 灵活设置，高度超出就高度的滚动，宽度超出就宽度滚动
脱离文档流
float
position: absolute / fiexd
盒模型
概念
外边距(margin)-边框(border)-内边距(padding)-内容(content)
content-box；border-box
box-sizing: content-box; 内容盒-内容就是盒子的边界，默认
box-sizing: border-box; 边框盒-边框才是盒子的边界
两者区别：
content-box的宽度只包含内容宽度(content)
border-box的宽度包含到边框(border)、内边距(padding)、内容宽度(content)
外边距(margin)
margin会合并情况
父子 margin 合并
兄弟 margin 合并
阻止margin 合并
父子合并用padding、border挡住
父子合并用overflow:hidden 挡住
父子合并用 display:flex，不知道为什么
兄弟合并是符合预期的
兄弟合并可以用inline-block消除
padding和margin区别
padding：用于控制父元素和子元素的位置关系，用来控制盒子(元素)和内容之间的位置关系；
margin：用于控制同辈元素之间的位置关系
基本单位
长度单位
px像素
em相对于自身font-size 的倍数 比如：width:3em;font-size:20px,就是3*20的像素
百分数
整数
rem：了解好em再熟悉rem vw和vh
颜色
颜色
十六进制 #FF6600 或 #F60
RGBA颜色 rgb(0,0,0) 或 rgba(0,0,0,1)后面的1是透明度opacity: .5范围是0-1之间
hsl颜色 hsl(360,100
经验
div没有内容，默认高度为0
div里面套div，那么父类的高度由子类高度决定的
