css入门

资料查询

• 关键字+MDN
• CSS tricks
• 张鑫旭的博客

文档流

定义

其实就是块级元素和内联元素，但是由于有了display属性，则两者的分别模糊了

inline元素

• 元素从左到右，到达最右边才会换行
• 宽度为内部inling元素的和，不能用width指定
• 高度由inline-height间接确定，跟height无关

block元素

• block元素从上到下，每一个都另起一行
• block默认自动计算宽度，可用width指定
• 高度由内部文档流元素决定，可设置height

inline-block元素

• inline-block也是从左到右
• 结合两者特点，可用width
• 同上

overflow溢出

当内容大于容器时候

.rainbow{
    overflow:auto;  /*灵活设置*/
    overflow:scroll;  /*永远显示*/
    overflow:hidden;  /*直接隐藏溢出部分*/
    overflow:visible;  /*直接显示溢出部分*/
}

脱离文档流

下记的操作会使元素脱离文档流

• float
• position:absolute/fixed

盒模型

平时要用边界盒模型

margin合并

会合并的情况

• 父子margin合并
• 兄弟margin合并

怎么组织合并

• 父子

padding/border
overflow:hidden
display:flex

• 兄弟

display:inline-block