居中是我们在css中经常遇到的问题，一般有水平居中、垂直居中、垂直水平居中这3种情况，那么今天首先就来对学习到的水平居中的方法做个总结笔记。
- css水平居中
- text-align:center
它的效果为： 将父元素设置了text-align：center之后，子元素中的文本会表现为水平居中；
为了看得更清楚，我们举一个例子，如图，我们将div2放入div1中，现在，如果我们想让文字在div2中水平居中，那么将它的父元素div2或者（div1）设置为text-align:center即可。因为子元素会继承text-align这个属性。
那么接下来，如果我们想让div2也相对于div1水平居中，应该怎么办呢？既然居中效果只对文本内容和行内元素有效，那我们将div2设置为display：inline-block；我们再来看看效果：
我们看到div2与里面的文字都水平居中了，但是我们发现这一段文字水平居中之后很难看，我们只想让div2水平居中，这也就是这种方法的不足之处，子元素的text-align继承了父元素的center，文字也居中显示，所以我们需要在子元素中设置text-align：left；
这样就变正常啦~
2. margin：0 auto；
（1）子绝父相水平居中：因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值，margin为auto的前提下，只要 left 和 right 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现水平居中了。
（2）利用margin负值：将div设置为绝对定位，父元素为相对定位，然后将div的left和top属性值分别设置为50%，但是这个时候只会让div的左上角居中，然后在将margin-left和margin-top属性值分别设置为负数，并且值为div的宽和高的一半，这样就是先了div的中心点居中，但如果它没有父元素，或者父元素中没有采用绝对定位或者相对定位的，那么就以窗口为定位参考对象，也就是整个div相对窗口居中了。
效果看下面两张图，图一中div1设置了相对定位，div2为绝对定位，所以div2在div1中水平居中。
图二中div1设置了无定位，div2为绝对定位，所以div2相对于视窗居中。
- line-height
line-height用于实现单行文本的垂直居中，如下图中，我们要求单行文本垂直居中，只需要将div2设置行高line-height和height的值相同即可，也可以不用设置高度，因为单行文本的行高会撑开高度，其实二者就是一样的值。
但是这种方法有个不足之处，那就是如果文字内容的长度大于块的宽度时，就有一部分内容脱离了块，因为就不再是单行文本了，所以此方法只适用于单行文本。
还有一个方法就是，如果不设置元素height的情况下，那么本身就是元素包裹着内容，这时候只要将padding-top与padding-bottom设置为相同的值，同样是垂直居中的效果，而且这种方法对多行文本等都通用。
- vertical-align：middle
通过设置vertical-align：middle也可以实现垂直居中，但它有以下几种情况：
如下图，div2中同时又inline和inline-block元素，我们没有给div2设置高度时，它的高度由图片的高度撑开，而且图片和文本显示在一行，但我们发现图片下方有空隙，这是因为inline-block自带vertical-align属性，而且是默认值baseline。现在我们把vertical-align设置为middle，就会呈现出垂直居中的效果。（vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>这样的元素是不行的。）
但是当我们给div2设置了高度之后，vertical-align：middle就不起作用了。要加上inline-height之后才可以。
当容器里只有文字没有图片时，还可以利用 display 和 vertical-align 对容器里的文字实现垂直居中。通过将父元素的display设置为table-cell，并设置vertical-align:middle，可使其子元素均实现垂直居中，这和表格里单元格的垂直居中是类似的。
- 新增一个基准元素
在div2之前新增一个基准元素，设置它的高度等于父元素高度一半，之后再给要垂直居中的元素设置margin-top的值的大小是负的它自身高度，在设置line-height，则实现了垂直居中。
- 绝对定位实现垂直居中
因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把高度设置为固定值，margin为auto的前提下，只要 top和 bottom 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素height 的一半，就可以实现垂直居中了。
通过之前总结水平居中与垂直居中的基本方法，梳理垂直水平同时居中的方法就没有那么乱了。
- text-align：center + line-height
如下图，div2中用text-align+line-height实现单行文本水平垂直居中。
也可以将div2设置为inline-block实现div垂直水平居中。
- text-align：center + vertical-align：middle
如果想让div2在div1中居中，那么需要将父元素设置text-align：center，因为居中效果只对文本内容和行内元素有效，那我们将子元素div2设置为inline-block元素，还要将父元素设置为设置为table-cell元素，vertical-align：middle，
- margin：0 auto+vertical-align：middle
margin: 0 auto；在本身元素上设置，可以实现块级元素水平居中，所以将子元素设置为margin：0 auto；再还要将父元素设置为设置为table-cell元素，vertical-align：middle即可
- 绝对定位实现垂直水平居中
绝对定位元素垂直水平居中：因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值，margin为auto的前提下，只要 left 和 right 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现水平居中了。垂直居中也是如此，只要top与bottom的值也相等或者都为0就可以，这样我们的绝对定位元素就做到了垂直水平居中了。
- overflow属性
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条，是否隐藏溢出部分等行为，规定当内容溢出元素框时发生的事情。
- 可能的值有：
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。
- overflow-x与overflow-y
overflow-x主要用来定义对水平方向内容溢出的剪切，而overflow-y主要用来定义对垂直方向内容溢出的剪切，如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同，且其中一个值显式设置为visible或者默认为visible，而另外一个值是非visible的值。则visible值会被重置为auto。
我们看下面这个小例子，div2在水平方向超出了容器div1，我们将div1的overflow-x设置为visible，overflow-y设置为scroll，但是发现水平方向并没有显示多余的部分，而是出现了水平滚动条，可见overflow-x被重置为auto了。同样，div2中文字在竖直方向超出了容器，我们将div2的overflow-y设置为visible，overflow-x设置为hidden，但是发现竖直方向并没有隐藏多余的部分，而是出现了竖直方向的滚动条，可见overflow-y也被重置为auto了。
如果子元素为绝对定位元素，而父元素没有定位时，给父元素设置overflow并不起作用。就像下图，div2为绝对定位元素，给div1设置了overflow：hidden之后它超出div1的部分并没有被裁掉。只要给父元素设置定位position:absolute，fixed或relative之后就可以了。
CSS背景-background
- 复合属性—background
如果同时设置了background-color和background-image时，背景颜色会被图片覆盖。
background-image: 用作背景的图片，background:url( )；
如果将背景设置为图片，那么我们就要考虑以下几个属性了。
background-repeat:
repeat-x:横向平铺
repeat-y:纵向平铺
round：背景图像自动缩放直到适应且填充满整个容器。
space：背景图像以相同的间距平铺且填充满整个容器或某个方向。
repeat：背景图像在横向和纵向平铺，默认值。
no-repeat:不平铺
background-size:
具有两个参数，值既可以是px也可以是%或者是auto（默认）。若只有一个参数，则为宽度，高度等比例缩放，如果背景图片的尺寸超过容器，将会被裁切。若有两个参数，则为宽高。
cover：背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器，不过超出的部分将会被裁切。
contain:此属性值可以将背景图片等比例放大或者缩小。contain只要求某一个方位上将容器覆盖，比如纵向或者横向能够最小程度将容器覆盖。
background-position:确定背景图片的位置
background-position : length || position
length:<percentage> | <length>
position：left center|left top| ……
1、background-position:0 0；
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。该属性定位不受元素的 padding影响，例如，我们给容器元素增加padding值，只是影响了容器元素的高度和宽度，背景图片的左上角还是与容器元素的左上角对齐。
2、background-position:-10px -20px;
图片以容器左上角为参考向左偏移10px，向上偏移 20px，
3、background-position:50% 50%;
图片水平和垂直居中。与 background-position:center center;效果等同。
等同于x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。
x=(300-178)*50%=61px y=(300-108)*50%=96px
4、background-position:100% 100%;
图片处于容器元素的右下角，与 background-position:right bottom;效果等同。
background-attachment：定义用户滚动页面时背景图片会发生什么。
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
但是有一种情况例外：对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。
fixed：背景图相对于视口固定，就算元素有了滚动条，背景图也不随内容移动，好像背景图片被钉到了视窗上一样。
local：背景图相对于元素内容固定。
背景图片会随着页面其余部分的滚动而移动。但如果内容是可以滚动的元素（设置为overflow:scroll的元素），背景图会随元素内容的滚动而滚动，因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。
这就是关于background这个复合属性的一些基本知识啦~
CSS列表及导航条
大多数网页中都包含某种形式的列表，今天我们就来联系几个基本的导航条。
- 垂直导航条
注意要点：
- 去掉默认的项目符号（list-style-type:none）,将外边距和内边距都设为0。
- 以em设置导航列表的宽度。.nav{8em;}
- 讲锚的display属性设置为block，这样就可以给它设置宽高了，设置height后与line-height保持相同，达到文字垂直水平居中。
- 去除链接下划线 ，a{text-decoration:none}
- 去除最后一个链接的底边框与列表的底边框形成的双线 .nav .last{border-bottom: 0px;}
- 用a:hover,a:focus与.selected a{}为菜单增加交互效果。
- 简单的水平导航条
注意要点：
- 浮动列表项 使用外边距把他们分开，也可以把display属性设置为inline。
- 控制好li中的元素与li之间的距离。
- 让prev与next链接的样式稍有不同，的用属性选择器寻找他们的rel属性（指定当前文档与被链接文档的关系）.home a[rel="prev"],.home a[rel="next"]
- 图形化水平导航条
把垂直导航条变成水平导航条
css中的相对定位与绝对定位
之前说过了CSS有三种基本的布局机制：普通流、浮动和绝对定位。除非专门指定，否则所有的框都在普通流中定位。而普通流中元素框的位置由元素在HTML中的位置决定。
- 相对定位
相对定位实际上被看做普通流定位模型中的一部分，因为它是通过设置垂直或者水平位置，让这个元素相对于它原来的位置移动。而且，虽然它从原来位置移走，但是仍然占据原来所占的空间。可以用left,right来控制元素向右,左的移动，可以用top,bottom来控制元素的下,上的移动。需要注意的是：相对定位时，数值型偏移是对于元素自身的，而百分比却是相对于包含块的width与height的。如下图：
- 绝对定位
绝对定位是CSS中3种定位机制之一，它会使定位元素与文档流无关，因此不占据空间。文档流中其他元素会像绝对定位的元素不存在时一样布局。
绝对定位元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于初始包含块document。
绝对定位元素的伸缩性：当我们把 width 设置为 auto 的时候（或者不设置 ），绝对定位元素会根据其 left 和 right 自动伸缩其大小。top与bottom也是如此。
绝对定位元素居中：因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值，margin为auto的前提下，只要 left 和 right 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素 width 的一半，就可以实现水平居中了。
垂直居中也是如此，只要top与bottom的值相等就可以，这样我们的绝对定位元素就做到了垂直水平居中了。
CSS中的块级元素（block）与行内元素（inline）
css中有3种基本的定位机制：
普通流（相对定位实际上看做普通流定位模型的一部分）
浮动（float）
绝对定位（固定定位是绝对定位的一种）
所以在学习浮动之前，我们先要了解块级元素与内联元素（行内元素）。
块级元素：块级元素一般当做容器使用，既可以容纳内联元素也可以容纳块级元素，例如div和p。
常见的块级元素:
（1）div：主要用来进行框架布局。
（2）h1～h6：用来设置不同级别的标题。
（3）p:创建段落，会自动在其前后创建一些空白。
（4）hr:用来创建分隔先。
（5）ol:创建有序列表。
（6）ul:创建无序列表。
块级元素的特点：
1.块级元素既可以容纳内联元素也可以容纳块级元素。
2.块级元素在默认的情况下是独占一行的。
3.块级元素大小是可以控制的，css可以通过width与height设定高度和宽度。宽度默认值就是它所在容器宽度的100%。
4.块级元素可以设置margin和padding属性.
5.块级元素对应属性display：block；
内联元素：任何不是块级元素的可见元素都是内联元素。内联元素只能够容纳文本或者内联元素。
常见的内联元素:
（1）strong：加粗强调。
（2）em：斜体强调。
（3）s：删除线。
（4）u：下划线。
（5）a：超链接。
（6）span：常用行级，可定义文档中的行内元素。
（7）img：图片。
（8）input:表单。
内联元素的特点：
1.内联元素默认情况下可以和其他内联元素元素在一行上。
2.内联元素默认情况下的大小是不可以控制的。
3.内联元素可以产生代码换行和空格。
4.内联元素对应属性display：inline；
5.内联元素只能容纳文本或者内联元素。
内联元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.
display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。
盒模型——标准盒模型与怪异盒模型
盒模型是CSS中一种重要的思维模型，理解了盒模型才能进行更好的页面布局。顾名思义，我们把页面上所有的元素都看做是一个生活中常见的盒子，它具备内容（content），内边距（padding），边框（border），外边距（margin）四个属性，也就是我们所谓的盒模型。
让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；
内边距（padding）可以理解为盒子里装的东西和边框的距离，也可以想象成为了保护盒子里的东西不被撞坏而填充的泡沫材料；边框（border）有厚薄和颜色之分，也就是盒子本身了；内容（content）就是盒子中间装的东西，比如元素，图片，或者是祥礼品盒一样一层套一层的小盒子。不过与现实中的盒子不同的是，现实中的盒子不能装比它本身大的东西，会撑坏，但是CSS中的盒子是有弹性的，它不会被撑坏，只会被撑大；外边距（margin）就是边框外面自动留出的一段空白，也可以看做是盒子与盒子之间不能放得太挤，为了方便拿出了留有的空隙。
盒模型分为两种：标准盒模型与怪异盒模型。
- 标准盒模型（ IE6及其更高的版本，还有现在所有标准的浏览器都遵循的是W3C标准盒模型）
- IE盒模型（IE盒模型是怪异模式（Quirks Mode）下的盒模型，IE6以下版本的浏览器遵循的是IE盒模型。）
)
例子：如下图所示，div1与div2都是width：100px；height：100px；padding：10px；border：5px；margin：30px；但给div2设置了box-sizing：border-box；所以它遵循IE盒模型。由此可以看出
div1占据的位置为100px+10px*2+5px*2+30px*2=190px；
div2占据的位置为70px+10px*2+5px*2+30px*2=160px；
盒模型的box-sizing属性：
CSS3新增了一个属性box-sizing: content-box / border-box / inherit，默认值为content-box。如果值为content-box，那元素遵循的是W3C盒模型；如果值为border-box，那元素遵循的是IE盒模型；如果值为inherit，该属性的值应该从父元素继承。
为了让网页能兼容各个浏览器，让网页在各种浏览器中都按标准盒模型解析，就要在网页顶部增加DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这就是盒模型的基本内容啦~