CSS三大特性：
1. 层叠性：
后来定义的同一个样式会覆盖之前的样式（后来居上）
2. 继承性：
子元素会继承父元素的样式（子承父业）,但是也不是所有的样式都能能够继承：
3. 优先级（重点）
选择器不同，会出现样式同时设置生效优先级问题（权重）：
盒模型
盒子的大小 = 内容宽高度 + 内边距 + 边框
盒子模型的布局稳定性：
按照优先级：宽度（width）>其次使用内边距（padding）>再次使用外边距（margin）
圆角边框：
1. Border-radius: 10px。10代表圆形的半径
2. 1. Border-radius: 50%
3. 矩形设置圆角边框：只能指定半径大小为高度的一般，不能使用半分比形式
盒子阴影：
参数：水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内外阴影
box-shadow: 10px 10px 5px #888888;
box-sizing
作用：指定盒模型的计算方式。
取值：
box-sizing: content-box (默认值)
元素的width , height属性只设置内容尺寸，最终在文档中占据的尺寸为margin border padding width/height累加得到。
box-sizing: border-box
元素的width, height属性设置包含边框在内的区域大小，一旦元素设置内边距和边框，会压缩内容显示区域。
元素最终在文档中占据的尺寸由margin和width/ height相加得到。
内边距撑大盒子
设置完内边距后，一般会把盒子的原有大小撑大
解决：
减小内容的大小，让它减去内边距的大小即可，就能保证整个盒子的大小不变
Padding不会影响盒子大小的情况:
如果这个盒子没有宽度，padding就不会撑开盒子
外边距合并
有时候给两个元素设置外边距属性值，会产生冲突…
垂直方向上的外边距 : margin-top
问题：给子元素添加的margin-top属性,可能会作用于父元素上。
解决：
为父元素添加margin-top上外边框属性。
为父元素设置padding-top顶部内边框 ： padding-top：0.1px
为父元素设置overflow:hidden 溢出属性。（推荐）
垂直方向上的外边距 : margin-botten
两个块元素分别设置margin-top 、margin-botto，最终元素之间的距离取较大的值。
水平方向上的外边距(行内元素)：
默认行内元素水平方向上的外边距会叠加显示。
元素分类
行内元素
span 、lable 、a 、b、 i、strong、u、s、sub、sup
行内元素的特点：
可以与其他元素共行显示
默认尺寸由内容多少决定，不能手动设置宽高
行内块元素
img 、表单控件
可以与其他元素共行显示
可以手动设置宽高
行内元素只能嵌套行内元素或行内块元素
块级元素
body、 h1~h6、 p、 div、 table、 form、 ul、 ol、li
块级元素的特点：
每个块独占一行，不与其他元素共行显示
可以手动设置宽高
默认宽度与父元素保持一致(table除外，table的默认宽度与td单元格内容相关)
块元素中可以嵌套任何类型的元素
行内元素：无宽高度，行内元素是不能直接设置宽度和高度的！！
行内块元素：有高度，无宽度
行内块元素默认没有宽度
标准流在最底层（海底）------浮动的盒子在中间层（海面上）------定位的盒子在最上层（天空）
浮动元素是半脱离文档流的,不像position:absolute,fixed 完全脱离文档流 所以浮动的元素不会覆盖行内元素,但是可以覆盖块级元素,他们的权重顺序是:内联元素>浮动元素>块级元素
块级元素默认宽度会和父亲一样宽！
居中问题
盒子中的（文字、行内元素、行内块元素）水平居中对齐：
Text-align:center;
单行文本垂直居中：让文字的行高等于盒子的行高即可（推荐）
Vertical-align垂直居中：只针对于行内元素或者行内块元素
图片与同行文字居中对齐：
Img{vertical-align: middle;}
块级元素居中对齐：
1. 要有宽度
2. Margin: 0 auto;
元素水平垂直居中方法：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置
插入图片和背景图片的区别：
小图标、logo、超大背景等：背景图片（只能通过backgroud-position:来调整位置）
产品展示的图片：插入图片（主要通过盒模型的margin和padding来调整位置）
浏览器默认字体大小16像素，为了统一所有浏览器字体，一般需要设置
Body{ Font-size: 16px；}
导航栏一般都是通过<ul>包含li再包含a来实现的
轮播图：并非直接放图片，而是用ul包含li再包含a再包含img来实现的！
搜索引擎对于h1标签的文字内容很重视，会优先收录！
Logo一般使用方式：
放在h1标签（一个网页只有一个）中，
将logo图片设为背景放在a中
浮动的元素在祖级盒子中排不下四个，可以为它的父级盒子设置一个宽度，使得父级稍大于祖级的宽度，然后爷爷设置溢出隐藏即可！
浮动
使得块级元素可以在一行显示
如果转换位行内块元素，也可以在一行显示，但是中间会出现缝隙，很难去掉，并且兼容性极差！
三特性：
- 浮：漂浮起来，会漂浮在标准流上面
- 漏：脱标，不占有位置
- 特：float:会改变元素的display属性成为行内块元素（有高度）但是没有缝隙！
小技巧：因为浮动的元素会脱标，所以一般都要给浮动的孩子元素们加一个标准流的父亲，来减少对其他标准流的影响！
清除浮动：
其实不能叫做清除浮动，因为清除浮动是和clear有关，但是clear:both并不能够解决问题，实际还是通过将浮动的元素进行闭合，才能解决问题。所以之后都称为闭合浮动。
为什么要闭合浮动？
很过情况下父元素是不方便给高度的（子元素内容量不固定），需要用孩子来撑开父元素，但是孩子得是标准流才能撑开，浮动孩子不能撑开父亲，因为浮动的孩子不占有位置。
闭合浮动的本质：
闭合浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。
闭合浮动的父盒子会自动检测孩子的高度来撑开自己。
这里暂且这么来讲，其实本质是和底层原理BFC有关系，至于BFC的话，我引用的另一篇文章也有讲：
闭合浮动的方法：
- 额外标签法：在最后一个浮动元素的后面添加一个空标签<div></div>，将空标签的css属性clear:both；即可！
- 给父盒子添加overflow：hidden|auto|scroll;都可以实现（副作用：会把多余内容切掉）
- 伪元素法：（推荐）
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: "";
height: 0
}
/* 兼容ie6，清除浮动的方式 */
.clearfix {
*zoom: 1
}4 双伪元素法
什么时候可能需要闭合浮动：
- 父亲没有高度
- 孩子浮动了
- 影响下面的布局了
定位
将盒子定在某一位置上，自由的漂浮在其他盒子上面 ---css离不开定位，特别是后面的js特效
定位之后，元素也相当于转换为行内块元素
为什么要使用定位？
什时候用定位？：
定位 = 定位模式 + 边偏移
定位模式：
Relative（相对定位）：
特点：
相对于自己原来在标准流中的位置来说的：
原来在标准流的区域继续占有，后面的盒子仍然以标准的方式对待他
Absulote(绝对定位):
特点：
绝对定位是元素以带有定位的父级元素来移动位置（拼爹型）
不会保留原来的位置，是脱标的
子绝父相！
Fixed(固定定位):
不随滚动条移动
固定定位是特殊的绝对定位，只是基准变成了屏幕（浏览器的可视窗口）
绝对定位盒子是不能设置margin:auto的方式来居中对齐的！绝对定位盒子水平或者居中对齐：将top设为50%,然后往上移动子元素高度的一半！
Z-index：调整的堆叠顺序：数值越大，越靠上层！（只可用于有定位的元素身上）
显示与隐藏(js中非常常用)
Display:
Display:none。先隐藏，不保留位置
Display:block. 除了转换为块级元素外，还可显示元素
Visibility：
Visibility:hidden.隐藏，但是保留位置
Visibility:visible.
Overflow:
Overflow:hiddent.超出盒子大小的部分给藏起来
用户界面样式
图片消除底部白色缝隙
图片底部存在白色缝隙的原理：图片默认是和文字的基线进行对齐的，虽然一个盒子中可能没有文字，但是下面还是会空出来几个像素来为文字预备。
解决：
1.不让图片基线对齐，随便给图片设置一种对齐方式即可：（推荐）
2.vertical-align对于块级元素来说无效的，因此，可以将图片设置为块级元素即可
溢出的文字用省略号显示
精灵技术
为什么需要精灵技术？
为了有效地减少服务器的图片请求次数
精灵图片（小的背景图标）
测量精灵图的工具可以使用PS、FW
滑动门
浏览器调试常见错误：
1.单词拼写错误：
