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 中区块的使用
CSS 中区块的使用 属性名称 属性值 说明 width 像素/百分比 区块的宽度 auto height 像素/百分比 区块的高度 auto min-height 像素像素/百分比 区块最小高度 auto max-height 像素像素/百分比 区块最大高度 auto min-width 像素像素/百分比 区块最小宽度 auto max-width 像素像素/百分比 区块最大宽度 auto
2浮动
CSS 中浮动的使用 属性名称 属性值 说明 float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动31相对定位
![](images/pic7.jpg)
我是相对定位,设置区块基准点为左上角
CSS 中定位的使用 属性名称 属性值 说明 position relative 设置区块基准点为左上角 absolute 设置网页的为基准点左上角 static 无设置 left auto 以基准点定位在左边 像素/百分比 定位在左边 top auto 以基准点定位在上边 像素/百分比 定位在上边 right auto 以基准点定位在右边 像素/百分比 定位在右边 bottom auto 以基准点定位在下边 像素/百分比 定位在下边 z-index auto 自动调整高度 数字 数字越大越往上层32绝对定位
![](images/pic7.jpg)
我是绝对定位,设置网页的为基准点左上角 32绝对定位案例
CSS 中溢出的使用 属性名称 属性值 说明 overflow visible 不剪切内容也不添加滚动条 auto 在必需时对象内容才会被 裁切或显示滚动条 hidden 不显示超过对象尺寸的内容 scroll 总是显示滚动条 overflow-x (同上) overflow-y (同上)42滚动条的使用
div{
background:red;
width: 200px;
height: 100px;
overflow: scroll;
scrollbar-arrow-color:red;
scrollbar-3dlight-color:red;
}