CSS(Cascading Style Sheets)全称为：层叠样式表。
1、HTML元素类型
(1) 内联元素(inline)：可以理解为“文本模式”，即从左到右顺序显示，不单独换行。常用的内联元素有：a, img, input, select, lable, span, textarea 等，和一些文本标记标签，如：small, big, strong, em, i, b（加粗）, sub（下标）, sup（上标）, u（下划线）等。
(2) 块级元素(block)：单独一行，没有特殊定位时，从上到下依次排列 (文档流)。常见的块级元素包括：div, h1—h6, ul, li, ol, p, table, form 等。
css中，我们可通过 display:block; 将内联元素定义为块级元素，换行显示；通过 display:inline; 使块级元素行内显示。
2、块级元素的定位
position有4种定位类型，影响元素框的生成方式：
(1) static：默认定位方式。
(2) relative：相对定位。元素框偏移某个距离，不可以层叠。相对于其在普通流中的位置进行移动，依然存在于文档流中。
(3) absolute：绝对定位。元素从文档流中删除，可以层叠显示，层叠可以通过z-index属性设置。相对于其最近的一个有定位设置的父元素进行绝对定位，如果不存在这样的父对象，则相对于body定位。
(4) fixed：固定定位。与absolute相似，fixed相对于浏览器窗口对元素定位。(低版本的IE不支持)
3、浮动 float
在css中，任何的元素都可以浮动。给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框，此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
使用float会造成“塌陷”问题，为解决这个问题，这里给出2种方法（借鉴）：
(1) 在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div :
代码：
<div>
<div><span>块1</span> float:left </div>
<div><span>块2</span> float:left</div>
<div><span>块3</span> float:left</div>
<div></div>
</div>
(2) 在使用float元素的父元素添加 overflow:hidden;
4、‘display‘、‘position‘ 和 ‘float‘ 的关系
(1) 浮动或绝对定位的元素，只能是块级元素或表格。
(2) "position:absolute;" 和 "position:fixed;" 优先级最高，有它存在的时候，浮动不起作用。
(3) 如果 ‘display‘ 的值为 ‘none‘，那么 ‘position‘ 和 ‘float‘ 不起作用。
5、z-index 不起作用
z-index起作用的前提是元素要有position属性；
有时候position为relative是z-index也不去作用，这时候修改为absolute；有浮动时可能也会导致z-index失效，这时候仍是修改它的position属性；
6、文本溢出处理
(1) overflow:hidden，隐藏溢出文本。
(2) world-wrap:单词是否换行显示，break-word允许拆分长单词。
(3) text-overflow：当文本溢出包含元素时发生的事情。
注意：我们要想实现溢出文本以省略号显示，必须强制定义：文本在一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden）。
例：p{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
7、border
一条边为透明： border-bottom-color：transparent；左上圆角：border-top-left-radius:5px;
border-radius的含义是：圆角.border-radius:100px / 10px;是一种缩写方法.如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。
(1)css制作小三角(朝下的红色小三角)：
.san{
width: 0;
border-top: 5px solid red;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
8、阴影效果
例：box-shadow:1px 2px 5px #ccc;
参数说明：（X轴偏移量 Y轴偏移量 模糊扩散范围 颜色），前两个参数为0表示，阴影为四周都有；可以添加多个阴影，eg：box-shadow:1px 2px 5px #ccc，1px 1px 3px #ccc inset(内部阴影)。
9、背景图片的设置
{background-image:url(a.jpg); width:200px; height:200px;}这里的宽度和高度设置的时盒子的大小，并非背景图片的大小。
注意：在盒子中添加背景图片时，要给出盒子的高度，否则图片不显示。
Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。
(1)background-size 设置背景图片的大小
常见的属性值：
- cover：保持图像的宽高比，把背景图片扩展来完全覆盖背景区域；
- contain：保持图像的宽高比，将图片缩放到高度或宽度正好适应定义背景区域；
- 数值显示：background-size：100px 200px；（背景图片固定大小）
- 百分比显示：background-size：50% 80%；（图片拉伸，使宽度为背景区域的50%，高度为被背景区域的80%）。
(2) background-attachment 设置背景图像是固定还是随着滚动
常用属性值：
- scroll：滚动，默认值；
- fixed：固定；
(3) background-position 设置背景图片位置
需要先设置图像为固定，CSS中背景图片定位方法 background-attachment：fixed；
- center：上下左右居中；
- background-position：top center；水平靠上，左右居中
- 数值显示：background-position：100px 200px；距顶端100px，距左边200px；
- 百分比显示：background-position：20% 50%；
(4) background-clip 属性规定背景的绘制区域
- border-box：背景被裁剪到边框盒 (默认值)；
- padding-box：背景被裁剪到内边距框；
- content-box：背景被裁剪到内容框；
(5) background-origin 属性规定背景的定位区域
- border-box：背景相对于内边距框来定位(默认值)；
- padding-box：背景相对于边框盒来定位；
- content-box：背景相对于内容框来定位；
(6) 多重背景图
div { background-image: url(‘ img1.jpg ‘), url(‘ img2.jpg ‘); }
10、背景颜色设置
背景设置多个颜色，过渡效果：background-image:linear-gradient(to bottom ,red,yellow);
11、透明度设置
IE：filter:alpha(opacity:30);
FF/Chrome:opacity:0.3;