CSS网页布局

今天对网页布局div+css进行了学习与回顾，在这里做一个总结吧。CSS表现标准语言是前端开发W3C标准的三大标准之一（另外还有html结构化语言，ECMAscript行为语言），网页开发的结构，样式及动作分别对应这三种标准语言。网页布局有三种定位机制：标准文档流、浮动、绝对定位。

1、标准文档流

标准文档流是从上到下，从左到右按序输出文档内容，它是由块级元素与行级元素组成。 一个块级元素从左到右独占一行，碰到页面边缘自动换行，每个块级元素都要另起一行，从上到下依次排列。常见的块级标签有div，ul，li，p。行级标签可以在一行内并列多个，例如span，strong，em，img，input等。

这两个元素都可以看作盒子模型，“盒子”可以用于盛放标签元素，以及图像、音频、视屏，还可以用于布局。盒子从内到外由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。

       

盒子的尺寸由四个部分尺寸相加，每个属性有四个子属性，按上右下左四个方向顺时针排列。例如设置四个方向不同宽度的边框（border：1px 2px 3px 4px;），即上边框为1个像素，左边框为4个像素。如果只设置三个属性值，其默认为上、左右、下(border：1px 2px 3px;)，左右边框为2个像素。只设置两个属性值，默认为上下、左右。只设置一个，四个方向都一样。

从三维角度来看，盒子模型从外到里依次为border、content+padding、background-image、background-color、margin。

在布局中经常要让元素居中，如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。如果是块状元素，且设置了宽度，可以用margin：Xpx auto;来实现。若宽度未设置，可以将块级元素设置为行内元素（display:inline;)，然后再用行内居中。设置单行元素垂直居中的方法是将父元素的height与line-height的值设置相同。块级元素的垂直居中可以设置块级元素display:table-cell;且设置vertical-align:middle;来实现，只不过这种方法对IE6、7不兼容。

2、浮动布局

如果要让块级元素并列显示，就需要使用浮动布局。浮动布局是通过float属性实现的。Float可以设置三种浮动方式：left，right，none，块级元素会依次从左到右排列直到碰到边界自动换行。元素设置了浮动属性后，其宽度不再占据整行，而是随着内容宽度的变化而变化。而且其相邻的元素会收到它宽度的影响而产生宽度变化。为了消除浮动带来的影响，常需要清除浮动，清除浮动方法有很多，常用的有设置被影响的元素clear：both;或者设置其width：100%;overflow：hidden;。

3、绝对定位

第三种定位方式为position属性的定位，它能够实现多种复杂定位效果。有四个子属性：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。

静态定位是没有设置position属性的默认定位，仍处于文档流中。

相对定位是指元素相对于原来的位置进行偏移，设置了相对定位的元素会产生空间z轴的堆叠，但仍处于标准文档流中。

绝对定位的元素完全脱离了标准文档流，相对于一个已经定位且离它最近的祖先元素（即position设置为相对、绝对、固定的元素）进行偏移，若没有已经定位的祖先元素，则相对于根节点（即html）进行偏移。需要注意的是，父元素的高度要设置大于绝对定位的子元素，因为脱离标准文档流的子元素无法将父元素撑开。

4、居中

在页面中常需要使元素居中，

第一种情况是对行内元素进行居中，其设置如下。水平居中是利用text-align属性，垂直居中是设置父标签的高度height和行高line-height之后再设置竖直对齐方式vertical-align

/*父标签设置*/
.img-wrapper {
    text-align: center;

    height: 1.5rem;
    line-height: 1.5rem;
}

/*子标签*/
.img-wrapper > img {
    width: 80%;

    vertical-align: middle;
}

另一种情况是针对块级标签的居中，父元素样式属性display:flex;子元素使用margin:auto。这种方式在子块级元素宽高不确定的时候（宽高会自适应为其里面内容的宽高）依然可以使用。

5、其他

不透明背景色：background:rgba(255,255,255,0.8);

位置固定到底部：position: fixed; bottom: 0;