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 不起作用
例：p{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
width: 0;
border-top: 5px solid red;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
- cover：保持图像的宽高比，把背景图片扩展来完全覆盖背景区域；
- contain：保持图像的宽高比，将图片缩放到高度或宽度正好适应定义背景区域；
- 数值显示：background-size：100px 200px；（背景图片固定大小）
- 百分比显示：background-size：50% 80%；（图片拉伸，使宽度为背景区域的50%，高度为被背景区域的80%）。
- scroll：滚动，默认值；
- fixed：固定；
- center：上下左右居中；
- background-position：top center；水平靠上，左右居中
- 数值显示：background-position：100px 200px；距顶端100px，距左边200px；
- 百分比显示：background-position：20% 50%；
- border-box：背景被裁剪到边框盒 (默认值)；
- padding-box：背景被裁剪到内边距框；
- content-box：背景被裁剪到内容框；
- border-box：背景相对于内边距框来定位(默认值)；
- padding-box：背景相对于边框盒来定位；
- content-box：背景相对于内容框来定位；
div { background-image: url(' img1.jpg '), url(' img2.jpg '); }
10、背景颜色设置
背景设置多个颜色，过渡效果：background-image:linear-gradient(to bottom ,red,yellow);
#field1::-webkit-input-placeholder { color:#00f; }
