css基础概念

Normal Flow/文档流

流动方向

• inline元素从左到右，到达最右边才会换行
• block元素从上到下，每一个都另起一行
• inline-block也是从左到右

宽度

• inline宽度为内部inline元素的和，不能用width指定
• block默认自动计算宽度，可用width指定
• inline-block结合前两者特点，可用width

高度

• inline高度由line-height间接确定，不能用width指定（回忆一下字体不同时，height有细微差别）
• block高度由内部文档流元素决定，可以设height
• inline-block跟block类似，可以设height

overflow/溢出

当内容的宽度或高度大于容器时，会溢出。可以用overflow来设置是否显示滚动条

auto是灵活设置

scroll是永远显示

hidden是直接隐藏溢出部分

visible是直接显示溢出部分

overflow可以分为overflow-x和overflow-y

哪些可以使元素脱离文档流

• float
• position: absolute/fixed

盒模型

content-box

border-box

总的来说border-box更好用，因为能

margin合并

哪些情况会合并？：父子margin合并，兄弟margin合并

如何阻止合并？

• 父子合并用padding/border挡住
• 父子合并用overflow: hidden挡住
• 父子合并用display: flex，不知道原因
• 兄弟合并是符合预期的，可以用inline-block消除
• 随着CSS属性逐年增多，每年都可能有新的方法

基本单位

长度单位

• px：pixel
• em：相对于自身font-size的倍数
• 百分数
• 整数
• rem
• vw和vh
• 其他

颜色

• 十六进制: #FF6600 or #F60
• RGBA颜色: rgb(0, 0, 0) or rgba(0, 0, 0, 1)
• hsl颜色: hsl(x, y, z)