注:其中的内容只是自己学习时的一些笔记,好记性不如烂笔头,在此记录方便以后巩固!
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