1.CSS 中区块的使用
2.CSS 中浮动的使用
3.CSS 中定位的使用
4.CSS 中溢出的使用
5.CSS 中滚动条的使用
17.1 CSS 中区块的使用
属性名称 属性值 说明
width 像素/百分比 区块的宽度
auto
height 像素/百分比 区块的高度
auto
min-height 像素像素/百分比 区块最小高度
auto
max-height 像素像素/百分比 区块最大高度
auto
min-width 像素像素/百分比 区块最小宽度
auto
max-width 像素像素/百分比 区块最大宽度
auto
17.2 CSS 中浮动的使用
属性名称 属性值 说明
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 不允许左边浮动
right 不允许右边浮动
both 不允许两边浮动
17.3 CSS 中定位的使用
属性名称 属性值 说明
position relative 设置区块基准点为左上角
absolute 设置网页的为基准点左上角
static 无设置
left auto 以基准点定位在左边
像素/百分比 定位在左边
top auto 以基准点定位在上边
像素/百分比 定位在上边
right auto 以基准点定位在右边
像素/百分比 定位在右边
bottom auto 以基准点定位在下边
像素/百分比 定位在下边
z-index auto 自动调整高度
数字 数字越大越往上层
17.4 CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)
17.5 CSS 中滚动条的使用
属性名称 属性值 说明
scrollbar-3dlight-color 颜色/十六进制 滚动条亮边框
scrollbar-highlight-color 颜色/十六进制 滚动条 3D 界面亮边
scrollbar-face-color 颜色/十六进制 滚动条 3D 表面
scrollbar-arrow-color 颜色/十六进制 滚动条方向箭头
scrollbar-shadow-color 颜色/十六进制 滚动条 3D 暗边
scrollbar-darkshadow-color 颜色/十六进制 滚动条暗边框
scrollbar-base-color 颜色/十六进制 滚动条基准颜色
scrollbar-track-color 颜色/十六进制 滚动条的拖动区域
1CSS 中区块的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <pre> CSS 中区块的使用 属性名称 属性值 说明 width 像素/百分比 区块的宽度 auto height 像素/百分比 区块的高度 auto min-height 像素像素/百分比 区块最小高度 auto max-height 像素像素/百分比 区块最大高度 auto min-width 像素像素/百分比 区块最小宽度 auto max-width 像素像素/百分比 区块最大宽度 auto </pre> </body> </html>
2浮动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background: red;
float:left;
}
.div2{
width: 200px;
height: 200px;
background: green;
float: left;
}
.div3{
width: 200px;
height: 250px;
background: blue;
}
.div4{
width: 200px;
height: 250px;
background: yellow;
clear:both;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<pre>
CSS 中浮动的使用
属性名称 属性值 说明
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 不允许左边浮动
right 不允许右边浮动
both 不允许两边浮动
</pre>
</body>
</html>
31相对定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相对定位,设置区块基准点为左上角</title>
<style type="text/css">
img {
position: relative;
top: 8px;
left: 8px;
}
</style>
</head>
<body>
<img src="images/pic7.jpg"/><br/>
我是相对定位,设置区块基准点为左上角
<pre>
CSS 中定位的使用
属性名称 属性值 说明
position relative 设置区块基准点为左上角
absolute 设置网页的为基准点左上角
static 无设置
left auto 以基准点定位在左边
像素/百分比 定位在左边
top auto 以基准点定位在上边
像素/百分比 定位在上边
right auto 以基准点定位在右边
像素/百分比 定位在右边
bottom auto 以基准点定位在下边
像素/百分比 定位在下边
z-index auto 自动调整高度
数字 数字越大越往上层
</pre>
</body>
</html>
32绝对定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我是绝对定位，设置网页的为基准点左上角</title>
<style type="text/css">
img {
position: absolute;
top: 228px;
left: 228px;
}
</style>
</head>
<body>
<img src="images/pic7.jpg"/><br/>
我是绝对定位，设置网页的为基准点左上角
</body>
</html>
32绝对定位案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
font-size:40px;
font-family:"Times New Roman", Times, serif;
}
.div1{
color:red;
position:absolute;
top:22px;
left:22px;
}
.div2{
color:blue;
position:absolute;
top:24px;
left:24px;
}
.div3{
color:#666666;
position:absolute;
top:26px;
left:26px;
}
.div4{
color:red;
position:absolute;
top:82px;
left:82px;
z-index:3;
}
.div5{
color:blue;
position:absolute;
top:84px;
left:84px;
z-index:2;
}
.div6{
color:#666666;
position:absolute;
top:86px;
left:86px;
z-index:1;
}
</style>
</head>
<body>
<div class="div1">www.szwzjs.com</div>
<div class="div2">www.szwzjs.com</div>
<div class="div3">www.szwzjs.com</div>
<div class="div4">www.szwzjs.com</div>
<div class="div5">www.szwzjs.com</div>
<div class="div6">www.szwzjs.com</div>
</body>
</html>
41溢出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
background: red;
width: 200px;
height: 100px;
}
.div1{
background:red;
width: 200px;
height: 100px;
overflow: auto;
}
.div2{
background:red;
width: 200px;
height: 100px;
overflow: hidden;
}
.div3{
background:red;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<div>CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)</div><hr/><p></p><p></p><p></p>
<div class="div1">CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)</div>
<div class="div2">CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)</div>
<div class="div3">CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)</div>
<pre>
CSS 中溢出的使用
属性名称 属性值 说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)
</pre>
</body>
</html>
42滚动条的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
background:red;
width: 200px;
height: 100px;
overflow: scroll;
scrollbar-arrow-color:red;
scrollbar-3dlight-color：red;
}
</style>
</head>
<body>
<div>我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师</div>
</body>
</html>