CSS 网页的美容师
理想中的结果： 结构(html)与样式(css)相分离
1.引入CSS样式表（书写位置）
行内式（内联样式） :<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
内部样式表（内嵌样式表）:
<head><style type="text/CSS">选择器（选择的标签） {属性1: 属性值1;属性2: 属性值2; 属性3: 属性值3;}</style></head>
外部样式表（外链式）:
<head><link rel="stylesheet" type="text/css" href="css文件路径"></head>
2.CSS样式规则
3.css基础选择器
4.CSS字体样式属性
font:
字体外观属性：
5.CSS 列表和表单
表格是用来显示数据的，列表是用来布局的。
列表：
表单：
input控件
input常用属性：
h5新增的表单属性placeholder也很常用，显示用户提示文字。
label标签
label标签绑定元素:
第一种用法就是用label直接包括input表单。
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
适合单个表单选择
第二种用法 for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label><input type="radio" name="sex" id="sex">
textarea控件(多行文本输入框)
<textarea >文本内容</textarea>
select下拉列表
<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>
form表单域
常用属性：fieldset表单字段集
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为<fieldset> 元素定义标题
<fieldset style="border: 1px solid #01567F"><legend style="font-size: 15px; font-family: 黑体; color: #0A467E; margin-left: 15px;">用户信息</legend><div>用户名称：<input type="text"></div><div>用户密码：<input type="password"></div></fieldset>
6.CSS复合选择器
7.标签显示模式（display）
块转行内：display:inline;行内转块：display:block;块、行内元素转换为行内块： display: inline-block;8.CSS 背景(background)
9.CSS三大特性
CSS层叠性
CSS继承性
CSS优先级
权重计算公式
10.CSS盒子模型
标准盒子模型
1. 盒子边框（border）
语法：border : border-width || border-style || border-color
边框的样式：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线dotted：边框为点线
表格的细线边框
通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
但是两个单元格之间的边框会出现重叠，从而使边框变粗
通过css属性：
table{ border-collapse:collapse; }
collapse 单词是合并的意思border-collapse:collapse; 表示相邻边框合并在一起。
圆角边框(CSS3)
语法：
border-radius:length;
其中每一个值可以为 数值或百分比的形式。
盒子阴影(CSS3)
语法:
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
前两个属性是必须写的。其余的可以省略。外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset
2. 内边距（padding）
当我们给盒子指定padding值之后， 发生了2件事情：
内容和边框 有了距离，添加了内边距。盒子会变大了。
padding简写：
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
内边距产生的问题
问题：会撑大原来的盒子解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小
padding不影响盒子大小情况
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
3. 外边距（margin）
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
块级盒子水平居中
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;
清除元素的默认内外边距
* {padding:0; /* 清除内边距 */margin:0;/* 清除外边距 */}
外边距合并
相邻块元素垂直外边距的合并:
解决方案：尽量给只给一个盒子添加margin值。
嵌套块元素垂直外边距的合并（塌陷）
解决方案：
可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题
盒子模型布局稳定性:width > padding > margin
margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。width 没有问题,经常使用宽度剩余法 高度剩余法来做。
11.浮动（float）
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 脱离标准普通流的控制移动到指定位置。选择器 { float: 属性值; }
浮动口诀
float----- 浮 漏 特
1). 浮动元素与父盒子的关系
子盒子的浮动参照父盒子对齐不会与父盒子的边框重叠，也不会超过父盒子的内边距
2). 浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
浮动的，那么当前盒子会与前一个盒子的顶部对齐；普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
清除浮动
什么时候用清除浮动呢？
父级没高度子盒子浮动了影响下面布局了，我们就应该清除浮动了。
12.定位(position)
在 CSS 中，通过position属性定义元素的定位模式，语法如下：
选择器 {position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
在 CSS 中，通过top、bottom、left和right属性定义元素的边偏移：（方位名词）
定位改变display属性:
display 是 显示模式， 可以改变显示模式有以下方式:
可以用inline-block 转换为行内块可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
13.CSS高级技巧
13.1 显示与隐藏
display:隐藏之后，不再保留位置
display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。
visibility:隐藏之后，继续保留原有位置。
visibility：visible ; 对象可视visibility：hidden; 对象隐藏
overflow:
13.2 用户界面样式
鼠标样式:
轮廓线 outline:
outline : outline-color ||outline-style || outline-width
防止拖拽文本域resize:
<textarea style="resize: none;"></textarea>
13.3 vertical-align对齐
(1)水平居中对齐
有宽度的块级元素居中对齐，是margin: 0 auto;让文字居中对齐，是 text-align: center;
(2)vertical-align 垂直
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
vertical-align : baseline |top |middle |bottom
图片、表单和文字对齐: 默认的图片会和文字基线对齐
(3)去除图片底侧空白缝隙
解决的方法就是：
给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。给img 添加 display：block; 转换为块级元素就不会存在问题了。
13.4 溢出的文字省略号显示
首先强制一行内显示，再次和overflow属性 搭配使用
/*1. 先强制一行内显示文本*/white-space: nowrap;/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;
13.5 CSS精灵技术（sprite)
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
我们需要使用CSS的
background-image、background-repeatbackground-position属性进行背景定位，其中最关键的是使用background-position 属性精确地定位。
13.6. 滑动门
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<li><a href="#"><span>导航栏内容</span></a></li>
css样式
* {padding:0;margin:0;}body{background: url(images/wx.jpg) repeat-x;}.father {padding-top:20px;}li {padding-left: 16px;height: 33px;float: left;line-height: 33px;margin:0 10px;background: url(./images/to.png) no-repeat left ;}a {padding-right: 16px;height: 33px;display: inline-block;color:#fff;background: url(./images/to.png) no-repeat right ;text-decoration: none;}li:hover,li:hover a {background-image:url(./images/ao.png);}
ao.png：
to.png：
总结：
a 设置 背景左侧，padding撑开合适宽度。span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。之所以a包含span就是因为 整个导航都是可以点击的。
13.7 margin负值之美
1). 负边距+定位：水平垂直居中
一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。
2). 压住盒子相邻边框
13.8 CSS三角形之美
div {width: 0; height: 0;line-height:0；font-size: 0;border-top: 10px solid red;border-right: 10px solid green;border-bottom: 10px solid blue;border-left: 10px solid #000; }
我们用css 边框可以模拟三角效果宽度高度为0我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
