1.什么是浮动？
浮动就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。
2.浮动的原理
就是让元素脱离文档流，不占用标准流。
3.float的属性值：
left:左浮动
right:右浮动
none:默认值，不浮动
4.浮动后，后面的元素不管是块级还是行级元素，不会显示在下一行。
5.清除浮动
目的：让后面的元素自动掉到下一行。
方法：
1）添加空标签，并设置样式：clear:both;
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 清除左右浮动
clear:none; 左右浮动都不清除
2）在要清除浮动的父级添加样式：overflow:hidden;
overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动。
3）在要清除浮动的父级添加伪元素，并设定样式：
父元素:after{
content:"";
display: block;
clear:both;
}
注意：在实际项目开发中，我们一般首先第2种方案。
6.CSS盒子模型
每个元素都是一个盒子，一个盒子由margin（外边距），border（边框线）,padding（内边距）和content（内容）组成。
IE的盒子中的content又由padding和content组成。
区别外边距和内边距是以边框为参照。
系统默认外边距为8px。
1）外边距(margin)：指元素边框线之外的距离。
margin-left:左边距
margin-right:右边距
margin-top:上边距
margin-bottom:下边距
margin:可用来设置任意一个边的边距，可以带1至4个参数。
1个(apx)：表示上下左右都有这样的外边距apx
2个(apx bpx)：表示上下外边距为apx，左右外边距为bpx
3个(apx bpx cpx)：表示上外边距为apx，下外边距为cpx，左右外边距为bpx
4个(apx bpx cpx dpx)：表示上为apx,右为bpx,下为cpx,左为dpx
2）内边距（padding）：指元素的文本内容与边框之间的距离。
它的用法与margin完全一样。
3）边框(border)
border-width:边框线宽度
border-style:边框线样式
border-color:边框线颜色
复合写法（简写）：
border:border-width border-style border-color;
注意：border-width border-style border-color这三个参数没有位置之分。
7.盒子的真实尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
8.display属性：用来设置元素的显示方式。
属性值：
none:不显示元素
block:块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高，
而块级标签识别，转换后，行级标签也可以设置宽高了）
inline:行内显示，将块级标签转换为行级标签。
inline-block;将块级或行级标签转换为行内块级标签。
9.table样式
table一般不用来布局，主要用来格式化数据。
属性：
width:宽度
height:高度
border-collapse:collapse; 单线边框
border:边框线
td,tr属性：
width:宽度
height:高度
border:边框线
text-align:文本左右对齐(left(默认)/center/right)
vertical-align:文本垂直对齐(top/middle(默认)/bottom)
10.列表样式
不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列表等。
1）列表类型
无序(ul)、有序(ol)和自定义列表(dl)。
ul和ol的列表项都是用li表示的，而dl是由一个dt和一个或多个dd组成的。
dl一般用来设定一个定义，比如名词解释等。dt：标题,dd：描述，用来对dt的内容进行解释并说明的。
2）样式(用来修改标识类型)
list-style-image:用图像表示标识
list-style-position:标识的位置(inside/outside(默认))
list-style-type:标识类型
简写：
list-style:list-style-image list-style-position list-style-type;
list-style的值可以按任意顺序列出，而且可以任意省略，只要提供一个值，其它的都自动默认。
list-style-type的属性值：
a)无序
disc(默认)/circle/square
b)有序
decimal(默认)/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/
lower-greek/lower-latin/upper-latin...
有序和无序：
none
11.轮播图
作用：主要用于产品或公司相关宣传。
组成：
1）轮播的组图（至少两张以上，不能太多）
2）控制器
3）计数器
1.定位（position)（重点）
设定元素在文档中的位置。会将标签（元素）转换为块级。
2.定位分类（属性值）
1）static:静态定位
默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流）
2）relative:相对定位
占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。
3）absolute:绝对定位
脱离文档流，相对于body做偏移。
绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素必须是absolute的父级。
在项目开发中，一般用relative+absolute结合使用。
4）fixed:固定定位
脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。
一般在开发中用来固定导航栏。
3.z-index
当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。
文档流默认的z-index的值为0。
用在static和relative元素上将无效。
4.网站开发策略：先整体再局部，至顶向下，逐步细化。
1）双飞翼布局
由三列组成，两端固定，中间自适应。
双飞翼布局的优点：
（1）兼容性好，兼容所有主流浏览器，包括万恶的IE6。
（2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。
2）圣杯布局
由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。
布局时与双飞翼比增加了定位和偏移设置。
3）侧边栏固定布局
I）两栏布局
a)左侧固定，右侧自适应
b)左侧自适应，右侧固定
c)左右都固定
II）三栏布局
a)左侧固定，中间自适应，右侧固定
b)左侧自适应，中间和右侧固定
c)左侧和中间固定，右侧自适应
5.BFC&IFC
FC:Fomatting Context(格式上下文)。它是CSS2.1规范中的一个概念。它是页面中的一块渲染
区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
分为：BFC和IFC。
1）BFC：块级格式上下文
a）形成BFC的条件
i) 浮动元素（float除none以外的值）
ii）定位元素（position(absolute/fixed))
iii）display（值为inline-block/table-cell/table-caption时）
iv）overflow（值为hidden/auto/scroll时）
b）BFC特性（规则）
i)内部的盒子会在垂直方向上一个接一个的放置
ii)垂直方向上的距离会叠加，值由最大margin值决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）
iii)BFC的区域不会float元素区域重叠
iv)计算BFC的高度时，浮动元素也参与计算
v)BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素
c）BFC的作用
i)解决margin重叠的问题（添加独立BFC）
ii)解决浮动高度塌陷的问题（在父级添加overflow:hidden）
iii)解决侵占浮动元素的问题（添加overflow:hidden清除浮动）
2）IFC：内联（行级）格式上下文
a）形成IFC的条件
i)font-size
ii)line-height
iii)height
iv)vertical-align
b）IFC特性（规则）
i)IFC的元素会在一行中从左至右排列
ii)在一行上的所有元素会在该区域形成一个行框
iii)行宽的高度为包含框的高度，高度为行框中最高元素的高度
iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
v)行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框
vi)行框的元素内遵循text-align和vertical-align
6.容器的高度：
height = line-height + vertical-align
