CSS学习笔记

基本概念

流动方向 inline元素（span）从左到右，到达最右边换行，空间不够会分行

block元素（div）从上到下，每一个都另起一行

inline-block也是从左到右，空间不够不会分行
宽度 display为inline的元素默认宽度由里面的所有元素决定。不接受宽度指定。（不要再inline元素中嵌block元素）

display为block元素的宽度默认为auto自动计算，但宽度可指定（不要写100%）

display为 inline-block的默认宽度是由里面的所有元素决定。
高度 inline高度由line-height间接确定，跟height无关

block高度由内部文档流元素（有些元素）决定，div会全部包住。可用设height

inline-block可以设置height，和block类似
overflow溢出解决方法：在block元素中设置属性：
1. overflow:hidden(使得超出部分自动隐藏，不可滚动)。
2. overflow:scroll（超出部分不超出，可以滚动查看，但不超出的时候滚动条会存在）。
3. overflow:visible(不管)。
4. overflow:auto（默认处理方式，超出可滚动，不超出无滚动条）。
脱离文档流 float和position属性为absolute/fixed的元素可以脱离文档流。

content-box：内容盒属性：
1. margin：外边距，内容区和border边界的距离
2. padding：内边距，内容区的border边界和内容元素的距离。
3. width：content的宽度
border-box：边框盒（好用）属性
1. width：border的宽度为内容宽度+padding+border
margin合并（只存在于上下方向）：两个盒内元素，如果一个设置margin-top，另一个设置margin-bottom，则两个margin会合并成一个。

如果不希望子元素之间合并，设置display：inline-block;就可以不合并。两个元素之间距离就会是margin-top + margin-bottom。

如果不希望子元素和父元素合并，就在子元素与父元素之间加一些东西，比如padding/border;或者overflow:hidden。