CSS新手入门笔记整理:CSS3其他样式

outline属性

outline属性用来定义表单中文本框的轮廓线样式。

语法

input{outline: width style color;}

/*文本框获取焦点时样式*/
input[type="text"]:focus
{
  outline: width style color;
}

第1个值指的是轮廓线宽度(outline-width),第2个值指的是轮廓线样式(outline-style),第3个值指的是轮廓线颜色(outline-color)。


initial取值

initial属性直接将某个CSS属性重置为它的默认值,并不需要事先知道这个CSS属性的默认值是多少,浏览器会自动设置的。

语法

property: initial;

property是一个CSS属性名,"property:initial;"表示设置property这个属性的取值为默认值。initial取值可以用于任何HTML元素上的任何CSS属性。


calc()函数

calc()函数通过"计算"的方式来定义某一个属性的取值。

语法

属性: calc(表达式)

运算规则

  • 只能使用加(+)、减(-)、乘(*)和除(/)这4种运算。
  • 可以使用px、em、rem、百分比等单位。
  • 可以混合使用各种单位进行运算。
  • 表达式中有加号(+)和减号(-)时,其前后必须有空格。
  • 表达式中有乘号(*)和除号(/)时,其前后可以没有空格,但建议保留。

overflow-x和overflow-y

overflow-x属性用来定义内容超出元素"宽度"时应该如何处理,而overflow-y属性用来定义内容超出元素"高度"时应该如何处理。

语法

overflow-x: 取值;
overflow-y: 取值;

|---------|-------------------------------|
| overflow-x 属性取值 ||
| 属性值 | 说明 |
| visible | 内容超出时,不剪切内容,也不添加滚动条 |
| hidden | 内容超出时,剪切内容,但只显示y轴滚动条而不显示X轴滚动条 |
| scroll | 内容超出时,显示所有滚动条 |
| auto | 跟scroll效果一样 |

|---------|-------------------------------|
| overflow-y 属性取值 ||
| 属性值 | 说明 |
| visible | 内容超出时,不剪切内容,也不添加滚动条 |
| hidden | 内容超出时,剪切内容,但只显示x轴滚动条而不显示y轴滚动条 |
| scroll | 内容超出时,显示所有滚动条 |
| auto | 跟scroll效果一样 |


pointer-events属性

pointer-events属性用来定义元素是否禁用鼠标单击事件。pointer-events属性是一个与JavaScript有关的属性。

语法

pointer-events: 取值;

|---------|----------------|
| 属性值 | 说明 |
| auto | 不禁用鼠标单击事件(默认值) |
| none | 禁用鼠标单击事件 |


相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#