一、盒子模型
1、css背景（background）：css可以添加背景颜色和背景图片来进行图片的设置，比如给一个div盒子，那么div盒子相关背景的属性可以设置以下：
背景颜色：div {background-color: red;}，给div盒子设置一个红色背景颜色。
背景图片：div {background-image: url(图片路径);}，给div盒子设置一个背景图片，背景图片我们一般给小背景图片或超大背景图片。
背景平铺：div {background-repeat: no-repeat（不平铺）/repeat-x（横向平铺）/repeat-y（纵向平铺）;}
背景位置：div {background-position: 10px 15px;} 给背景位子横向、纵向多少距离的位子。
背景固定/滚动：div {background-attachment: fixed/scroll;}
背景属性连写： div{ background：颜色 图片路径 平铺 滚动 位子}
2、边框（border）：边框有宽度（width）、边框样式（style）、边框颜色（color）三种属性。
border-width：1px； 给边框1像素的宽度；
border-style：solid（实线）/dashed（虚线）/dotted（点线）；这三种比较常见的线条样式；
border-color：red；给边框赋予颜色属性。
可以给盒子四条边框分别不同赋予不同的宽度、样式、颜色。四条边框分别border-top、border-right、border-bottom、border-left。
边框样式连写：比如div {border：1px solid red；}
边框合并：有时候我们多个盒子并排排列挨在一起的时候，会出现两个盒子的边框贴在一起，显的比较宽，为了美观，需要把贴在一起的合并掉，写法是：border-collapse：collapse；
3、内边距（padding）：指盒子边框与盒子里的内容之间的距离，有上、右、下、左内边距。内边距的几种写法及说明情况：
padding：10px；代表上下左右内边距都是10像素；
padding：10px 15px；代表上下像素10px，左右像素15px；
padding：10px 15px 20px；代表上内边距10px，左右内边距15px，下内边距20px；
padding：10px 15px 20px 30px；代表上10px，右15px，下20px，左30px；
清除内边距：padding：0；
盒子有宽高的时候，给内边距会把盒子撑大，所以注意盒子本身的大小尺寸是多少，在给内边距的时候注意宽高值的变化。如果一个盒子宽高都是300px，那么当我们在写属性width跟height的时候，这其实是盒子里内容的宽高，比如给width：250px，height：250px，边框都给1px，那么想要盒子大小是300px，这个时候我们可以给盒子内边距是24px，盒子实际宽高=内容宽高+边框+内边距，即250px+24px*2+1px*2=300px。
嵌套盒子：当父盒子给了宽高，而子盒子没有给宽高，在给盒子内边距的时候，这个时候不会撑开父盒子。
4、外边距（margin）：设置外边距，主要会与其他相邻元素之间产生空白空间，这个空白不能放置任何元素。
外边距也有上、右、下、左外边距，写法跟内边距类似。清除外边距margin：0；
外边距实现盒子水平居中：①、盒子必须是块级元素；②、盒子必须给宽度。写法margin：auto auto；
行内元素只有左右外边距，没有上线外边距，尽量不给行内元素内外边距。
外边距合并：两个相邻的盒子都有外边距的时候，真正的盒子间距离会是外边距大的盒子的外边距值。
嵌套款元素外边距合并：两个嵌套的盒子，如果父盒子没有给上内边距和边框值，子盒子给了外边距，那么父元素的外边距会跟子盒子的外边距发生合并，合并后的外边距取值大的，即使父盒子外边距为0也会发生合并。这叫外边距塌陷。解决方法：①、给父盒子1px的边框或内边距隔离就行。②、给父盒子overflow：hidden；样式。
5、盒子模型布局稳定性
外边距会发生合并、内边距会撑大盒子，一般在布局过程中我们优先使用width、height的宽高剩余法来布局，其次选择内边距，最后选择外边距（ie6兼容有bug）。
6、圆角边框、盒子阴影
圆角边框：让一个正方形变成圆圈。写法：border-radius：50% 50%；如果我们需要给一个盒子边框一点点圆角，可以给具体像素值，比如border-radius：5px；
盒子阴影：语法格式box-shadow：水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内外阴影；
一般我们必写的是水平、垂直阴影，其他可忽略。
二、浮动：就是让盒子脱离标准流，在标准流盒子之上，移动到指定位置的一个过程。浮动的本质也是让多个块级元素在一行内显示。
浮动的特性：①、浮动的盒子脱离标准流，不会占原来的位置。②、浮动只有左右浮动。③、浮动的盒子一般会与标准流的父盒子搭配使用，有一个子盒子浮动了，一般其他子盒子也需要浮动才能在父盒子里一行显示。④、浮动可以让元素模式变成行内块特性。
清除浮动：①、额外标签法：在浮动元素的末尾添加一个空标签，然后给这个空标签的style给个clear both样式。缺点是标签结构变多了。
②、父级添加overflow：hidden、auto、scroll等属性，不过缺点是当内容增加的时候容易导致内容不会自动换行而被隐藏掉，无法显示需要溢出的元素。
③、使用after伪元素清除浮动，使用方法，如下：
.clearfix：after{ content：“”； display：block； height：0； clear：both； visibility：hidden；}
.clearfix {*zoom：1；} 这个是ie6-7专有，因为6-7不支持：after。
④、使用before和after双伪元素清除浮动，使用方法如下：
.clearfix：before，.clearfix：after { content：“”； display：table；}
.clearfix：after { clear：both；}
.clearfix {*zoom：1；} 这个是ie6-7专有，因为6-7不支持：after。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
三、定位：有默认定位、相对定位、绝对定位、固定定位。
默认定位：就是默认的标准流，没什么可说的。
相对定位：相对定位主要以自己为基准点移动位置，但是移动位置后之前的位置还是保留在，与浮动不一样，浮动目的是为了块级元素在一行展示，浮动之后原来的位置不保留。
绝对定位：绝对定位跟浮动一样，脱离标准流，原来位置不保留了,但是绝对定位是真正意义的脱离标准，可以覆盖文字图片内容。但是浮动的话只是盒子脱离了，内容的话还是不会被其他盒子盖住。绝对定位当没有父元素或父元素都没有定位，他以浏览器当前页面为基准。如果父元素有定位了，那么他以最近的有定位的父元素为基准点进行定位移动。
子觉父相：意思是，子盒子用绝对定位，父盒子用相对定位，为什么这样。因为父盒子一般可能下面还有其他的盒子，如果父盒子给了绝对定位，那么原来位子就不占了，这样下面的盒子会上移，产生布局问题。如果父盒子用相对定位，那么原来位子占有，下面的其他盒子按照标准流会继续排列在下面，同时父盒子里的子盒子的绝对定位也会参照父盒子为基准。
固定定位：1、固定定位认死理，跟父元素没有关系，只认浏览器。
2、固定定位完全脱离标准流，不占位子，不随着滚动条滚动
3、ie6等低版本浏览器不支持固定定位。
4、跟浮动一样，元素添加了绝对定位和固定定位后，元素自动转换为行内块元素，行内块元素如果没有给宽度，
默认宽度就是内容宽度，如果没有内容那么就看起来不显示任何内容
补充一个知识点：背景图片不会撑开盒子，插入图片会撑开盒子