CSS:margin属性备忘
参考资料:http://www.blueidea.com/tech/web/2007/4546.asp,由浅入深漫谈margin属性 - 网页制作 - 蓝色理想
直接上代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aaa</title>
<style type="text/css">
html { }
body { margin:0px; }
</style>
</head>
<body>
<div id="div1" style="width:500px; height:500px;background:#fff000;margin:20px 0px -300px 0px;">
<!--这里的top 10px标记为a,下面的top 12px标记为b,影响div1的是ab两值有负数取和、无负数取最大值,left和top理论上一样,未测试-->
<div style="width:200px; height:200px; background:#ccc;margin:20px 10px 0px 10px;" id="div1_1"></div>
<div style="width:50px; height:50px; background:#ff0000;margin:10px 10px 0px 10px;" id="div1_2"></div>
</div>
<div id="div2" style="width:500px;height:100px;background:#fffff0;margin:100px 0px 0px 0px;"></div>
<!--margin to 100受div1的影响,div1的bottom margin值为-300,高500-300为200,div2应该出现在div1的高200的地方
,因为top100,所以再往下移动100,所以bottom和right是对其他非置换元素有影响,right未做测试-->
<!--置换元素(replaced element)主要是指img,input,textarea,select,object等这类默认就有CSS格式化外表范围
的元素-->
</body>
</html>
显示效果如下:
相关文档:
网页设计DIV+CSS元素解析,<head>部分前:
(一) DOCTYPE 和DTD
用DW新建网页时,总会生成一句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句是DOCTYPE声明,DOCTY ......
前言:CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。
(一) CSS2盒模型
盒模型主要定义四个区域:内容(content)、边框距(paddin ......
一 CSS文字属性:
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体* ......
让left的高度等于 center的高度..........
<div id=left></div>
<div id=center></div>
<script type="text/javascript">
document.getElementById("left").style.height = document.getElementById("center").offsetHeight + "px";
</script> ......