CSS：层叠样式表
样式层叠：可以多次对同一个选择器进行样式声明
选择器重叠：可以用不同的选择器对同一个元素进行样式声明
文件层叠：多个文件进行层叠
语法：区分大小写
1、
选择器{
属性名：属性值；
}
2、
@charset“UTF-8”; 声明字符编码 写在第一行 charset是字符集的意思 但是utf8 是字符编码
@import url（2.css）；导入一个额外的CSS文件
@media （min-width : 100px） and (max-width: 200px){语法1} 媒体查询
文档流 Normal Flow：文档的流动方向
流动方向：
内联元素（inline）从左到右依次排列，到达最右边才会换行，如span
块元素(block)从上到下依次排列,每一个都另起一行，如div
inline-block 元素从左到右依次排列 但是与内联元素相比 换行的时候不会把自己分为两块
元素不分内敛或块 所有元素都可能是块也能是内敛 只要给一个display:block/inline
宽度：
inline元素的宽度是由它里面的所有元素的宽度决定的，不能设置width，inline元素内不许写block元素。
block元素的宽度默认是auto能有多宽有多宽，不是100%，一般情况不要写width=100%。可以设置宽度。
inline-block 元素默认宽度和inline一样 但是可以设置宽度
高度：
inline元素不可以指定高度 但是可以通过padding调整可视宽高，实际宽高还是自身 如div包裹span,span并没有把div撑起来。实际高度由 ling-height确定 。
block 元素高度由内部文档流元素 决定 div会把里面正常流动的元素包住 可以设置height。有些元素它会脱离文档流，计算高度就不会算上它 如position absolute之后就脱离了。div里面什么都没有高度为0.
inline-block 元素高度就像block，可以设置height。
当内容大于容器：溢出 overflow
处理方法：
1. overflow : visible;放着不管
2. overflow :hidden; 隐藏
3. overflow :scroll;添加滚动条 不溢出也显示 太丑不用
4. overflow :auto; 没有超出不显示滚动条 超出显示滚动条。横向滚动条：当宽度超出的时候
可单独设置overflow-x/-y
脱离文档流:脱离后容器不计算高度
float
position:absolute/fixed
盒模型 box-sizing：
content-box 内容盒 内容就是盒子的边界。 width = 内容宽度
border box 边框盒 边框才是盒子的边界 width=内容宽度+padding+border
height同理
问：请说一下CSS盒模型？
答：
CSS盒模型分两种，一种是content box一种 border box。
区别content box宽度只包含content， border box 宽度包含到 border，包括padding、 content、border。如果没有padding和border那他俩宽度是一样的。
一般用border box 因为更好用一些。
margin合并 只有上下合并
兄弟元素margin合并
第一个孩子的 margin-bottom和第二个孩子的margin-top合并了
原因：对孩子整体与父元素设置margin的时候不用考虑孩子之间的margin需要除以二。
如何消除：给合并的元素加上 display:inline-block ，但是就会从块变成内敛，可以width100%但是不要用。
第一个子元素和最后一个子元素和父元素margin合并
如 parent上下margin是15 child margin 是30 他们两个会合并取最大值。
如何取消上下合并，四种方法在parent上加：
1. border-top:1px solid green;
2. padding-top:1px;
因为margin之间合并的前提是两者之间什么都没有 如果中间有border padding 就不合并了
3. overflow ： hidden
4. display：flex
基本单位
长度：
px像素
em相对于自身fort-size（字体大小）的倍数
百分数
整数
rem
vw和vh
其他用的很少,剩下的谷歌 width MDN 看文档
颜色:
transparent透明
十六进制 #FF6600或者#F60
RGBA颜色rgb(0,20,0)
HSL色相饱和度亮度 hsl(180,50%,50%)
CSS常用选择器
p.class 交集选择器 选择器之间紧挨着 找到同时满足多个选择器的元素
