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文本样式

    2023-12-27 11:46:02       51 阅读
  2. CSS新手入门笔记整理CSS3颜色样式

    2023-12-27 11:46:02       53 阅读
  3. CSS新手入门笔记整理CSS列表样式

    2023-12-27 11:46:02       56 阅读
  4. CSS新手入门笔记整理CSS3选择器

    2023-12-27 11:46:02       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-27 11:46:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-27 11:46:02       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-27 11:46:02       87 阅读
  4. Python语言-面向对象

    2023-12-27 11:46:02       96 阅读

热门阅读

  1. KEPServerEX 6 之 GE Ethernet 连接FANUC ROBOT机器人实战

    2023-12-27 11:46:02       58 阅读
  2. 音频筑基:码率模式CBR、VBR、CVBR一文说清

    2023-12-27 11:46:02       221 阅读
  3. 7.微服务设计原则

    2023-12-27 11:46:02       58 阅读