实验.CSS3.盒子模型.docVIP

CSS应用(盒子模型) 实验目的： 通过用记事本直接编辑带CSS的HTML文件，理解CSS的盒子模型用法。 实验步骤： 1、创建一个包含如下内容的html文件 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title盒模型/title style type=text/css !-- body { margin: 0; padding: 0; } #box1 { background: #9cf; margin: 20px; border: 10px solid #039; padding: 40px; width: 200px; } #text { background: #fc0; height:100px; } #box2 { background:#ccc; margin:5px; height:100px; padding-left:30px; } -- /style /head body div id=box1 div id=text学习CSS很重要！/div /div div id=box2盒模型需要认真理解。/div /body /html 在firefox下使用firebug工具观察盒模型的相关属性。 2、制作一个宽度为300px，高度自适应，边框宽度为5像素且颜色为灰色(#999)的区域，id为在内部两段文字，文字大小为12像素，这两段文字首行分别缩进两个文字； CSS用内嵌方式text-indent:2em; text-indent:2em;解释：text的意思是文本、indent在计算机英语中意思是缩进、至于后面的2em意思就是2个相对单位；em解释：相对于当前对象内文本的字体尺寸。(引自CSS2.0手册)各位同学，要仔细品一下这个概念！理解喽没有，em这个单位的意思就是相对文字大小，1em就是1个文字大小，2em就是两个文字大小05 css02code.rar中的示例文件：”表单美化.html”)