【零基础入门】 css学习笔记（4） 布局与定位 介绍

写在前面：
作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。

最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点慢。

布局与定位

CSS有三种基本的定位机制：普通流、浮动、绝对定位（其中position:fixed;是position:absolute的一个子类）。除非专门指定，否则所有的元素都在普通流中定位，即其位置由元素在html中的位置决定。
实际工作中，经常有元素不仅要并排，而且要能设置宽、高。但是普通流无法满足要求，因此需要脱离普通流。元素脱离普通流常用的方式：浮动、绝对定位
CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠。

1.1 普通流

1，在普通流中，浏览器如何摆放页面元素
流： 是浏览器在页面上摆放html元素所用的方法。浏览器从html文件最上面开始，从上到下沿着 元素流 逐个显示所遇到的各个元素。

块元素：浏览器先显示文档中的第一个元素，然后换行；然后是第二个元素，接下来又是一个换行，如此继续。
● 占一行
● 能设置宽、高、margin 、padding属性；
● 如果不设置宽度，那么宽度将默认变为父亲的100%。

内联元素：在水平方向上相互挨着，总体上会从左上方流向右下方。
● 与其他行内元素并排显示，直到该行排满。
● 其宽度、高度根据其内容决定，设置宽、高属性无效果。
● 元素的padding和margin影响左右，不影响上下

display:inline-block; 该元素既具有block的宽、高特性，又具有inline的同行显示特性

1）浏览器并排摆放两个内联元素时：
若两个内联元素都有外边距，例如：左边元素外边距为10px，右边元素外边距为20px，则两个元素之间有30px空间。

2）浏览器上下放置两个块元素时：
会把它们共同的外边距折叠在一起，折叠后的外边距是两个外边距中较大的外边距。

举例说明：
1，span div 元素分别设置宽、高、边框，但span并没有被撑开。


2，在span中加入文本内容，则边框才能被撑开。


3，增加a元素，设置margin属性，两个内联元素并排摆放，但只有左右方向有margin。

4，span增加display:inline-block属性，则宽、高属性生效。还能与其它内联元素并排。