宽度自适应的div+css的BOX
参考:
http://space.cnblogs.com/group/topic/3617/
http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/ 一、效果： 二、素材： 三、代码： <style type="text/css">
.box{}
.box .box_tit{position:relative;}
.box .box_tit .box_tit_1{position: absolute;top: 0; overflow: hidden; height: 100%;left: 0; right:auto;width: 2px;}
.box .box_tit .box_tit_2{position: absolute;top: 0; overflow: hidden; height: 100%;left: 2px; right:2px; }
.box .box_tit .box_tit_3{position: absolute;top: 0; overflow: hidden; height: 100%;left: auto;right:0; width: 2px;} .box .box_tit{height:29px; line-height:29px; vertical-align:middle;}
.box .box_tit .box_tit_1{background:url("box.png") left 0px;width:2px;}
.box .box_tit .box_tit_2{background:url("box.png") left -30px; padding-l ......
1.定位的定义
CSS中定位用position:static|relative|absolute|fixed来实现
static:1.正常流显示；2.不能通过z-index进行层叠分级；3.可设置width,height；4.设置top,right,bottom,left无效
relative:1.不脱离文档流，参考自身的静态位置，通过top,right,bottom,left进行定位；2.可通过z-index进行层叠分级；3.由于偏移可能会导致宽度、高度错位；建议设置偏移量后，重新设置元素的width,height属性；4.由于元素偏移，会导致后面的内容被覆盖，所以要想正常显示后面的内容，需要将后面内容作为一个层，然后设置这个层的margin-top:上方偏移元素的top值。
absolute:1.脱离文档流，通过top,right,bottom,left定位，它依赖其最近的父级元素定位，当父级position为static时，absolute元素将以body坐标原点进行定位；2.可通过z-index进行层叠分级。
fixed：1.固定定位，其所固定的对象是可视窗口，而并非是body或是父级元素；2.可通过z-index进行层叠分级。
z-index：auto | number；auto 遵从其父对象的定位； number为整数值，可正、负，当然值越大，层元� ......
根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style>
.outer {
width:600px;
background:#000;
}
.inner1 {
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
& ......
当div层为float时，IE6中box左右的margin会加倍
比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style>
.outer {
width:500px;
height:200px;
background:#000;
}
.inner {
float:left;
width:200px;
height:100px;
margin:5px;
background:#fff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
左面的inner的左面margin明显大于5px。
这时候，定义inner的display属性为inline。 ......
DOCTYPE 影响 CSS 处理
Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
Firefox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
Firefox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
Firefox: 支持 !important, IE 则忽略, 可用 !important 为 Firefox 特别设置样式
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
cursor: pointer 可以同时在 IE Firefox 中显示游标手指状， hand 仅 IE 可以
Firefox: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器 ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAO BAO TEST 2</title>
<style>
body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;}
div,img{margin:0; padding:0; border:0;}
ul,li{list-style-type: none; margin:0; padding:0; float:left; }
#info{ margin-left:auto; margin-right:auto;width:760px; text-align:left;}
#new{ margin-top:-12px;position: absolute;margin-left:-12px;}
#nav{ height:30px; width:610px; margin-left:auto; margin-right:auto;}
#nav li{margin-left:1px; height:30px;}
#nav li a{ display:block;float:left; text-decoration:none; background-image: url(http://www.zishu.cn/attachments/month_0605/r200652134132.gif);background-repeat: no-repeat; display:block; background-position:left top;}
#nav a sp ......
最新文章 : css