<!-- 第1部分 尺寸与框模型 略 第2部分背景设置 2.1 背景颜色：background-color:value 2.2 背景图片：background-image body{ background-image:url("image/bg_01.gif"); } 2.3 背景重复background-repead -repeat-x：仅在水平方向重复 -repeat-y：仅在垂直方向重复 -no-repeat:仅显示一次 2.4 背景定位 background-position 改变图像在背景中的位置 2.5背景图片的固定 background-attachment:value 默认值是 scroll：背景会随着文档滚动 可取值为 fixed：背景固定不动，不会随着页面其他部分滚动而滚动，常用于水印 第3部分 文本格式化 指定字体: -font-family:value1,vlues2; 字体大小：-font-size:value; 字体加粗：-font-weight:normal/bold; 文本颜色：-color:value; 文本排列： -text-align:left/right/center; 文字修饰：-text-decoration:none/underline; 行高：-line-height:value; 首行文本缩进：-text-indent:value; 第4部分 表格样式 4.1 边距属性：padding 尺寸属性 ：width,height 文本格式属性:略 背景属性：设置表格或者单元格的背景颜色或者被禁图像 border属性:设置表格的边框 垂直居中：vertical-align:top/middle/bottom; 4.2表格特有属性 4.2.1 边框合并：如果设置了单元格的边框，相邻单元格的边框会单独显示，相当于双边框， 合并相邻的边框 border-collapse：separate/collapse; 4.2.2 边框边距（仅适用于边框分离模式也即border-collapse的值为separate）： border-spacing： 指定一个值：该值同事适用于水平和垂直间距 指定两个值：第一个指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开 第5部分 浮动定位 5.1 普通定位： 浮动定位： 定义元素在哪个方向浮动； float:none/left/right; 用于清除浮动带来的影响,可以指定哪边：clear: none/left/right/both; 相对定位： 绝对定位： 第6部分 显示方式 6.1 一切皆为框：页面上的元素都可以显示为框 块级元素如,div> <h1> <p>等，这些块级元素显示为一块内容，即“块框” 内联元素/行内元素：如<span> <a> 等，内容显示在行内，即“行内框” display:none/block/inline; none 让生成的元素没有边框，该框及其所有内容不再显示，不占用文本中的空间 block 让行内元素表现得想块级元素一样 inline 让块级元素表现得像内联元素一样 6.2光标 cursor属性 default pointer crosshair text wait help等 第7列表样式 7.1 列表样式标志：list-style-type 用于控制列表中列表项标志的样式 无需列表：出现在各列表项旁边的圆圈点 有序列表：可能是字母、数字或其他计数体系中的一个符号 无序列表取值： none:无标记 disc:实心圆，为默认值 circle:空心圆 square:实心方块 有序列表： none:无标记 decimal:数字（如1，2，3，4，5），为默认值 lower-roman:小写罗马数字 upper-roman:大写罗马数字 等 7.2 列表项图像 list-style-image属性使用图像来替换列表项的标记 取值为：url(),指定图像作为有序或无序列表的标志 第8部分 定位 8.1定位属性： position 规定元素的定位类型，可取值：static/relative/absolute/fixed 偏移属性 top,bottom,left,right属性，用于定义远古三矿的便宜位置 z-index 设置元素的堆叠顺序 float/clear 浮动定位属性 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day03</title> <style> /*第1部分 尺寸与框模型*/ div{ width:180px; /*长*/ height:160px; /*高*/ color:red; /*字体颜色*/ background:#ffffff; /*背景颜色*/ border:2px solid black;/*边界的 宽度 样式 颜色 */ text-indent:10px; /*首行缩进10px*/ } div.class_1{ width:80px; height:60px; border:1px solid black; } div.hidden{overflow:hidden;} div.scroll{overflow:scroll;} div.auto{overflow:auto;} input.btn{ width:90px; height:30px; color:red; } div.box{ width:250; height:250; padding:10px;/*内容与框线之间的距离 padding-top/right/bottom/left:value */ margin:0 auto; /*与下一个元素的空间量,可以取值为auto由浏览器计算外边框 -margin-top/right/bottom/left:value */ border:3px solid red; } h1.p1{ text-align:center; /*文本居中 */ } table{ width:200px; border:2px solid black; border-collapse:collapse; /*单元格边框合并 */ } td{ height:50px; border:3px solid red; vertical-align:middle; } </style> </head> <body> <div class="class_1" > 默认显示，即使超出尺寸，也显示全部内容 </div><br/><br/> <div class="hidden" >文本超出尺寸限制，隐藏文本； 凑字数：斤斤计较多军军家家户户或或或或家具家电军军多多多多顶顶顶顶 哒哒哒哒哒哒多多多多么么么么么么么木木木木不不不不不不不不 哒哒哒哒哒哒多多多多多多多多多多多多多多多多多多 </div><br/><br/> <div class="scroll" >文本超出尺寸限制，可以拉滚动条查看， 不超出限制，也显示滚动条； 凑字数：斤斤计较多军军家家户户或或或或家具家电军军多多多 </div><br/><br/> <div class="auto" >文本超出尺寸限制，可以拉滚动条查看，不超出尺寸没有滚动条； 凑字数：斤斤计较多军军家家户户或或或或家具家电军军多多多多顶顶顶顶 </div> <input class="btn" type="button" value="登录"> <div class="box"> 外边框 </div> <h1 class="p1">文本居中演示</h1> <table> <tr> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>Kwin</td> <td>23</td> </tr> </table> </body> </html>