DIV+CSS属性设置参数
Div+CSS网站布局应用教程第8章 使用CSS样式设置列表效果
8.2.2
ul无序列表
Hale Waihona Puke 无序列表是网页中常见的元素之一，用于将一组相关的列表项目排列在 一起，并且列表中的项目没有特别的想顺序。无序列表使用<li>标签来罗列 各个项目，并且每个项目前面都带有特殊符号，比如黑色实心圆等。在 CSS中，可以通过list-style-type属性对无序列表前面的符号进行控制。 list-style-type属性的语法格式如下。 list-style-type: 参数1, 参数2,…;
自测8——为网页元素赋予内 容
自测8：为网页元素赋予内容 最终文件：光盘\最终文件\第8章\8-4-1.html 视 频：光盘\视频\第8章\8-4-1.swf
8.4.2
透明度opacity属性
opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透 明的，反之，取值为0时是完全透明的。1~0之间的任何值都表示该元素的透 明度。 opacity属性的语法格式如下。 opacity: <length> | inherit;
自测2——设置列表符号
自测2：设置列表符号 最终文件：光盘\最终文件\第8章\8-2-2.html 视 频：光盘\视频\第8章\8-2-2.swf
8.2.3
list-style-image属性
在网页设计中，除了可以使用CSS样式中的列表符号，还可以使用liststyle-image属性自定义列表符号。 list-style-image属性的基本语法如下。 list-style-image: 图片地址;
自测5——制作复杂新闻列表
自测5：制作复杂新闻列表 最终文件：光盘\最终文件\第8章\8-2-5.html 视 频：光盘\视频\第8章\8-2-5.swf
W3cSchool_DIV+CSS2_参考手册
CSS 参考手册CSS背景属性属性描述值background 简写属性，作用是将背景属性设置在一个声明中。
background-color background-image background-repeat background-attachment background-positionbackground-attachment 设置是否背景图像是固定的或随页面其余部分滚动。
scroll fixedbackground-color 设置元素的背景颜色。
color-rgb color-hex color-name transparentbackground-image 将图像设置为背景。
url nonebackground-position 设置背景图像的起始位置。
top lefttop center top right center left center center center right bottom left bottom center bottom right x-% y-%x-pos y-posbackground-repeat 设置背景图像是否及如何重复。
repeat repeat-x repeat-y no-repeatCSS 边框属性(border)属性描述值border 简写属性。
作用是在一个声明中用来设置四个边框的所有属性。
border-width border-style border-colorborder-bottom 简写属性。
作用是在一个声明中用来设置底边框的所有属性。
border-bottom-width border-styleborder-colorborder-bottom-color 设置底边框的颜色。
border-color border-bottom-style 设置底边框的样式。
border-styleborder-bottom-width 设置底边框的宽度。
常用CSSDIV排版技术用法剖析
本文向大家描述一下CSS+DIV排版技术的使用，主要包括纵向排列元素，横向排列元素，用列表排列元素和用绝对坐标定位元素等内容，用DIV把元素定义为块对象，用CSS 设置对象的格式和位置。
几种常用CSS+DIV排版技术用DIV把元素定义为块对象，用CSS设置对象的格式和位置。
CSS+DIV排版方式是目前应用很广的排版方式，它的使用非常灵活，可制作非常复杂的版面。
以下是几种常用的CSS+DIV排版技术。
纵向排列元素此类CSS+DIV排版技术用<div>标签定义块对象，由于<div>标签本身有换行作用，各元素自然排成一列。
用CSS的margin属性设置对象间的距离，用padding属性调整对象的宽度和高度。
举例：<styletypestyletype="text/css">#menu{width:100px。
font-size:15px。
}.dd{border:1pxdotted#0000FF。
padding-top:5px。
padding-bottom:5px。
padding-left:5px。
margin-bottom:3px。
}</style><dividdivid="menu"><divclassdivclass="dd">HTML</div><divclassdivclass="dd">CSS</div><divclassdivclass="dd">JavaScript</div></div>显示效果为：横向排列元素用<div>标签定义块对象，用CSS的float属性设置对象的浮动，此为CSS+DIV排版中的横向排列。
举例：<styletypestyletype="text/css">#box{height:110px。
divcss滚动条样式DIV滚动条属性及样式设置方式
divcss滚动条样式DIV滚动条属性及样式设置⽅式DIV滚动条就是利⽤DIV标签，在⾥⾯嵌⼊CSS样式表，当div所定义的区域的内容达到⼀定程度时，在div标签⾥⾯嵌⼊CSS 样式表，定义overflow的属性值，设置DIV滚动条相关的属性。
这⾥向⼤家描述⼀下DIV滚动条属性及样式设置，所谓DIV滚动条，就是利⽤DIV标签，在⾥⾯嵌⼊CSS样式表，加⼊overflow 的属性值，这样，当div所规范的区域内的内容达到⼀定程序时，滚动条就派上⽤场。
DIV滚动条属性及样式设置所谓DIV滚动条，就是利⽤DIV标签，在⾥⾯嵌⼊CSS样式表，加⼊overflow的属性值，这样，当div所规范的区域内的内容达到⼀定程序时，滚动条就派上⽤场。
其功能⼤约是为了节约页⾯空间，就是所谓的“缩地”了。
看看效果如何吧，代码在下⼀楼提供。
当div所定义的区域的内容达到⼀定程度时，在div标签⾥⾯嵌⼊css样式表，定义overflow的属性值，设置DIV滚动条相关的属性。
⽰例代码：复制代码代码如下:<style type="text/css">.testDiv{border-style:solid;border-width:50px;border-color:pink;position:absolute;top:200px;left:300px;height:200px;width:300px;overFlow-x:scroll;overFlow-y:hidden;scrollBar-face-color:green;scrollBar-hightLight-color:red;scrollBar-3dLight-color:orange;scrollBar-darkshadow-color:blue;scrollBar-shadow-color:yellow;scrollBar-arrow-color:purple;scrollBar-track-color:black;scrollBar-base-color:pink;}</style>注：1.overFlow:visible却省值，没有DIV滚动条，根据内容⾃动扩撑区域的⼤⼩，即定义的区域⽆效scroll总是显⽰滚动条hidden没有滚动条，超出区域的内容不可见auto根据内容⾃动判断是否添加滚动条2.DIV滚动条颜⾊属性：face-color：滑块颜⾊hightlight-color：⾼亮颜⾊3dlight-color：三维光线颜⾊darkshadow-color：暗影颜⾊shadow-color：阴影颜⾊arrow-color：箭头颜⾊track-color：滑道颜⾊base-color：DIV滚动条的主要颜⾊，其中包含滚动按钮和滚动滑块3.overFlow-xoverFlow-yvisible却省值，没有DIV滚动条，根据内容⾃动扩撑区域的⼤⼩，即定义的区域⽆效scroll总是显⽰滚动条hidden没有DIV滚动条，超出区域的内容不可见auto根据内容⾃动判断是否添加滚动条。
css中div透明度有几种方法设置？
css中div透明度有⼏种⽅法设置？css设置div背景透明有两种⽅法：第⼀种使⽤opacity：0~1，这个⽅法有个缺点，就是内容也会跟着透明；第⼆种⽅法就是rgba(0,0,0,0~1)，使⽤这个⽅法就只会设置div背景透明，⽽不会影响到div⾥的内容。
⼀、css rgba()设置颜⾊透明度语法：rgba（R,G,B,A）;RGBA 是代表Red（红⾊） Green（绿⾊） Blue（蓝⾊）和 Alpha（不透明度）三个单词的缩写。
RGBA 颜⾊值是 RGB 颜⾊值的扩展，带有⼀个 alpha 通道 - 它规定了对象的不透明度。
rgba（)⾥的值的介绍：R：红⾊值。
正整数（0~255）G：绿⾊值。
正整数（0~255）B：蓝⾊值。
正整数（0~255）A：透明度。
取值0~1之间rgba()只是单纯的可以设置颜⾊透明度，这样在页⾯的布局中有很多应⽤。
⽐如说：让背景出现透明效果，但上⾯的⽂字不透明。
代码实例：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>rgba()</title><style>.demo{width: 350px;height: 300px;margin: 50px auto;}.demo *{width: 120px;height: 120px;margin: 10px;float: left;}.demo1{background:rgba(255,0,0,1);}.demo2{background:rgba(255,0,0,0.5);}</style></head><body><div><div>背景⾊不透明，⽂字不透明！</div><div>背景⾊半透明，⽂字不透明！</div></div></body></html>⼆、css opacity属性设置背景透明度语法：opacity: value ;value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。
Css div 常用CSS标签及属性
Css+div总结的一些常用CSS标签及属性CSS中的长度绝对单位：几乎不用在网页中in 英寸 1in = 2.54cmcm 厘米 1cm = 0.394inpt 磅 1in = 72ptpc pica 1in = 6pc相对单位：较常用em 1em = 相应字体的font-size值ex 1ex = 相应字体中的小写x字母的高度值，较难求得，一般取0.5em px 最为常用的CSS中的元素分类display 设定元素所属类别，不可继承none(设定为不显示在屏幕上)block(块级元，包括 P,H1-H6,list,div,body)inline(内联元，包括 a,em,span)list-item(列表元，如 LI)颜色与背景类color 设置文字颜色#rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%)H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设置背景颜色，格式同上；不可继承，可用于所有元BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 设置背景图片，默认为none，不可继承，可用于所有元url(imageURL) nonebody{backround-image:url(back.jpg);}background-repeat 设置背景图片是否重复排列，不可继承，用于所有元repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列) No-repeat(不重复排列，默认值)BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment 设定背景图片是否卷动，不可继承，用于所有元scroll(随网页卷动，默认值) fixed(不随网页卷动)BODY{background-attachment:fixed;}background-position 设定背景图片或背景颜色开始显示的位置，不可继承，用于块级元和可替换元top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比)BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性，不要求顺序，各属性值以空格分开BODY{background:#ffcc00 url(bg.jpg) fixed center}字型类font-family 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。
设置div内容居中
设置div内容居中一、使用CSS的text-align属性。
text-align属性是CSS中用来控制文本水平对齐方式的属性，但它也可以用来实现div内容的水平居中。
我们只需要将div的display属性设置为block，然后将其父元素的text-align属性设置为center，就可以实现div内容的水平居中。
```css。
.parent {。
text-align: center;}。
.child {。
display: block;/ 其他样式 /。
}。
```。
通过上述代码，我们可以实现将子元素div的内容水平居中显示。
这种方法简单易行，适用于一些简单的布局需求。
二、使用CSS的flex布局。
flex布局是CSS3中新增的一种布局方式，它可以非常方便地实现元素的居中显示。
我们可以通过设置父元素的display属性为flex，然后使用justify-content和align-items属性来实现内容的水平和垂直居中。
```css。
.parent {。
display: flex;justify-content: center;align-items: center;}。
.child {。
/ 其他样式 /。
}。
```。
通过上述代码，我们可以实现将子元素div的内容水平和垂直居中显示。
flex布局具有强大的布局能力，适用于各种复杂的布局需求。
三、使用CSS的position属性。
position属性可以帮助我们实现元素的绝对定位，从而实现内容的居中显示。
我们可以通过将div的position属性设置为absolute，然后使用top、bottom、left和right属性来实现内容的水平和垂直居中。
```css。
.parent {。
position: relative;}。
.child {。
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/ 其他样式 /。
div介绍盒子模型边框属性CSS初始化文字排版边框调整溢出
div介绍盒⼦模型边框属性CSS初始化⽂字排版边框调整溢出今天学习的div，了解了div是⼲什么⽤的掌握了什么是盒⼦模型，以及div的外边距内边距以及边框，运⽤div和CSS给⽂字排版，利⽤边框的来做图像，div溢出的处理CSS初始化： 精确排版的时候⽤这个清理⼀下*{margin:0px;padding:0px;}*/1 <!doctype html>2 <html>3 <head>4 <meta charset="utf-8">5 <title>div介绍</title>6 <!--7 <div></div>不是功能标签8是可以放⽂字、图⽚以及各种元素块标签，相当于是个⽅便袋，常⽤于来布局9 div不设置宽⾼不显⽰-->1011 <style>121314 #d1{15 background-color: red;16 width: 50px;17 height: 50px;18float: left;19 }202122 #d2{23 background-color: blue;24 height: 100px;25 width: 100px;26/* 浮动*/27float: right;28 }29 #d3{30 background-color:#666666;3132 height: 100px;33/*清除浮动，不让浮动的盖住*/34 clear: both;35 }36 </style>37 </head>3839 <body>4041 <div id="d1">我是左div</div>42 <div id="d2">我是右div</div>43 <div id="d3">我是三div</div>44 </body>45 </html><!doctype html><html><head><meta charset="utf-8"><title>溢出处理</title><style>#d{background-color: yellow;width: 100px;height: 100px;/*如果内容超出div则隐藏*//* overflow: hidden;*//*不管内容是否超出，都会给div加⼀个滚动条*//* overflow: scroll;*//*如果内容不超出div则没有滚动条，如果超出；⾃动添加滚动条 */overflow: auto;}</style></head><body><div id="d">刘奶奶找⽜奶奶买⽜奶，⽜奶奶给刘奶奶拿⽜奶</div></body></html><!doctype html><html><head><meta charset="utf-8"><title>快速添加边框的粗细、类型、颜⾊</title> <style>#d{/*快速添加边框的粗细、类型、颜⾊*/border-left: 100px solid white;border-right: 100px solid white;border-bottom: 100px solid #FC01FB;width: 00px;height: 00px;background-color: yellow;}#d1{border-left: 100px solid white;border-right: 100px solid white;border-bottom: 100px solid #06B5D1;width: 00px;height: 00px;background-color: yellow;}#d2{width: 85px;height: 100px;background-color: white;float: left;}#d3{width: 30px;height: 100px;background-color: yellow;float: left;}#d4{width: 85px;height: 100px;background-color: white;float: left;}</style></head><body><div id="d"></div><div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div></body></html><!doctype html><html><head><meta charset="utf-8"><title>⽹页⽂字⽤DIV排版</title><style>li{list-style-type: none;float: left;/* 间距*/margin: 20px;}</style></head><body><ul><li> ⾸页</li><li>新闻⽹</li><li>⾸页概况</li></ul></body></html><!doctype html><html><head><meta charset="utf-8"><title>盒⼦模型边框属性 CSS初始化</title><style>/*盒⼦模型：外边距；margin margin:auto auto的意思是⾃适应边框；barder内边框；paddingmargin重叠现象：只要有⼀个元素没有float属性就会出现重叠现象，margin取相邻元素的margin最⼤值CSS初始化：*{margin:0px;padding:0px;}*/*{margin:0px;padding:0px;}#big{width: 500px;height: 500px;background-color: yellow;}#small1{width: 100px;height: 100px;background-color: red;float: left;margin: 10px 10px 10px; /*上右下左*/border: 20px solid black;padding: 10px; /*上右下左和margin⼀样*/}#small2{width: 100px;height: 100px;background-color: blue;float: left;margin: 10px;}#small3{width: 100px;height: 100px;background-color: aqua;clear: both;margin: 10px;}#small4{width: 100px;height: 100px;background-color: orange;clear: both;margin: 10px;}</style></head><body><div id="big"><div id="small1">戒指</div><div id="small2"></div><div id="small3"></div><div id="small4"></div></div></body></html>。
DIV+CSS布局：CSS浮动float属性详解
DIV CSS布局：CSS浮动float属性详解在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
我们来看看float属性基本释义：该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。
也就是说，浮动对象的display特性将被忽略。
float属性的参数：none：对象不浮动left：对象浮在左边right：对象浮在右边下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图：我们看下面的运行效果：Source Code to Run []<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"> <head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title>52CSS</title> <style type="text/css">#content_a {width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc;} #content_b {width:200px; height:80px;border:1px solid #000; margin:10px; background:#999;} </style></head> <body> <div id="content_a">这是第一个DIV</div> <divid="content_b">这是第二个DIV</div> </body> </html>[ 可先修改部分代码再运行查看效果]我们对content_a应用向左的浮动。
DIV+CSS网页代码注释
DIV+CSS网页代码注释元素和属性定义<head>...</head> 标记HTML文档头部的开始和结束<HTML>...</html> 标记HTML文档的开始和结束<title>...</title> 指示HTML文档的标题(在头部使用)<!--...--> 在THML文档中加注释<body>...</body> 标记HTML文档体的开始和结束backcround=url 指定作为背景的图象(HTML3.2+)bgcolor=color 指定背景色(color可以是名字或十六进制数)(HTML 3.2+) text=color 指定文本颜色(HTML 3.2+)link=color 指定页面的连接颜色(HTML 3.2+)alink=color 指定页面的活动连接颜色 (HTML 3.2+)vlink=color 指定页面也访问过的连接颜色 (HTML 3.2+) leftmargin=n 指定文档左边与浏览器窗口左边缘的距离(Microsoft) topmargin=n 指定文档上边与浏览器窗口上边缘的距离(Microsoft) rightmargin=n 指定文档右边与浏览器窗口右边缘的距离(IE 4.0) bottommargin=n 指定文档下边与浏览器窗口下边缘的距离(IE 4.0) bgproperties=fixed 固定背景图象的位置(也就是不让图象滚动)(Microsoft)scroll=yes/no 打开或关闭滚动条(IE 4.0)onloab=script 载入文档时启动脚本的事件onunloab=script 卸载文档时启动脚本的事件<!doctype html info> 定义文档所用的 dtd (htmlinfo 是 dtd 名) <meta> 提供文档的元信息http-equiv=name 与<meta>文档中数据相关的 http 文件头部content=name 与命名http 头部相关的数据name=name 文档的描述url=url 与元信息联系的url2文档风格类型以下标记用于改变文档中文本的风格,即改变文本显示式样元素属性定义<b>...</b> 使文本为黑体<big>...</big> 使文本成为大字体 (通常大一号)(HTML 3.2+)<basefont> 设置文档的默认字体特性 (HTML 3.2+)color=color 设置字体的默认颜色<blank>...</blank> 使文本闪烁(Netscape)<font>...</font> 文本字体标记size=n 根据值n改变字体的大小 n可以是1~7的任一数字face=fonteame 如果本地系统在指定的字体,则改变字体样式为该字体(HTML4.0)<i>...</i> 使文本成为斜体<marquee>...<marquee> 插入滚动文本的滚动文本框(Microsoft)behavior=behavior 文本滚动形式(scroll,slide或altenate)bgcolor=color 滚动文本框的背景色(color可以是名字或十六进制数)direction=direction 文本滚动方向(left或right)height=n 以像素为单位的滚动文本框高度width=n 以像素为单位的滚动文本框宽度hspace=n 滚动文本框周围总的水平空间vspace=n 滚动文本框周围总的垂直空间loop=n 文本滚动次数scrolldelay=n 刷新间隔(以豪秒计)scrollamount=n 一次刷新滚动的文本数truespeed 用指定的精确延迟值来滚动文本(IE 4.0)<s>...</s> 给文本加上删除线(HTML 3.2+)<strike>...</strike>) 以下标显示文本(HTML 3.2+)<sup>...</sup> 以上标显示文本(HTML 3.2+)<u>...</u> 给文本加上下划线3内容文本类型以下用于改变文档中文本的内容样式,即改变文本的潜在意义。
div+css布局基础
html 静态网页设计
实例1 利用DIV+CSS来完成两列固定宽度布局(P271页)
html 静态网页设计
练习1 简单的DIV+CSS布局(P268页)
1.一列固定宽度布局：打开DW8，新建一个网页，切换到布局模式的标准模式，在当前网页中绘制 一个层，将层的ID修改为“layer”，双击CSS样式的#layer样式，按照P268页，设置背景色：
html 静态网页设计
练习2 操作提示
在DW中新建一个网页，在layout.css文件中定义样式。每个部分的样式如下所示。 1. body样式：宋体，14象素，边距为0，文字对齐居中。 2. container样式：上下边距为0，左右自动；宽度为900象素。
3. header样式：高度为100象素，背景色为：#6cf，下边空5象素。
3.新建一个类样式.blue，设置文字颜色为蓝色，并且将样式存放在bb.css文件中，在代码 中将链接到bb.css的那条代码删除，在网页中写上文字：文字蓝色，应用该样式，看找得 到该样式吗。然后在style标签之间输入：@import url(“bb.css”)，继续应用样式，思 考属于P192页的哪种添加CSS的方法；以上这条语句也可以写在外部样式文件中。
html 静态网页设计
练习3 添加样式的方法
1.新建一个HTML文件，新建一个样式body，设置宋体、12字号，并且将样式存放在aa.css 文件中，思考属于P192页的哪种添加CSS的方法；
2.新建一个类样式.hongse，设置文字颜色为红色，仅对此文档起作用，在网页中写上文字： 文字红色，应用该样式，思考属于P192页的哪种添加CSS的方法；
求来设置属性。保存预览。
html 静态网页设计
div 的padding参数
div 的padding参数
padding是CSS中用来设置元素内边距的属性，它可以接受一个到四个值，分别表示上、右、下、左的内边距大小。
如果只提供一个值，那么四个方向的内边距都会设置为这个值。
如果提供两个值，第一个值表示上下内边距，第二个值表示左右内边距。
如果提供三个值，分别表示上、左右、下的内边距。
padding可以使用像素(px)、百分比(%)或者em作为单位。
在使用padding时，需要注意以下几点：
1. padding值不能为负数，否则会被忽略。
2. padding会增加元素的尺寸，如果需要元素保持原有尺寸，可以考虑使用box-sizing属性。
3. 当元素有背景色或者边框时，padding会影响背景色和边框的展示位置。
4. 如果元素设置了border-box盒模型，padding会影响内容区域的大小。
在实际应用中，padding常常用来调整元素的内边距，使页面布局更加美观和合理。
在设计响应式布局时，合理设置padding可以使页面在不同设备上展示更加友好。
同时，在进行网页设计时，也需要注意padding对元素尺寸和布局的影响，避免出现意外的显示效果。
总之，padding是CSS中非常重要的属性之一，合理使用padding可以对网页布局和设计产生积极的影响。
希望以上信息能够帮助你更好地理解和应用padding属性。
DIVCSSdisplay（block,none,inline）
DIVCSSdisplay（block,none,inline）DIV CSS display (block none inline)属性的⽤法在⼀般的CSS布局制作时候，我们常常会⽤到display对应值有block、none、inline这三个值。
下⾯我们来分别来认识和学习什么时候⽤什么值。
这⾥通过CSS display知识加实例、图演⽰讲解⽅法来学习和了解DIV CSS display。
⽬录CSS display使⽤display的值有哪些css display blockcss display nonecss display inline1、CSS display使⽤以下为DIV CSS运⽤dispalyCSS代码：.divcss{display:none}Html对应运⽤：<div class="divcss">我是测试内容</div>2、display的值有哪些Css display值与解释参数：block :块对象的默认值。
⽤该值为对象之后添加新⾏。
之前也添加⼀⾏。
none :隐藏对象。
与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline :内联对象的默认值。
⽤该值将从对象中删除⾏。
如果其前后都是inline的则在同⼀⾏compact :分配对象为块对象或基于内容之上的内联对象marker :指定内容在容器对象之前或之后。
要使⽤此参数，对象必须和:after及:before 伪元素⼀起使⽤inline-table :将表格显⽰为⽆前后换⾏的内联对象或内联容器list-item :将块对象指定为列表项⽬。
并可以添加可选项⽬标志run-in :分配对象为块对象或基于内容之上的内联对象table :将对象作为块元素级的表格显⽰table-caption :将对象作为表格标题显⽰table-cell :将对象作为表格单元格显⽰table-column :将对象作为表格列显⽰table-column-group :将对象作为表格列组显⽰table-header-group :将对象作为表格标题组显⽰table-footer-group :将对象作为表格脚注组显⽰table-row :将对象作为表格⾏显⽰table-row-group :将对象作为表格⾏组显⽰3、css display:blockDisplay:block是我们常⽤的，block也是Display默认的值。
div 高度宽度固定比例
div 高度宽度固定比例摘要：1.高度宽度固定比例的概念2.div 元素的高度宽度固定比例的设置方法3.固定比例的优势和应用场景4.固定比例的不足和解决方案5.结论正文：在网页设计中，div 元素的高度宽度固定比例是一个常见的布局方式。
它指的是在网页设计中，通过设置div 元素的高度和宽度，使其呈现出一定的比例，从而达到页面布局的统一和协调。
要设置div 元素的高度宽度固定比例，可以采用CSS 的属性进行设置。
具体方法是，给div 元素设置宽度（width）和高度（height）属性，并使两者保持一定的比例。
例如，如果一个div 元素的宽度为300px，高度为200px，那么其宽度与高度的比例就是3:2。
通过设置这样的比例，可以使div 元素在页面中呈现出固定的尺寸，从而达到页面布局的协调。
固定比例的布局方式在网页设计中有着广泛的应用。
比如，在设计一个网页的头部、导航栏、内容区域等元素时，我们可以通过设置固定比例，使这些元素在页面中呈现出协调的比例，从而提高页面的美观度。
此外，固定比例的布局方式还可以提高页面的响应式设计，使页面在不同设备上都能呈现出良好的视觉效果。
然而，固定比例的布局方式也存在一些不足。
比如，当页面内容发生变化时，固定比例的布局可能会导致一些元素的尺寸发生变化，从而影响页面的美观度。
为了解决这个问题，我们可以采用一些其他的设计方法，如流式布局、自适应布局等，来适应页面内容的变化。
总的来说，div 元素的高度宽度固定比例是一种在网页设计中常用的布局方式。
通过设置固定比例，可以使页面呈现出良好的视觉效果，提高页面的美观度和响应式设计。
DIVCSS参数大全
DIVCSS参数大全2015-09-06 by hello_word_EPM_5CSS属性大全字体属性：(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位：PX、PD、EM粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 font-variant: small-caps;(小型大写字母) normal;(正常)大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体： (font-family)'Courier New', Courier, monospace, 'Times New Roman',Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性： (background)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直);简写方法 background:#000 url(..) repeat fixed left top;区块属性： (Block)字间距letter-spacing: normal; 数值对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle;bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group;table-footer-group; table-raw; table-column-group; table-column; table-cell;table-caption;(表格标题)方框属性： (Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性： (Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color;列表属性： (List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性： (Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一 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; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration:overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position:outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指 CURSOR: hand十字体 cursor:crosshair箭头朝下 cursor:s-resize十字箭头 cursor:move箭头朝右 cursor:move加一问号 cursor:help箭头朝左 cursor:w-resize箭头朝上 cursor:n-resize箭头朝右上 cursor:ne-resize箭头朝左上 cursor:nw-resize文字I型 cursor:text箭头斜右下 cursor:se-resize箭头斜左下 cursor:sw-resize漏斗 cursor:wait光标图案(IE6) p {cursor:url('光标文件名.cur'),text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369 /*设置上框线top颜色*/border-top-width :1px /*设置上框线top宽度*/border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-sizefont-family}2 字体类型 {font-family:'字体1','字体2','字体3',...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small|smaller| x-small| xx-small}4 字体风格 {font-style:inherit|italic|normal|oblique}5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色 {color:数值;}7 阴影颜色 {text-shadow:16位色值}8 字体行高 {line-height:数值|inherit|normal;}9 字间距 {letter-spacing:数值|inherit|normal}10 单词间距 {word-spacing:数值|inherit|normal}11 字体变形 {font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形 {font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距 {line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格 {text-indent:数值|inherit}4 水平对齐 {text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式 {writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色 {background-color:数值}2 背景图片 {background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定 {background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值： thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值} 数值：分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge| groove}6 边框 {border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color} 下边框{border-bottom:border-bottom-width border-style color}左边框 {border-left:border-left-widthborder-style color}7 宽度 {width:长度|百分比| auto}8 高度 {height:数值|auto}9 漂浮 {float:left|right|none}10 清除 {clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示 {display:none|block|inline|list-item}2 控制空白 {white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表 {list-style-image:URL}5 位置列表 {list-style-position:inside|outside}6 目录列表 {list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}posted @ 2009-06-0813:39 DELPHI&.NET初学者[TECSOON WENDAY]阅读(143) | 评论(0) | 编辑表单验证代码全集1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制2.:js判断汉字、判断是否汉字、只能输入汉字3:js判断是否输入英文、只能输入英文4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字5:只能输入英文字符和数字6: js email验证、js 判断email 、信箱/邮箱格式验证7:js字符过滤,屏蔽关键字8:js密码验证、判断密码2.1: js 不为空、为空或不是对象、判断为空、判断不为空2.2:比较两个表单项的值是否相同2.3:表单只能为数字和'_',2.4:表单项输入数值/长度限定2.5:中文/英文/数字/邮件地址合法性判断2.6:限定表单项不能输入的字符2.7表单的自符控制2.8:form文本域的通用校验函数1. 长度限制2. 只能是汉字3.' 只能是英文4. 只能是数字5. 只能是英文字符和数字6. 验证邮箱格式7. 屏蔽关键字(这里屏蔽***和****)8. 两次输入密码是否相同够了吧 :)屏蔽右键很酷oncontextmenu='return false' ondragstart='return false'onselectstart='return false'加在body中二2.1 表单项不能为空2.2 比较两个表单项的值是否相同2.3 表单项只能为数字和'_',用于电话/银行帐号验证上,可扩展到域名注册等2.4 表单项输入数值/长度限定2.5 中文/英文/数字/邮件地址合法性判断2.6 限定表单项不能输入的字符1. 检查一段字符串是否全由数字组成---------------------------------------2. 怎么判断是否是字符---------------------------------------if (/[^/x00-/xff]/g.test(s)) alert('含有汉字');else alert('全是字符');3. 怎么判断是否含有汉字---------------------------------------if (escape(str).indexOf('%u')!=-1) alert('含有汉字'); else alert('全是字符');4. 邮箱格式验证---------------------------------------//函数名：chkemail//功能介绍：检查是否为Email Address//参数说明：要检查的字符串//返回值：0：不是 1：是function chkemail(a){ var i=a.length;var temp = a.indexOf('@');var tempd = a.indexOf('.');if (temp > 1) {if ((i-temp) > 3){if ((i-tempd)>0){return 1;}}}return 0;}5. 数字格式验证--------------------------------------- //函数名：fucCheckNUM//功能介绍：检查是否为数字//参数说明：要检查的数字//返回值：1为是数字，0为不是数字function fucCheckNUM(NUM) {var i,j,strTemp;strTemp='0123456789';if ( NUM.length== 0)return 0for (i=0;i{j=strTemp.indexOf(NUM.charAt(i)); if (j==-1){//说明有字符不是数字return 0;}}//说明是数字return 1;}6. 电话号码格式验证--------------------------------------- //函数名：fucCheckTEL//功能介绍：检查是否为电话号码//参数说明：要检查的字符串//返回值：1为是合法，0为不合法function fucCheckTEL(TEL){var i,j,strTemp;strTemp='0123456789-()# ';for (i=0;i{j=strTemp.indexOf(TEL.charAt(i));if (j==-1){//说明有字符不合法return 0;}}//说明合法return 1;}7. 判断输入是否为中文的函数---------------------------------------function ischinese(s){var ret=true;for(var i=0;iret=ret && (s.charCodeAt(i)>=10000); return ret;}8. 综合的判断用户输入的合法性的函数---------------------------------------。
第四部分Div+CSS进行网页布局
五、技巧 1、单行文本的垂直居中 <div class=“middle”> Here is one line of text. </div>
.middle{ Height:100px; Line-height:100px; Border:1px solid #666;}
2、设置Body居中的技巧
Position:
所有元素的默认定位都是：position:static，这 意味着元素没有被定位，而且在文档中出现在它 应该在的位置。 position:absolute 时，元素就脱离了文档【即 在文档中已经不占据位置了】，可以准确的按照 设置的 top,bottom,left 和 right 来定位 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置 来移动这个元素。【意思是元素实际上依然占据 文档中的原有位置，只是视觉上相对于它在文档 中的原有位置移动了】
三、Div的css定位与布局属性 Float:none|left|right 设置层的漂移 left 文本流向对象的左边 Clear：none|left|right|both 清除层的漂移范围 Overflow：visible|auto|hidden|scroll 内容超过层大小时用此属性
Cursor：auto|all-scroll|colresize|crosshair|default|hand|move|hel p|no-drop|notallowed|pointer|progress|rowresize|text|vertical|wait Display:block|none|inline|inline-block list-item 设置对象是否隐藏 Visibility：inherit|visible|hidden
css中关于Div的宽度与高度的100%设定
css中关于Div的宽度与⾼度的100%设定正像你所知道的那样，设置DIV⼤⼩的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或⾼度时都很迷惑，不明确这个100%的宽度（⾼度）到底有多宽有多⾼？这个100%是从哪⾥得到的从哪⾥继承的？今天我们的话题就是有关div⾼度100%的问题！其实，要弄懂div宽度|width100%、div⾼度|height100%到底是怎么实现的，只需弄懂⼀个简单的问题就可以了，即100%的基数是谁，就是这个100%是相对于谁的width、height来说是100%？div的100%是从其上⼀级div的宽⾼继承来的，有⼀点很关键，就是要设置div100%显⽰，必须设置其上⼀级div的宽度或⾼度，否则⽆效。
举例说明：⽗div(deman)宽300⾼200，⼦div(cc)如果在这个条件下设置divcc的宽⾼都为100%的话，那cc的确切⼤⼩就是⽗div的⼤⼩(宽300⾼200)，在尝试中你会发现，div显⽰会受⾃⾝和其上⼀级div的padding和margin影响，⽽其实际宽⾼不受影响。
值得玩味噢！你设div的⾼度为100%,那么它是和什么地⽅相对为100%?前⾯总得有个容器说明他的⾼度是多少。
这样的话div才能按⽐例100%继承上⼀级的⾼度。
可惜的是浏览器⼀般默认解释为内容的⾼度，⽽不是 100%。
但是只要为html和body设置⾼度为100%就可以了：html,body{height:100%;}，这样之后div会按⽐例来继承上⼀级的⾼度了，仅仅设置的DIV元素的height属性貌似没有什么效果。
同时，让⼈⾼兴的是，这样设置的css样式不存在浏览器兼容问题，在IE5.5、IE6、IE7、IE8还有⽕狐均可正常显⽰。
那么，如下的样式可以设置Div撑满整个页⾯：<style type="text/css">html{height:100%;margin:0;}body{height:100%;margin:0;}</style><div style="width:100%; height:100%; background-color:#666; z-index:1"></div>有⼀点需要注意的是，Html级元素默认宽度是100%，即整⾏；但是⾼度并不是100%，⽽仅仅是⼀⾏⽽已。
div+css布局中常用方法汇总
div+css布局中常用方法汇总1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible"2、cursor:pointer 使鼠标变成手形3、word-wrap:break-word;控制是否断词4、word-break:keep-all;控制文本不断行5、最后finally，开始first，虚线dashed，内部里面的inner,外面的外表的outer，注释note，热点hotspot，branding品牌，翻页pageturn，奇数行add6、透明设置：filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;7、解决IE中列表高度显示不正确的问题：*html ul li{float:left;height:1%;}*html ul li{height:1%;}8、a:hover在ie6及以下必须加链接才会有效；.over+javascript用在th:hover 时ie6及以下才能识别。
9、onfocus='this.blur()',onfocus是获得焦点事件，blur是移除焦点，换句话说就是不让这个链接获得焦点10、直接模仿iframe产生滚动条#content{heitht:200px;width:300px;overflow:auto;}11、父li设置了高度，而子li的高度不同时，要先给li：height:auto，在嵌套的列表里，将父li 浮动后，要将子li的float=none，子列表的所有内容都float=none，父ul设置了margin时，子ul要margin=0，因为子会应用父的样式12、在写类名、id名尽量写的权级低一些，从尔避免后面覆盖要写很长13、高度不适应：高度不适应主要发生在两个嵌套的对象中，特别当内层对象使用margin或padding时，外层对象不能自动调节高度。
DIV常用属性大全自己整理
DIV常⽤属性⼤全⾃⼰整理⼀、属性列表复制代码代码如下:color : #999999 ⽂字颜⾊font-family : 宋体⽂字字型font-size : 10pt ⽂字⼤⼩font-style:itelic ⽂字斜体育font-variant:small-caps ⼩字体letter-spacing : 1pt ⽂字间距line-height : 200% 设定⾏⾼font-weight:bold ⽂字粗体vertical-align:sub 下标字vertical-align:super 上标字text-decoration:line-through 加?h除线text-decoration:overline 加顶线text-decoration:underline 加底线text-decoration:none ?h除连接底线text-transform : capitalize ⾸字⼤写text-transform : uppercase 英⽂⼤写text-transform : lowercase 英⽂写text-align:right ⽂字*右对齐text-align:left ⽂字*左对齐text-align:center ⽂字置中对齐这些是⼀些简单的⽂字效果，可以应⽤到css的页⾯中。
背景background-color:black 背景颜⾊background-image : url(image/bg.gif) 背景图⽚background-attachment : fixed 固定背景background-repeat : repeat 重复排列-⽹页预设background-repeat : no-repeat 不重复排列background-repeat : repeat-x 在x轴重复排列background-repeat : repeat-y 在y轴重复排列background-position : 90% 90% 背景图⽚x与y轴的位置 链接A 所有超连接A:link 超连接⽂字格式A:visited 浏览过的连接⽂字格式A:active 按下连接的格式A:hover ⿏标移⾄连接边框border-top : 1px solid black 上框border-bottom : 1px solid #6699cc 下框border-left : 1px solid #6699cc 左框border-right : 1px solid #6699cc 右框border: 1px solid #6699cc 四边框虚线<TEXTAREA STYLE="border:1px dashed pink">实线<TEXTAREA STYLE="border:1px solid pink">设置div的⾼度与⽂字的⾏⾼⼀样就可以了,即 line-height 和 height 的数值是⼀样的就可以了,最后给div⼀个 over-flow: hidden ,让超出的部分隐藏.⼆、常⽤属性复制代码代码如下:1、Height:设置DIV的⾼度；Width:设置DIV的宽度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
DIV+CSS属性设置参数
Line-height 行距Backgound-image 插入图片width 宽度
Height 高度Value 初始值Maxlength 最大字符数
  空格<br> 强制换行<p>分段标记<font>字体设置
Disc 实心圆点（默认属性）Circle 圆圈Square 小方快Type 条目标记修改start 有序条目初始值<pre>预排版BORDER 加边框marquee 滚动strong 加粗字体Direction 滚动方向
定位
Position 定位relative 相对定位absolute 绝对定位
Left 左边距top 上边距right 右边距
Bottom 下边距margin 外边距padding 内边距
Float 漂移
字体
Sive 字体大小family 字体样式text-decoration 文本下划线None 取消
段落样式：
Text-align:段落水平对齐设置值：
center 居中right 向右对齐left 向左对齐justify 继承上一步的属性
vertical-align:段落垂直对齐设置值：
sub 上标super 下标top 向上对齐middle 垂直居中bottom 向下对齐
10px、-10px相对于元素行高属性的百分比
Letter-spacing:字母的间距
Word-spacing:单词的间距
Line-height：文本行高
Text-indent:缩进方式
White-space:排版方式设置值：
Normal 正常pre 预排版nowrap 不换行
边框样式：
Border 边框style 风格dotted 点线Solid 实线dashed 虚线
背景样式：
Background-color 背景颜色
Backround-imige 背景图片
Background-repeat 背景重复方式设置值
Background-position 背景位置设置值
Background-attachment 固定或滚动背景设置值
Fixed 锁定scroll 滚动
表格样式
Table{table-layout：fixed；}
表格内容的显示宽度和关联方式fixed 不关联
Table{caption-side:bottom;}
控制表格标题的显示位置
Table{border-collapse:collapse;}
表格边框的显示方式
Table{border-spacing:}
表格内边框和外边框的距离
Tavle{empty-cells:}
控制对空单元格的显示方式
Tr:hover{color:red;}
鼠标经过时的颜色显示
Caption 标题hide 忽略；隐藏
伪元素样式：
A:link 超链接的正常状态（没有任何动作前）
A:visited 访问过的超链接状态
A:hover 光标移动到超链接上的状态
A:active 选中超链接时的状态
P:first-line 段落中的第一行文本
P:tirst-letter 段落中的第一个字母
鼠标样式：
Cursor 鼠标样式url 引用move 移动
Text 文本pointer 手型help 帮助
Wait 等待
滚动条样式：
Scrollbar-face-color 滚动条凸出部分的颜色
Scrollbar-highlight-color 滚动条空白部分的颜色
Scrollbar-shadow-color 立体滚动条阴影的颜色
Scrollbar-3dlight-color 滚动条亮边的颜色
Scrollbar-arrow-color 上下按钮上三角箭头的颜色
Scrollbar-track-color 滚动条的背景颜色
Scrollbar-darksadow-color 滚动条强阴影的颜色
Scrollbar-base-color 滚动条的基本颜色
Overflow：hidden 隐藏scroll 显示
Auto 自动
列表样式：
List-styletype:dise(实心圆)、circle（空心圆）、square（方块）、decimal（阿拉伯数字）、Lower-roman(小写罗马数字)、upper-roman（大写罗马数字）、lower-alpha（
小写英文字母）、upper-alpha（大写英文字母）、none（无项目符号）
List-style-image：列表图片符号
List-style-position设置值:inside（内部）、outside（外部）
DISPLAY属性：
Display设置值：
block 块级元素inline 行级元素inline-block 行级的块级元素list-item 显示列表元素
clip在使用position：absolute(绝对定位)后才会由效果！
Overflow溢出效果：
Visible 溢出显示hidden 溢出隐藏scroll 溢出产生滚动条auto 溢出自动产生滚动条。