css

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)   需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于html元素，即相对于浏览器窗口。

2、相对定位(position: relative)  需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 

什么叫做“偏移前的位置保留不动”呢？

就是虽然元素相对于以前的位置产生了偏移，但是元素以前的位置还是保留着，所以后面的元素会显示在了之前的元素以前位置的后面。

3、固定定位(position: fixed)  需要设置position: fixed（表示固定定位）表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

长度值：

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素或者父元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px，如果没设置父元素，会一直沿着DOM树往上找，如果一直没有，就使用浏览器的默认设置

3、rem（IE8以下不支持，IE9部分支持）

和em很像，区别在于rem参照的font-size是固定html标签的。如果html没有设置，则使用浏览器的默认设置。

水平居中：

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

定宽块状元素

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

不定宽块状元素

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1. 加入 table 标签 （利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。）
2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的（将父元素左浮动，relative并left偏移50%，将子元素relative，并left偏移-50%）

垂直居中：

父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的

父元素高度确定的多行文本

方法一：直接插入 table 中 (包括tbody、tr、td)标签，同时设置 vertical-align：middle（td默认）。

方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），vertical-align:middle，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

 

盒子模型：

从上到下的层次分别为border,content+padding,background-img,background-color,margin

 pointer-events:none|auto　　定义元素是否可穿透

letter-spacing:50px;　　定义字母或者文字之间的间隔

word-spacing:50px;　　定义单词之间的间隔

line-hight:5em;　　　　定义行高

text-indent:2em;　　　　首行缩进两个字

text-decoration:line-through;　　删除线

text-decoration:underline;　　下划线

text-align:center;　　块状元素居中

clear:both;　　清除浮动（紧邻）

80% overflow:hidden 清除浮动

clear:both; overflow:hidden 清除因为子元素全部浮动而导致的父元素塌陷（写在父元素上）

.clear-fix:after {
display: table;
content: '';
clear: both;
}　　清除浮动

vertical-align: middle; 垂直方向居中（inline或是inline-block有效）

border-collapse: collapse; 将表格中的边框进行合并

::selection{　　　　　　　　//设置网页中选中部分的效果

　　background-color:#000　　

}

contenteditable="true"　　//html5新特性，让元素可读写。高度随内容撑开

user-modify　　//作用与上面类似

{　　

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

}　　//单行文本溢出部分使用省略号隐藏

{

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

}　　//多行文本溢出部分使用省略号隐藏（仅适用于webkit内核浏览器和移动端）

word-break: break-all; 只对英文起作用，以字母作为换行依据。

word-wrap: break-word; 只对英文起作用，以单词作为换行依据。

white-space: pre-wrap; 只对中文起作用，强制换行。

 IE的不兼容

1.div{filter:alpha(opacity=50);} /* for IE8 and earlier */

 div{opacity:.5;} /* for IE9 and other browsers */

　min-height IE6不支持，IE6本身会自动撑开高度，可以写_height:350px;