CSS网页布局

本文作为个人笔记，内容大多从网上查阅

• 标准文档流

提到布局就不得不提一提标准文档流了：

文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准流的微观现像：

1.空白折叠现象 多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐 文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写 如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

• 标准文档流等级

分为两种等级：块级元素和行内元素；
块级元素：
1).霸占一行，不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
行内元素：
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度

• 块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：
一旦，给一个块级元素（比如div）设置：

display: inline;
那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了

行内元素转换为块级元素：
同样的道理，一旦给一个行内元素（比如span）设置：
display: block;
那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父亲

• 浮动现象

• float浮动现象

• relative布局
  relative
  通过设置水平距离（left/right）或垂直距离（top/bottom），让这个元素相对于它的起点移动。元素仍然占据原来的空间。所以当div2偏移100px时，div1，3都保持在原来的位置。
  

• absolute布局
  绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他的元素的布局就像绝对定位元素不存在时一样。绝对定位的元素的位置相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，这样就出现了一个层次的问题，我们可以通过z-index属性来控制这些框的堆放次序。z-index的值越高，框在堆中的位置就越高。

• 让div水平居中的css设置

margin:0 auto;