写在前面：作为一个刚开始写技术博客的新手，看到有人收藏文章，写的动力又飙升了。这应该是写技术博客的好处之一：可以给自己带来成就感和干劲。最近CSS布局定位相关的内容整理的有点慢，因为我同时在做freecodecamp的题，所以节奏有点慢。布局和定位CSS有三种基本的定位机制：普通流式、浮动式和绝对式定位（其中position:fixed；是position:absolute的子类）。除非另有说明，否则所有元素都按正常流定位，即它们的位置由元素在html中的位置确定。在实际工作中，经常有一些元素不仅需要并排，还需要能够设置宽高。但是普通流无法满足要求，所以需要脱离普通流。元素脱离正常流动的常用方式：浮动、绝对定位CSS提供了一些定位和浮动的属性。使用这些属性，您可以创建将布局的一部分与另一部分重叠的列布局。1.1普通流程1、普通流程中，浏览器如何排列页面元素流：是浏览器用来在页面上放置html元素的方法。浏览器从html文件的顶部开始，沿着元素流从上到下逐一显示它遇到的每个元素。块元素：浏览器显示文档中的第一个元素，然后是换行符；然后是第二个元素，然后是另一个换行符，依此类推。●占一行●可以设置width、height、margin、padding属性；●如果不设置宽度，宽度默认为父级的100%。内联元素：在水平方向上并排排列，一般从左上向右下排列。●与其他行内元素并排显示，直到行满为止。●其宽度和高度由其内容决定，设置宽度和高度属性无效。●元素的padding和margin影响左右，不影响上下显示：inline-block；this元素既有块的宽高特性，又有内联的并行显示特性1）当浏览器并排放置两个内联元素时：如果两个内联元素有外边距，例如：左边元素的外边距为10px，右边元素的margin为20px，则两个元素之间有30px的间距。2）当浏览器上下放置两个块元素时：会将它们共同的边距折叠在一起，折叠后的边距是两个边距中较大的边距。例如：1、分别设置spandiv元素的width、height、border，但span没有拉伸。2.只有在span中加入文本内容才能拉伸frame。3、添加a元素，设置margin属性，将两个内联元素并排放置，但只有左右两个方向有边距。4.给span添加display:inline-block属性，然后width和height属性才会生效。它也可以与其他内联元素并排放置。
