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（最底层）-