网页制作过程中，我们常常需要插入图片，有时需要插入大于浏览器窗口大小的图片，在我们横向改变浏览器窗口大小的时候图片总有一部分会被遮挡，如果我们想要让图片的主体部分一直居中，这个时候可以用我下面讲到的这个方法来实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>title</title> <style type="text/css"> *{ margin:0px; padding:0px; } body{ min-width: 960px; /*当浏览器窗口宽度调整至960px时开始出现窗口滚动条，主体元素开始被遮挡*/ } .imgBox{ width: 100%; overflow: hidden; } .imgBox img{ /*实现该效果的主要CSS样式*/ display: block; left: 50%; margin-left: -960px; position: relative; } </style> </head> <body> <div class="imgBox"> <img src="图片地址"/> <!-- 这里的图片宽度大于浏览器窗口可视宽度 --> </div> </body> </html>
【编码过程注意事项每日总结】
- float 和 position 属性不可以同时使用
- IE插入图片时默认有 1px 的边框
- 平时在计算Box大小的时候只计算元素的大小，至于元素和其他元素的间隔使用 margin 或者 padding 设置
- 双栏布局的时候尽量给每一栏定好宽度，左边一栏左浮动，右边一栏右浮动，这样便不必理会两栏的间隔
- 全局定义最好避免使用 overflow:hidden
- 定义字体时最好使用字体的英文名称