例:
#content {
float: left
width: 500px
padding: 10px 15px
margin-left: 20px
display:inline
}
2.克服盒子模型的hack
原写法:
#main-div{
width: 150px
border: 5px
padding: 20px
}
修正后
#main-div1{
width: 150px
}
#main-div1 div{
border: 5px
padding: 20px
}
例如:
<div id="main-div">1</div>
<div id="main-div1"><div>2</div></div>见图:
两者区别:1是把padding加到父层里,DIV的宽度是150+20+20
2是把PADDING加到子层里,div的宽度是150.
我习惯是用1的方法去自己计算宽高.
3,4.最小高度(最小宽度)IE不识别的解决方法
.container {
width:20em
padding:0.5em
border:1px solid #000
min-height:8em
height:auto
}
* html .container {
height: 8em
}
5.整块元素居中对齐的方法
body{
text-align: center
}
#container
{
text-align: left
width: 960px
margin: 0 auto
}
先定义BODY中的文字整个居中text-align:center,再定义其中需要左对齐的子元素text-align:left
6.垂直居中的CSS
#wrapper {
width:530px
height:25px
background:url(container.gif) no-repeat left top
padding:0px 10px
}
#wrapper p {
line-height:25px
}
适用单行文字,将height设成line-height同值
javascript限制代码为：<img src="">中加入onload="javascript:if(this.width>530)this.width=530" 530宽度css限制为：css里面加入.change img {max-width: 530pxwidth:expression(this.width >530 ? "530px" : this.width)
}图片的class中加入change就好 例如class="change"或者class="xxx change"其中xxx是原图片样式！ 谢谢采纳！
IE6里 高度是无法自动适应的。 要用img标签里的属性才行，这样就不可以在css里定义高宽 要修改js里的缩略图计算方式 例：先获取原始高（如aW）宽（aH），要缩小的宽度为530 那就是要缩放的高度 bH = aH/(aW/530) 记得css 不要定义宽高 ------------------------------------ 显示缩略图的div加个id，里面每个<img>标签加个rel属性，用dom获取相应地址的图片的实际高宽，缩放计算方式跟之前一样 原始高（如aW）宽（aH），要缩小的宽度为530 缩放的高度 bH = aH/(aW/530) ----------------------------------- 原有模版不变，写个浏览器判断，如果是ie6就加载一个js和另一个css ------------------------------------- 另一个css只需要放cont img{}的内容，去掉width height min-height就行了 判断的句子要写在原来 link css的句子下面
