栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

CSS样式更改——用户界面和指针类型

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

CSS样式更改——用户界面和指针类型

###前言
上篇文章主要讲述了CSS样式更改中的多列、元素是否可见、图片透明度基础知识,这篇文章我们来介绍下CSS样式更改中用户界面和指针类型基础用法。

####1.用户界面 UserGui
1).重设元素大小 resize

div
{
resize:both
}
none    不调整
both    调整元素的高度和宽度
horizontal     调整元素的宽度
vertical调整元素的高度

2).规定两个并排的带边框的框 box-sizing

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
}
content-box  宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

3).对轮廓进行偏移outline-offset

div
{
outline-offset:15px  轮廓与边框边缘的距离
}

####2.指针类型Cursor

div{
  cursor:auto
}
光标形状:
default默认光标(箭头)
auto 浏览器设置的光标。
crosshair    十字线
pointer      一只手
move  指示某对象可被移动。
e-resize     指示矩形框的边缘可被向右(东)移动
ne-resize    指示矩形框的边缘可被向上及向右移动(北/东)
nw-resize    指示矩形框的边缘可被向上及向左移动(北/西)
n-resize     指示矩形框的边缘可被向上(北)移动
se-resize    指示矩形框的边缘可被向下及向右移动(南/东)
sw-resize    指示矩形框的边缘可被向下及向左移动(南/西)
s-resize     指示矩形框的边缘可被向下移动(南)
w-resize     指示矩形框的边缘可被向左移动(西)
text  指示文本
wait  指示程序正忙(通常是一只表或沙漏)
help  指示可用的帮助(通常是一个问号或一个气球)

参考文档:W3C官方文档(CSS篇)

###总结
这篇文章主要介绍了CSS样式更改篇中的用户界面和指针类型基础知识,希望让大家对CSS样式更改有个简单的认识和了解。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241790.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号