css布局与定位

布局

流体布局

流的概念：浏览器从html文件的最上面开始，从上到下沿着元素流逐个显示遇到的元素，块元素从上向下流，内联元素水平方向上相互挨着，总体从左上流向右下。

浮动元素：游览器正常的将元素流向页面，当遇到浮动元素时会尽可能的将元素安排在浮动位置上，并且在流中删除该元素。由于浮动元素不存在流中，其他元素会继续填充页面，不过在对其他元素中内联元素进行定位时会考虑到浮动元素，它们会围绕浮动元素。即表现为浮动元素飘浮在其他元素上面，但是不会有其他内容与之冲突。

表现：width: 200px;  指定浮动元素内容区宽度。   float: right;  指定浮动位置。

分栏显示：为了让布局从整体上为分栏显示，通常将与浮动元素位置一致的块元素设置合适外边距，不会选择指定width（指定宽度的元素，在页面进行缩放时不会随之改变。）

常见问题：当不希望浮动元素影响深入到其他元素（页脚）时，为其他元素（页脚）指定clear属性。clear: right;  保证右边没有浮动元素

冻结布局

为整个页面设定宽度，当游览器进行缩放时，页面大小不发生变化。

凝胶布局

在冻结布局的基础上为整个页面添加：margin-left: auto;  margin-right: auto;  确保缩放游览器时，页面居中显示。

绝对布局

表现：position: absolute;  指定元素为绝对定位  top: 100px;  right: 100px;  指定元素在页面上的绝对位置。游览器在遇到绝对定位元素时会将该元素从流中完全删除，其他元素会完全忽略该元素的存在，所以流中的内联元素也不会围绕绝对定位元素。

（relative为相对定位，fixed为固定定位，相对于游览器窗口边界的偏移量，不会随着滚动页面而移动。sticky为粘性元素，粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例：position:sticky; top:10px;在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。）

表格布局

表现：在一个有行和列的表格中显示块元素。

实现：首先，为整个表格增加<div>，并为其指定样式：display:table;可以为表格指定单元格之间的边框间距，border-spacing: 10px ；接下来为每一行增加<dv>，指定样式：display: table-row;   ；最后为单元格指定样式：display: table-cell;  。 

总结：浮动布局适用于希望页面内容围绕着浮动元素的情况，绝对定位可以用于需要在页面上显示某张小LOGO，表格显示布局适合于进行分栏布局，在表单进行布局时也常常使用表格显示布局。