网站首页 > 知识剖析 正文
前言
上篇文章主要讲述了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; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
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样式更改有个简单的认识和了解。
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/
- 上一篇: 10 个前端开发人员经常使用的 CSS 技巧
- 下一篇: css 伪元素 css伪元素是什么意思
猜你喜欢
- 2024-11-11 Cadence中layout常用设置及快捷键
- 2024-11-11 最强推荐: Android 开发中必备的代码 Review 清单,你还不知道吗
- 2024-11-11 前端金九银十面试必备八股文宝典——HTML&CSS
- 2024-11-11 jQueryEasyUI中的拖拽事件如何使用
- 2024-11-11 6.7 PyQt5控件介绍【文本编辑框控件】-QTextEdit
- 2024-11-11 小白 AI 编程 小白程序
- 2024-11-11 如何破解字体反爬机制 反字体代码
- 2024-11-11 感受 AI 的力量——利用 Cursor 自动生成 powershell 脚本下载 TheOldNewThing 博文
- 2024-11-11 「软帝学院」java常用词汇分享第二弹
- 2024-11-11 MS-DOS信息英汉对照1.3 信息英文message
- 最近发表
-
- jQuery EasyUI使用教程:创建展开行详细编辑表单的CRUD应用
- CSDN免登陆复制代码的几种方法(csdn扫码登录怎么实现的)
- LayUi提高-Select控件使用(layui form select)
- 用 Playwright MCP 让 AI 改它自己写的屎山代码
- multiple-select.js中手动设置全选和取消全选
- 前端实现右键自定义菜单(html 自定义右键菜单)
- JavaScript脚本如何断言select下拉框的元素内容?
- 广州蓝景分享—实用的CSS技巧,助你成为更好的前端开发者
- MyBatis-Plus码之重器 lambda 表达式使用指南,开发效率瞬间提升80%
- Go语言之select的使用和实现原理(go select case)
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)