CSS知识总结
一、CSS基础
1.CSS reset:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
ul,
ol{
list-style:none;
}
img{
max-width:100%;
}2.文档流
流动方向：
- inline元素从左到右，到达最右边才会换行（不接受设置width，会跨行）
- block元素从上到下，每一个都另起一行（不会跨两行）
- inline-block也是从左到右
宽度：
- inline宽度为内部inline元素的和，不能用width指定
- block默认自动计算宽度，可用width指定
- inline-block结合前两者特点，可用width（尽量的“窄”，宽为内部inline元素和）
高度
- inline高度由line-height间接确定，跟height无关（间接：字体不一致时，会相差1、2px）
- block高度由内部文档流元素决定，可以设height
- inline-block跟block类似，可以设置height
3.overflow溢出
当内容的宽度或高度大于容器的，会溢出，可用overflow来设置是否显示滚动条
- overflow:auto（自动判断是否需要加滚动条，且默认只显示必要的滚动条，当宽度超出时显示下方滚动条）
- overflow:scroll（永远显示滚动条，太丑了基本不用）
- overflow:hidden（直接隐藏溢出部分）
- visible是直接显示溢出部分
4.脱离文档流
- float:left/right;
- position:absolute/fixed;
5.两种盒模型
- content-box内容盒-内容就是盒子的边界（content-box width=内容宽度）
- border-box边框盒-边框是盒子的边界（border-box width=内容宽度 padding border）
6.margin合并
margin合并，只存在上下合并不存在左右合并，有两种情况：父子margin合并、兄弟margin合并
阻止父子合并：用padding/border挡住、用overflow:hidden挡住、用display:flex;
阻止兄弟合并：display:inline-block
CSS学习实用小技巧：
- 可使用http://caniuse.com查询哪些浏览器支持哪些特性（eg.输入border-radius 或者filter 查看大部分浏览器的支持情况）；
- CSS的Border调试法：怀疑哪个元素有问题就给这个元素加border，border没出现的话说明选择器错了或者语法错了，border出现了就看看边界是否符合预期，bug解决了把border删掉；
- CSS查资料：Goole搜索关键词时 MDN、CSS tricks（英文）、张鑫旭的博客
- 所有元素均可为内联、块、内联块，取决于”display“，浏览器将span元素默认设置为inline，div默认为block，可修改；
- div中若没有内容且没有设置高度的情况下，高度为0，padding改变的是div的视觉高度而不是实际高度
二、CSS布局
1.float布局
后续补充
2.flex布局
后续补充
3.grid布局
后续补充
三、CSS定位
1.div的分层：
background（最底层）-
