一、CSS概述
CSS英文名：Cascading Style Sheets
中文名：层叠样式表
作用：用于修饰网页信息的显示样式，控制网页的外观；
组成：选择器+一条声明；
选择器：表明要应用规则的元素；
声明：用于表明应该如何显示选择器指定的元素；
语法结构：选择器{属性：属性值} 例：{p:color:#000;}
样式表的种类：1.内部样式表 2.外部样式表 3.行内样式表
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
1、选择器：
通配符选择器 *{}
标签选择器：p{}
类别选择器：.classname{}
ID选择器：#idname{}
伪类选择器： ：link{} :visited{} :hover{} :active{} 巧记 L-V-H-O
群组选择器：h1,h2,p{}
后代选择器：div a{}
选择器的优先级：id>class>标签
2、文字属性：
字体颜色：color:#000;
字体类型：font-family:Arial/Verdna/sens-serif; 默认的是：Arial
字体大小：font-size:12px;
粗体：font-weight:normal普通显示/bold粗体显示;
斜体：font-style:normal普通显示/italic斜体显示/oblique倾斜;
文字大写：text-transform:uppercase;
文字小写：text-transform:lowercase;
3、段落属性：
文本缩进：text-indent:2em/-2em;//可正可负
文本对齐：text-align:center/left/right;
文本修饰：text-decoration:none/underline/overline/line-through;
行高：line-height:20px;
字符间距:letter-spacing:2px;
词间距：word-spacing:2px;
4、背景属性：
背景颜色：background-color:#f00;
背景图片：background-image:url(“路径”);
背景平铺：background-repeat:repeat(默认)/no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺);
背景位置：background-position:left/center/right/top/bottom/数值;
背景属性的缩写写法：background:url(路径) no-repeat center top;
5、列表属性：
list-style-type:none;清除列表的项目符号
list-style-img:url(路径);将一个图片作为项目符号使用
list-style-position:;表明项目符号显示的位置
list-style:disc;小圆点
list-style:circle;实心小圆点
list-style:square;实心正方形
6、定位：
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
语法：选择符{position:value;}
static：默认。标准文档流，默认值，无特殊定位，处于文档流中。
relative:相对定位。不脱离文档流，以自身的位置进行偏移。
absolute:绝对定位。脱标不占位，相对于具有定位属性的父级元素（除了静态定位）偏移。如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。
fixed:固定定位。是绝对定位的一种特殊形式，以浏览器窗口作为参照物。
注：固定定位始终以浏览器窗口为参照物，不管浏览器的滚动条如何滚动，也不管浏览器窗口大小如何变化它始终以浏览器窗口作为参照物。
7、浮动：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float:left/right;
float:left;左浮动，使块元素在一行显示。
float:right;右浮动，使块元素在一行显示。
8、其它常用属性：
border 边框
width （宽） height （高）
颜色 border-color ;
样式：border-style: dotted solid dashed none;
宽度：border- 2px;
border:宽度 颜色 样式（不能省略）
上边框颜色 border-top-color:
下边框复合属性 border-bottom:
9、边距和填充
外边距 margin
设置元素外边距的宽度
margin-topottomleft
ight
margin 复合属性，顺序为上右下左
padding内边距
内容和边框之间的的距离
padding-topottomleft
ight
padding 复合属性 上右下左
10、z-index属性
设置元素的层叠顺序，属性值为无单位的整数值，值较大的元素会叠加在值较小的元素之上
元素可拥有负的z-index属性值，默认值是：auto,默认层是：0层
当没有设置、属性或者层数相同时，后面的元素显示在上面
z-index的属性值，只能为整数，正整数，0，负整数
11、display属性
none不显示
inline-block行内块元素
block块元素
inline行内元素
12、overflow属性
指定对于盒中容纳不下的内容的显示方式
visible可见（默认值）
hidden隐藏
scroll滚动-一定出现滚动条
auto自动-按需出现滚动条
13、visibility 属性
设置可见性
visible：设置对象可视
hidden：设置对象隐藏
visibility:hidden与display:none的区别
visibility:hidden设置不可见的元素也会占据页面上的空间
display:none不可见的元素, 属性不占据页面空间
二、盒子模型
所谓盒子模型，在HTML里，所有页面元素都可以看成一个一个的框（盒子），这些元素与元素之间的距离，元素的边框，元素与元素之间的距离都会影响元素的位置和元素本身的宽和高。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
1、matgin外边距
元素与元素之间的距离叫做外边距
- margin-top:40px;
- margin-left:30px;
- margin-bottom: 40px;
- margin:10px 20px 30px 40px;/* 上 右 下 左 */
- margin:10px 20px 30px;/*上 左右 下*/
- margin:10px 20px;/*上下 左右*/
- margin:10px;/*上下左右*/
垂直外边距的合并现象：如果两个元素在垂直方向的外边距相遇时，将会有合并的现象，合并后的结果是，取两个外边距之中的较大者来作为两个元素的外边距！
如何让块级元素居中显示：margin：0px auto；（左右自适应）
2、border边框
n多样式，百度
3、padding内边距（填充）
- padding-top:40px;
- padding-left:30px;
- padding-bottom: 40px;
- padding:10px 20px 30px 40px;/* 上 右 下 左 */
- padding:10px 20px 30px;/*上 左右 下*/
- padding:10px 20px;/*上下 左右*/
- padding:10px;/*上下左右*/
元素的实际宽度=元素设置的宽度+元素的左右边框宽度+左右内边距+左右外边距
元素的实际高度=元素设置的高度+元素的上下边框宽度+上下内边距+上下外边距