盒模型
- 盒模型分为标准盒模型和IE盒模型，前者的宽高是内容的宽高，后者则是border的宽高
- 相邻盒子的margin会重叠，取二者的最大值
- padding的宽高以百分比设置时，都是基于父元素的宽度
元素类型
- 块级元素，宽度占满窗口，自动换行，inline-block搭配vertical-align实现垂直居中
- 内联元素，宽度为元素本身的宽度，设置width，height属性无效，line-height调整父元素行高，元素vertical-align实现垂直居中
- 容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素
- inline-block与block的区别，前者将对象呈现为inline，让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体
- img、input、textarea和select等属于行内替换元素，height/width/padding/margin均可用，效果等于块元素。当设定了width但未设置height时，img的height会根据比列缩放
- 一个div中包含一个img和a标签时布局的情况是怎么样的，考虑vertical-align和line-height的影响：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
文档流与浮动
- 文档流：元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素
- 包裹性：block元素不指定width的话，默认是100%，一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应，这也是通常float元素需要手动指定width的原因
清除浮动
- clear：只能影响使用清除的元素自身
- 给父元素设置高度
- overflow：hidden，缺点是内容过多时会被隐藏，无法显示要溢出的内容
- 伪元素：clear/ content/ display/ height/ visibility
定位Position
- relative，相对它自己的正常位置的定位，未脱离文档流，原来在文档流中占据的位置还存在。
left：50px，现在的位置在原来位置左边的+50px处；
bottom：-20px，现在位置在原来位置下边的-20px处； - absolute，脱离文档流，通过top / left来设定位置，这需要判断父元素是否设置了相对定位，如果没有，一直往上寻找至body
- https://www.cnblogs.com/wlqh/p/6170135.html
- fixed，https://www.cnblogs.com/iflygofy/archive/2016/08/08/5748719.html
- z-index只能影响设置了position值的元素
布局（待补充）
- float + margin
- absolute + margin
- 圣杯 / 双飞翼
- flex
- 网格，display为grid或者inline-grid，属性grid-template-rows和grid-template-columns分别用于定义网格的行轨道和列轨道，单位fr用于表示轨道尺寸配额，表示按配额比例分配可用空间。更多属性点击：https://www.imooc.com/article/28513?block_id=tuijian_wz
垂直三列布局可以用grid-template-rows：100px 1fr 100px；
https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/ - 响应式，依靠媒体查询实现，< link media="(max-width:600px)" rel=“stylesheet” href=“mobile.css” >，也是bootstrap栅格系统的底层实现原理
- 媒体查询：https://www.cnblogs.com/fozero/p/6096266.html
- 居中：https://louiszhai.github.io/2016/03/12/css-center/#%E5%85%83%E7%B4%A0%E9%AB%98%E5%BA%A6%E4%B8%8D%E5%AE%9A
BFC（待补充）
- 概念：可以说BFC就是一个作用范围，可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干；
- 通过改变自身来做到 “不影响外界”
可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
- 产生条件：浮动 / 绝对定位 / overflow / inline-block(flex)
https://zhuanlan.zhihu.com/p/25321647 - 详解：https://segmentfault.com/a/1190000006740129
长度单位
- em，参照父元素
- rem，参照html元素（根元素），转化成的像素大小取决于页根元素的字体大小， 会被浏览器中字体大小的设置影响。如html { font-size:16px }，使用rem 单位的主要目的是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小
- 视口单位：
vw : 1vw 等于视口宽度的1% ；
vh : 1vh 等于视口高度的1% ；
vmin : 选取 vw 和 vh 中最小的那个 ；
vmax : 选取 vw 和 vh 中最大的那个
伪类与元素
- 伪类
- 伪元素
https://blog.csdn.net/zhu_xiao_yuan/article/details/51055424
选择器与优先级
- 选择器种类：
相邻兄弟选择器 a+b
子元素选择器 a>b
后代选择器 a b
属性选择器 [title=hah] - 优先级：距离不会对元素优先级计算产生影响，如果优先级相同，靠后的 CSS 会应用到元素上；继承的样式是低于设定的样式的。如果只是继承，离的近的优先级更高
- !important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性 (伪类=属性选择器=类选择器)
- https://blog.csdn.net/DYD850804/article/details/80997251
动画
- transform，转换，包括缩放scale(1.2， 0.5)、移动translate(-50%, -50%)、旋转rotate(45deg)
- transition，补间动画，需要通过hover等伪类来触发
http://www.cnblogs.com/smyhvae/p/8435182.html - animation，关键帧keyframe，动画属性。https://blog.csdn.net/mogoweb/article/details/80182338
- 其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用
- 二者区别在于：触发条件不同，transition通常和hover等事件配合使用，由事件触发，animation则立即播放；循环， animation可以设定循环次数；精确性， animation可以设定每一帧的样式和时间。transition 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
- 动画库：Hover.css / Animate.css
- https://www.cnblogs.com/xiaohuochai/p/5347930.html
- https://www.cnblogs.com/xiaohuochai/p/5391663.html
Less
兼容
- 浏览器
- normalize.css