css样式学习笔记三

注：其中的内容只是自己学习时的一些笔记，好记性不如烂笔头，在此记录方便以后巩固！

1、边距

（1）内边距

padding-top

padding-left

padding-right

padding-bottom

值为像素值

（2）外边距

margin-top

margin-left

margin-right

margin-bottom

值为像素值

内外边距都可以使用复合属性 但是使用的时候得有个顺序了  

四个值的时候分别表示  上 右 下 左 （顺时针的方向）

两个值的时候 第一个表示上下 第二个表示左右

三个值的时候 第一个表示上 第二个表示左右 第三个表示下

2、表格设置

首先设置表格的border，这个时候设置的是整个表格的外围边框，里面的td什么的还是没变化

设置table的属性：cellspacing=0 cellpadding=0（去除各单元格之间的间距）

为表格设置合并边框模型

border-collapse:collapse

除去表格之间层叠的部分

3、盒子模型
（1）盒子模型的组成
内容+内边距+边框+外边距
（2）尺寸的计算
尺寸为元素实际所占的网页空间

宽度：
非ie6浏览器width：
 margin-left + border-left + width + border-right + margin-rigth

ie6 width： 
margin-left + border-left + width +（左右内边距） + border-right + margin-rigth
ie6的width这个时候的width就与我们定义的不一致了，宽度会变宽，撑大了
高度：

非ie6浏览器高度计算方法同宽度计算方法
 高度=margin-top + border-top + height + border-bottom + margin-bottom
 如果出现内容超出高度，则内容溢出，要想实现自动撑开，这需要设置最小高度min-height

ie6浏览器：
高度没有准确的计算方法
内容超出高度 自动撑开

解决ie6浏览器与非ie6浏览器盒子模型兼容性问题

*******************很重要***********************
有宽度的元素尽量避免使用padding-left、padding-right
使用了padding-left、padding-right的元素尽量不设置宽度width

在制作网页时，先将标签内的内外边距去除，设置为0