HTML笔记第二天

来源：互联网发布：手机淘宝我要代理入口编辑：程序博客网时间：2024/05/16 00:35

01盒模型之margin设置

<!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" lang="zh-CN"><head><title>盒模型之margin设置</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="xhtml 12小时入门教程" /><style>#cont{width:1000px;height:600px;background: green;}div {width:400px;height:200px;float:left;}#test{/*margin:10px;*//*margin-top:10px;margin-left: 20px;margin-bottom: 30px;margin-right: 40px;*//*margin:10px 20px;*/margin: 10px 20px 30px;background: red;}#test2 {background: orange;}#test3{width:1000px;background: blue;}</style></head>    <body>    <div id="cont">    <div id="test"></div>    <div id="test2"></div>    <div id="test3"></div>    </div>    </body></html>

02盒模型之border设置

<!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" lang="zh-CN"><head><title>盒模型之border设置</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="xhtml 12小时入门教程" /><style>div{width: 800px;height: 800px;background: blue;/*border: 10px outset purple;*//*单独设置某个方向的边框*/border-top:10px solid orange; /*也可以单独设置边框的3要素之1,比如形色*/border-style:dashed;}</style></head>    <body>    <div>    盒子的border 3要素 宽(border-width),形状(border-style),颜色(border-color)    </div>    </body></html>

03用css控制border画3角形

<!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" lang="zh-CN"><head><title>用css控制border画3角形</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="xhtml 12小时入门教程" /><style>div{height:200px;background: gray;}#trip{width:0px;height: 0px;border-top: 50px solid white;border-right: 50px solid white;border-bottom: 50px solid green;border-left: 50px solid white;}</style></head>    <body>    <div>    <div id="trip"></div>    </div>    </body></html>

04 padding详解

<!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" lang="zh-CN"><head><title>padding详解</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="xhtml 12小时入门教程" /><style>div{background: gray;/*padding: 10px;*//*padding-top: 10px;padding-right: 30px;*/padding: 10px 20px 30px;}</style></head>    <body>    <div>    关于HTM，实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址的时候必须是完全对应的，也就是说index.htm和index.html是两个不同的文件，对应着不同的地址。值得一提的是UNIX系统中对大小写敏感，不吻合的话就可能报没有文件或者找不到文件。   关于shtml，shtml是一种基于SSI技术的文件，也就是Server Side Include--SSI 服务器端包含指令，一些Web Server如果有SSI功能的话就会对shtml文件特殊招待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设定规则解释SSI指令，解释完后跟一般html一起调去客户端。       </div>    </body></html>

05padding与背景

<!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" lang="zh-CN"><head><title>padding与背景</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="xhtml 12小时入门教程" /><style>div{width: 200px;height: 200px;background: gray;border: 10px solid blue;padding: 20px;}</style></head>    <body>    <div>    hello world    </div>    </body></html>

06盒子模型总结

<!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" lang="zh-CN"><head><title>盒子模型总结</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="xhtml 12小时入门教程" /><style>div{width: 300px;height:300px;background: gray;border: 50px solid blue;padding:50px;margin: 50px;}</style></head>    <body>    <div>    一个盒子,有margin,border,padding,实占多少空间?<br />    竖直方向:height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom<br />    水平方向: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right    </div>    </body></html>

07利用margin实现水平居中

<!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" lang="zh-CN"><head><title>利用margin实现水平居中</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="xhtml 12小时入门教程" /><style>#container{width:1000px;height: 200px;margin:0px auto;background: blue;}</style></head>    <body>    <div id="container"></div>    </body></html>

08margin重叠现象研究

<!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" lang="zh-CN"><head><title>margin重叠现象研究</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="xhtml 12小时入门教程" /><style>#test1{height:100px;background: blue;margin-bottom: 50px;}#test2 {height: 100px;background: green;margin-top: 80px;}</style></head>    <body>    <div id="test1">    上下相邻的普通元素,上下边距,并非简单的相加,<br />    而是取其中较大的边距值<br />    这种现象叫做margin重叠    </div>    <div id="test2"></div>    </body></html>

09心得

一般对于div和div之间的距离使用margin,对于div与div里面文字的距离用padding,所以对于父div和子div之间的距离优先使用子div得margin。

对于margin重叠现象，对于浮动的div是两者之和。

0 0