一、盒子模型
盒子内容
边框：border
border—width：边框的粗细，单位dx
border—style：边框的样式，
border—color：边框的颜色
边框的复合样式：粗细 样式 颜色（border xxx xxx xxx）
只设置上边框：border—top：xxx xxx xxx
只设置左边框等也同上类似
边框加none是设置无，隐藏边框线，先全隐藏再设置下边框显示，可以只显示下边框，下边框在顺序后面设置可以盖过前面的全隐藏
内边距：内边距会撑开原本盒子的大小，设置上下左右大小是往外撑开的
复合样式中只设置两个数的话，第一个数是上下内边距，第二个设置左右
复合样式中只设置三个数的话，第一个数是上内边距，第二个设置左右，第三个是下
复合样式中设置四个数的话，从上边距开始顺时针的顺序
padding—left左内边距：操作和边框的类似
让边框里的内容设置成块级元素（有行内元素和块级元素的特点）：display：inline—block
这时的垂直居中可以用行高表示，与当前元素的高保持一致时会自动放到垂直下来行的中间，如line—height：80px
外边距：
居中对齐（对网页放大、缩小）：1、盒子必须要指定宽度 2、左右外边距都设置auto（自动）
margin：auto自动居中，margin—left：auto就是自动靠在左边，类似于边框的设置，所以margin：0 auto所以第一个数是上下，第二个是左右自动
兄弟盒子：上下的外边距会出现外边距合并的问题（原因是同时设置相对的外边距时，只取外边距最大的一个元素），左右不会出现，解决方法是只设置一个就行
父子盒子：把儿子盒子嵌套在父亲盒子中，会有高度塌陷的问题：子元素设置内边距时，父元素也会跟着塌陷，
解决方法为在设置子盒子内边距后可以1、给父盒子定义一个上边框，从而达到父子分离，2、给父盒子指定一个上内边距，从而达到父子分离 ，
3、前两种方式有一定的损坏性，所以可以给父盒子加overflow：hidden
一般设置body时，都会有网页的默认样式，为了不浪费空间，可以清除这些样式，在head中设
二、Reset CSS（用来重置样式）
由于浏览器在解析某些标签时会自带一些样式，导致写样式的最终效果不一致
可以设置一个外部样式，像*{margin：0 padding：0}这样，构造一个Reset CSS的样式来引用
三、浮动
普通流（文档流）：块级标签设置后，就会从上往下的排序，或者行内标签从左到右排序
浮动：让div摆列在一行显示，类似于但不等于display：inline—block同时拥有行内和块级的特性
特性：1、让元素脱离正常的文档流并且移动到指定位置，
2、类似于转换了display中inline—block的属性（行内块元素特性：不设置宽度时，内容就是宽度，内容有多少就显示多少盒子的背景特性）
3、多个浮动元素之间默认无缝隙
只有两种浮动，float：left；right左或右浮动，浮动的会覆盖到不浮动的盒子上
清楚浮动：父盒子不方便给元素时，父盒子没设置高度，子盒子有高度但是浮动后不占父盒子的位置，父盒子不能以子盒子的高度为参考，父盒子此时不存在
为了解决这个问题父盒子不至于高度也为0，所以要清楚浮动
语法为选择器{clear：left ；right ；both三种，最后一种是同时清楚}
方法：
1、在浮动元素后面加一个空标签，设置清楚浮动（父盒子再嵌套一个
2、给父元素加清除浮动，在父盒子的样式里加overflow：hidden
使用的情况：1、父盒子没高度，2、子盒子浮动了，3、影响布局
四、定位
定位=定位模式+边偏移（两种组成定位）
边偏移：top：20px；即定位的盒子加上顶部偏移量，其他方向的也是如此
定位模式：
选择器{position：属性值（包括以下这三种定位模式的类型）；
（ relative：相对定位：在文档流的区域继续占有，后面的盒子不会占有位置，以原来的位置移动位置
absolute：绝对定位：父盒子没绝对定位时，子盒子有绝对定位就会以网页为准移动位置
父盒子有绝对定位时，子盒子会以父盒子为准移动位置
绝对定位的盒子不会占着原来他的位置，其他盒子会跑到他的位置去，相当于浮动不占位（脱离默认文档流）
fixed：固定定位）：绝对定位的一种特殊形式，脱离文档流不占有位置，子元素设置固定定位后，和父元素设置什么定位无关，不再受影响
}
父相子绝（父用相对，子用绝对）：为了父盒子不会把前面其他的盒子给占了一般用这种相对定位（父盒子用相对定位，子盒子还是会以父盒子为准），对布局有好处
给body设置高度可以设置导航栏的高度，上下移动导航栏的时候，固定定位也不会改变位置
*{}为所有盒子设置样式