17 ， CSS 区块、浮动、定位、溢出、滚动条

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相对定位
我是相对定位,设置区块基准点为左上角

	CSS 中定位的使用
属性名称 属性值 说明
position relative 设置区块基准点为左上角
			absolute 设置网页的为基准点左上角
			static 无设置
left auto 以基准点定位在左边
		像素/百分比 定位在左边
top auto 以基准点定位在上边
		像素/百分比 定位在上边
right auto 以基准点定位在右边
		像素/百分比 定位在右边
bottom auto 以基准点定位在下边
		像素/百分比 定位在下边
z-index auto 自动调整高度
		数字 数字越大越往上层

　　32绝对定位
我是绝对定位，设置网页的为基准点左上角 　　32绝对定位案例

www.szwzjs.com

www.szwzjs.com

www.szwzjs.com

www.szwzjs.com

www.szwzjs.com

www.szwzjs.com

　　41溢出

CSS 中溢出的使用 属性名称 属性值 说明 overflow visible 不剪切内容也不添加滚动条 auto 在必需时对象内容才会被 裁切或显示滚动条 hidden 不显示超过对象尺寸的内容 scroll 总是显示滚动条 overflow-x (同上) overflow-y (同上)

---

CSS 中溢出的使用 属性名称 属性值 说明 overflow visible 不剪切内容也不添加滚动条 auto 在必需时对象内容才会被 裁切或显示滚动条 hidden 不显示超过对象尺寸的内容 scroll 总是显示滚动条 overflow-x (同上) overflow-y (同上)

CSS 中溢出的使用 属性名称 属性值 说明 overflow visible 不剪切内容也不添加滚动条 auto 在必需时对象内容才会被 裁切或显示滚动条 hidden 不显示超过对象尺寸的内容 scroll 总是显示滚动条 overflow-x (同上) overflow-y (同上)

CSS 中溢出的使用 属性名称 属性值 说明 overflow visible 不剪切内容也不添加滚动条 auto 在必需时对象内容才会被 裁切或显示滚动条 hidden 不显示超过对象尺寸的内容 scroll 总是显示滚动条 overflow-x (同上) overflow-y (同上)

	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;
}

我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师我是柳志军老师