css学习三大重点：css盒子模型、浮动、定位
看透网页布局本质：
- 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
- 最后把网页元素比如文字图片等等，放入盒子里面。
- 以上两步，就是网页布局的本质
盒子模型（Box Model）
所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
细线表格
- 通过表格的
cellspacing="0"，将单元格与单元格之间的
border-collapse： collapse; 表示相邻边框合并在一起
计算盒子实际大小
padding会撑大原来的盒子
解决：
通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小
特殊情况：如果这个盒子没有宽度，则padding不会撑开盒子
文字居中和盒子居中区别
- 文字水平居中是 text-align: center; 而且还可以让行内元素和行内块居中对齐
- 块级盒子水平居中 左右margin改为auto
块级盒子水平居中
1.必须有宽度
2.左右外边距设置为auto
盒子里面的文字 行内元素、行内块居中对齐水平居中 text-align: center;
插入图片和背景图片区别
1.插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2.背景图片我们一般用于 小图标背景 或者 超大背景图片 背景图片只能通过 background-position
清除元素默认的内外边距
为了灵活方便的控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除1
2
3
4* {
margin: 0;
padding: 0;
}
注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
1）相邻块元素垂直外边距合并
解决方案：尽量只给一个盒子添加margin值
2）嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中较大者
解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow: hidden;
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题。。
盒子模型布局稳定性
根据稳定性来分，建议：
按照 优先使用 宽度(width) 其次 使用内边距(padding) 再次 外边距(margin)
width > padding > margin
原因：
- margin会有外边距合并 还有ie6下面margin加倍的bug（讨厌）所以最后用
- padding会影响盒子大小，需要进行加减计算（麻烦）其次使用
- width没有问题 我们经常使用宽度剩余法 高度剩余法来做