【CSS 用户界面属性 (Basic user interface)】

最新推荐文章于 2023-04-09 11:30:36 发布

Hey_Coder

最新推荐文章于 2023-04-09 11:30:36 发布

阅读量368

点赞数

分类专栏：【CSS】文章标签：外观样式appearance 宽高区域box-sizing 光标颜色caret-color 鼠标光标形状cursor 可调整大小resize

本文链接：https://blog.csdn.net/VickyTsai/article/details/103494965

版权

【CSS】专栏收录该内容

28 篇文章 3 订阅

订阅专栏

CSS 用户界面属性 Basic user interface

用于	属性名	CSS 版本
① 设置元素的外观样式。	`appearance`	4
② 设置元素宽高属性的指定区域 (搭配 `width`,`height` 属性)。	`box-sizing`	4
③ 设置插入光标的颜色。	`caret-color`	4
④ 设置元素内鼠标光标的形状。	`cursor`	2
⑤ 设置元素的可调整性和调整方向 ( 搭配 `overflow` 属性)。	`resize`	4
⑥ 设置文本的选中性。	`user-select`	4

CSS Basic User Interface
- 是一个 CSS 模块
- 用户界面相关的属性: 定义与用户界面相关的特性的呈现和功能。
- 相关属性
  - ❶ appearance(实验中的属性)
  - ❷ box-sizing
  - ❸ cursor
  - ❹ caret-color
  - ❺ resize
  - ❻ user-select(实验中的属性)
  - ~~ime-mode~~ (已废弃)
    - 属性控制文本字段的输入法编辑器(IME)的状态。此属性已过时。
  - nav-down (实验中的属性，暂无详细介绍)
  - nav-left (实验中的属性，暂无详细介绍)
  - nav-right (实验中的属性，暂无详细介绍)
  - nav-up (实验中的属性，暂无详细介绍)
  - outline(详情见: 【 CSS 边框和轮廓属性 Border&Outline】 )
    - outline-width
    - outline-style
    - outline-color
    - outline-offset
  - text-overflow (详情见: 【CSS 文本属性（Text）】 )

1. appearance 属性: 设置元素的外观样式

⑴ 设置元素的外观样式: appearance
- ① 属性的前缀
  - Gecko (Firefox)中使用 -moz-appearance 属性，根据操作系统的主题，使用平台原生样式显示元素。
  - 基于 webkit (如 Safari)和基于 blink(如 Chrome、Opera)的浏览器使用 -webkit-appearance属性来实现相同的功能。注意，由于兼容性的原因，Firefox 和 Edge 也支持-webkit-appearance。
- ② 自定义部件
  - XUL 样式表中经常使用此属性，来设计具有平台合适样式的自定义小部件。
  - 它还用于 Mozilla 平台附带的小部件的 XBL (从 Gecko 57 开始就被弃用了)实现。
- ③ 浏览器差异
  - 尽管在大多数现代浏览器中都支持它，但是它的实现有很大的差异。

⑵ 外观样式的语法和属性值
- appearance: none | auto | button | textfield | searchfield | textarea | push-button | button-bevel | slider-horizontal | checkbox | radio | square-button | menulist | menulist-button | listbox | meter | progress-bar;
  - 实际属性值更多，但浏览器支持度并不好。
    - 初始值: auto浏览器自动决定。
    - 不应用样式: none

/* 用户界面模块版本 4 的值 CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto; 
appearance: button;
appearance: textfield;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: button-bevel;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: menulist-button;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

/* Gecko中 可用值的 部分列表 */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/* WebKit/Blink中可用值的部分列表(以及Gecko和Edge)  */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

⑶ 外观样式的浏览器支持
- 需要浏览器前缀: -moz-,-webkit-

示例1: 给一个div元素设置外观样式。
① 外观样式设置成 按钮样式

   -moz-appearance: button;
    -webkit-appearance: button;

② 复选框的样式
- Firefox 只显示复选框的样式，元素的本来的文本内容不见了。
- 谷歌在元素中间显示复选框
③ 设置成单选按钮
- 谷歌中
④ 去除单行文本框和复选框的外观样式
- 原本的样式 :
- 去除外观样式后:

.inputappearance{
    margin: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

html

<input type="text" class="inputappearance">

<label ><input type="checkbox" class="inputappearance">动漫</label>

2. box-sizing 属性: 设置元素宽高属性的指定区域 (搭配 width,height 属性)

⑴ 设置元素宽高属性的指定区域: box-sizing
- 属性设置如何计算元素的总宽度和高度。
- ① 宽高默认指定区域: 内容区
  - 默认情况下，在 CSS 框模型中，分配给元素的宽度width和高度 height只应用于元素的内容框 = 内容区 = content box。
- ② 盒子的整体宽高: (存疑: 应该还包括外边距)
  - 如果这个元素有任何的边框 border 或内边距 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。
  - 当调整一个元素的宽度和高度时需要时刻注意到元素的边框和内边距。
- ③ 适用元素: 能设置宽度或高度的所有元素。

⑵ 宽高的指定区域和布局/定位
- ① 布局: 将 box-sizing 设置为边框盒 border-box 通常对布局元素很有用。处理元素的大小更加容易，并且通常消除了在布局内容时可能遇到的许多陷阱。
- ② 定位: 另一方面，当使用 position: relative 或 position: absolute 时，box-sizing: content-box 的使用允许定位值相对于内容 (存疑: 测试设置偏移量仍是整体偏移，相对于内容是什么意思呢 )，并且独立于对边框和内边距大小的更改。

⑶ 元素宽高指定区域的语法
- box-sizing: content-box | border-box;

⑷ 元素宽高指定区域的属性值
- 内容盒(默认) / 边框盒
- ① 内容盒 (默认值): content-box
  - 默认值，标准盒子模型。
  - 只包括: 内容区的宽和高。
    - width = 内容区的宽度。
    - height= 内容区的高度。
  - width 与 height 的计算值不包括:
    - 边框（border），内边距（padding），外边距（margin）。
  - 元素的整体宽度 = width+内边距+边框 (不考虑外边距的话 )
    - box-sizing: content-box;+ width: 200px; height: 100px;
- ② 边框盒: border-box
  - width 和 height属性包括: 内容，内边距和边框，但不包括外边距。
    - width = border +padding + 内容的宽度
    - height = border + padding + 内容的高度
      - 这是当文档处于 Quirks模式时 IE 使用的盒模型。
      - box-sizing: border-box; + width: 200px; height: 100px;
  - ③ 内边距盒 (已废弃): ~~padding-box~~
上图涉及代码
html

<!--元素的总宽度和高度-->
<div class="divcontainer">
    <p class="poem">明日复明日，明日何其多。

        我生待明日，万事成蹉跎。</p>
</div>

/*设置元素 总宽度/高度 的范围*/
.divcontainer{
    width: 30%;
    height: 10%;
    margin: 10px;
    padding: 10px;
    border: solid 10px darkgreen;

}
.poem{
    width: 200px;
    height: 100px;
    margin: 10px;
    border: dashed 10px lightskyblue;
    padding: 10px;
    box-sizing: border-box;
    /*box-sizing: content-box;*/

    /*position: relative;*/
    /*top: 10px;*/

}

⑸ 宽高指定区域的浏览器支持
- 谷歌，IE，Firefox 23之前当从 window.getComputedStyle() 计算高度时，不考虑 box-sizing 属性。

3. caret-color 属性: 设置插入光标的颜色

⑴ 设置插入光标的颜色: caret-color ，美 /ˈkærət/
- ① 插入光标: 在网页的可编辑器区域内，指示用户的输入具体会插入到哪里的，一般会闪烁，形似竖杠| 。
- ② 插入光标适用的元素:
  - ❶ <input> 或那些 ❷ 具有可编辑 contenteditable属性的元素。
- ③ 插入光标的默认颜色:
  - 默认情况下，它是黑色的，但是它的颜色可以通过 caret-color 属性改变。

⑵ 插入光标和光标
- ① 插入光标（insertion caret）: 只是光标（caret）的其中一种。
- ② 导航光标:
  - 浏览器有一种光标叫做“导航光标“（navigation caret），它可以在不可编辑区域内来回移动。
- ③ 鼠标指针光标:
  - 当鼠标指针移动到一段 cursor 属性是 auto 的文本上方时，或移动到 cursor 属性是 text、 vertical-text 的內容上方时候，看起来有点像插入光标，但不是插入光标（caret），而是鼠标指针光标（cursor）。

⑶ 插入光标颜色的语法和属性值
- caret-color: auto | <color>
  - <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
  - 浏览器决定: auto
    - 用户代理为插入符号选择适当的颜色。
    - 通常是currentcolor，但是用户代理可以根据 currentcolor 的值、背景、阴影等因素，选择不同的颜色，以确保与周围的内容具有良好的可视性和对比度。
  - 合法颜色值: <color>
    - 【CSS 颜色的合法颜色值 (详细介绍)】

⑷ 插入光标的颜色的浏览器支持

示例1: 改变单行文本的插入光标的颜色。
-
html

<!--插入光标的颜色-->
姓名: <input type="text" class="caretColor">


/*插入光标的颜色*/
.caretColor{
    /*margin: 10px;*/
    width: 100px;
    height: 20px;
    caret-color: red;
}

4. cursor 属性: 设置元素内鼠标光标的形状

⑴ 设置元素内鼠标光标的形状: cursor 属性，美 ['kɝsɚ]
- 设置鼠标指针悬浮在元素上方时，显示的鼠标光标的形状。

⑵ 鼠标光标形状的语法
- cursor: [ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ];
- 鼠标光标形状默认值：
  - auto

/* 关键字值 Keyword value */
cursor: pointer;
cursor: auto;

/* URL，带有关键字的回退 */
cursor: url(hand.cur), pointer;

/* URL和坐标，以及关键字的回退 */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* 全局值 Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

⑶ 光标形状的属性值
- ① 浏览器决定 (默认值): auto
  - 浏览器设置的光标。
  - 用户代理将根据当前的内容确定要显示的光标。
- ② 图像光标 url地址
  - ★ 图像地址和回退:
    - ❶ 零个或 ❷ 多个<url>值。最后末尾的位置必须填一个 ❸ 关键字值，它们之间用 ❹ 逗号分隔。
      - <url>指向一个图像文件。
      - 浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值。
  - ★ 光标相对于图像左上角的点偏移: <x><y>
    - 每个<url>后面都可选跟一对 ❶ 空格分隔的数字 <x><y>表示 ❷ 光标的热点/偏移。
      - ❶ 可选的 x和 y 坐标。两个 ❷ 小于 32 的 ❸ 无单位 ❹ 非负数。
      - 这些将设置光标的热点(hotspot)，相对于图像的左上角。
      - cursor: url(one.svg), url(two.svg) 5 5, progress;
示例1: 设置光标图像,不设置 x,y热点
- cursor: url("../images/star.png"),crosshair;
- 鼠标光标在超出上边框和左边框的时候, 就会消失不显示了。
示例2: 设置光标图像的同时,设置热点坐标。
- cursor: url("../images/star.png") 20 20,crosshair;
- 光标可以根据热点设置的 x,y超出上边框和左边框一定距离。

更多属性值,如下 ↓
- 属性值总共分为 7 类
html

<div class="divcontainer">
    <p class="poem">明日复明日，明日何其多。

        我生待明日，万事成蹉跎。</p>
</div>

/*设置元素的父元素*/

.divcontainer {
    width: 30%;
    height: 10%;
    margin: 10px;
    padding: 10px;
    border: solid 10px darkgreen;

}
.poem {
    width: 200px;
    height: 100px;
    margin: 10px;
    border: dashed 10px lightskyblue;
    padding: 10px;
    box-sizing: border-box;

    /*⑴  通用光标类型值*/
    /*cursor: auto;*/
    /*cursor: none;*/
    /*cursor: default;*/

    /*⑵ 链接和状态*/
    cursor: context-menu;
    cursor: help;
    cursor: pointer;
    cursor: progress;
    cursor: wait;

    /*⑶ 选择*/
    cursor: cell;
    cursor: crosshair;
    cursor: text;
    cursor: vertical-text;

    /* ⑷ 拖放 */
    cursor: alias;
    cursor: copy;
    cursor: move;
    cursor: no-drop;
    cursor: not-allowed;
    cursor: grab;
    cursor: grabbing;

    /* ⑸ 重设大小 和 滚动  */
    cursor: all-scroll;
    cursor: col-resize;
    cursor: row-resize;
    cursor: n-resize;
    cursor: e-resize;
    cursor: s-resize;
    cursor: w-resize;
    cursor: ne-resize;
    cursor: nw-resize;
    cursor: se-resize;
    cursor: sw-resize;
    cursor: ew-resize;
    cursor: ns-resize;
    cursor: nesw-resize;
    cursor: nwse-resize;
    
    /*⑹ 放大缩小*/
    cursor: zoom-in;
    cursor: zoom-out;

    /* ⑺ 设置 光标的图像 和 图像的热点*/
    /*cursor: url("../images/star.png"),crosshair;*/
    /*cursor: url("../images/star.png") 20 20,crosshair;*/
    /*cursor: url("../images/star.png") 32 20,crosshair;*/
}

属性值分类	用于	属性值	形状	示例
⑴ 通用	① 浏览器根据当前内容决定指针样式。	auto	不固定。	文本和非文本的地方显示不一样的光标: 工字型和箭头的。
	② 默认指针，通常是箭头形状。	default		文本和非文本的地方: 显示的都是箭头形状。
	③ 不显示光标。	none	不显示任何光标形状。	一进入元素内部，光标就消失了。不显示任何光标了。
⑵ 链接和状态	① 指针下有可用内容目录。只有 windows 中的 IE 10,11有效。	context-menu
	② 指示帮助。帮助信息是可用的。	help		箭头带个问号?
	③ 光标是指示链接的指针。通常是带指向的小手的图像。	pointer
	④ 程序 ❶ 后台繁忙，用户 ❷ 仍可交互 (与 wait 不同)。形状时一个箭头+ 一个转圈的圆或沙漏。	progress
	⑤ 程序很忙，用户要等待⇒ 无法与界面交互 (与 progress 相反)。形状: 不带箭头的沙漏或圆圈的图像。	wait
⑶ 选择	① 指示单元格可被选中。形状: 粗体加号。	cell
	② 交叉光标，常指示位图中的选择。形状: 细十字线。	crosshair
	③ 指示文本可被选中。形状: 工字型。	text
	④ 指示垂直文本可被选中。形状: 侧倒的工字型。	vertical-text
⑷ 拖放	① 复制或快捷方式将要被创建。形状: 箭头 + 一个回旋的箭头。	alias
	② 指示可复制。形状: 箭头 + 一个小加号。	copy
	③ 可被移动的。形状: 交叉的双向箭头。	move
	④ 项目在当前位置不能被放下。 bug: 在Windows 和Mac OS X上，no-drop 等同于not-allowed。	no-drop	实际显示的形状: 不带小手。
	⑤ 请求的操作将不被执行。	not-allowed
	⑥ 可以被抓取 (拖动来移动)。形状: 一个张开的小手。	grab
	⑦ 被抓住/抓取中 (拖着移动)。形状: 一个小拳头,手指短了很多。	grabbing

属性值分类	用于	属性值	形状
⑸ 重设大小和滚动	① 可以在任意方向滚动。	all-scroll	在Windows上， all-scroll 和可移动 move 是一样的形状，如下。谷歌和火狐中和 move 一样的形状。 IE11中测试是正常的样式。
	② 项目/列可以水平调整大小。形状: 竖线分隔左右箭头来表示。	col-resize
	③ 项目/行可以垂直调整大小。形状: 用横杠分隔向上和向下的箭头来表示。	row-resize
	④ -resize 格式，某条边可被移动。单向和双向:* 部分单向的光标，在 IE,Firefox,Chrome 中，会显示一个等效的双向调整大小光标。	❶ n-resize	北实际显示: 南北双向
		❷ e-resize	东实际显示: 东西双向
		❸ s-resize	南实际显示: 南北双向
		❹ w-resize	西实际显示: 东西双向
		❺ ne-resize	东北实际显示: 东北+西南双向
		❻ nw-resize	西北实际方向: 西北+东南双向
		❼ se-resize	东南实际方向: 西北+东南双向
		❽ sw-resize	西南实际显示: 东北+西南双向
	⑤ *-resize 格式，设置双向。	❶ ew-resize	东西
		❷ ns-resize	南北
		❸ nesw-resize	双向: 东北+西南
		❹ nwse-resize	双向: 西北+东南

形状等同的属性值 (因为一些浏览器中单向显示成双向)
- 12 个值⇒ 实际上只有 4 个双向的箭头 方向。
- n: north 北
- s: south 南
- e: east 东
- w: west 西
- ① 东= 西= 东西: e-resize = w-resize = ew-resize (东西, 东在前) =
- ② 南= 北 = 南北: s-resize = n-resize = ns-resize (南北, 北在前) =
- ③ 东北 = 西南 = 东北西南 = ne-resize = sw-resize = nesw-resize (南北,在东西前面) =
- ④ 西北 = 东南 = 西北东南 = nw-resize = se-resize= nwse-resize =

属性值分类	用于	属性值	形状	示例
⑹ 放大缩小	放大	zoom-in
⑹ 放大缩小	缩小	zoom-out

⑷ 鼠标光标形状的浏览器支持
- IE 有部分属性值不支持: grab,grabbing,,url的偏移值, vertical-text,zoom-in,zoom-out
- 安卓的火狐版本不支持鼠标光标形状。

5. resize 属性: 设置元素的可调整性和调整方向 ( 搭配 overflow 属性)

⑴ 设置元素的可调整性和调整方向: resize 属性
- 属性设置元素是否可调整大小，如果可以，则设置调整大小的方向。
- ① 适用元素: 块级元素、替换元素、表格单元格或内联块元素。
  - 设置overflow ≠ visible的 ❶ 元素。
    - 即使没有文本溢出，只要设置 overflow 属性值，且 overflow≠ visible的值了⇒ resize 就会有效。
  - 存疑: 表示图像 (images)或视频(videos)，以及内联框架iframe 的 ❷ 可选替换元素。
    - 原话: and optionally replaced elements representing images or videos, and iframes.
    - 测试: <img>图片元素中resize属性无效。 (存疑: 此处指的元素是什么? )
- ② 默认可调整的元素
  - <textarea> 元素在默认情况下是可调整大小的。可以使用 resize 属性覆盖此行为。
- ③ 不适用元素
  - ❶ 行内元素(Inline elements)
  - ❷ 将 overflow = visible(默认值) 的块元素。

⑵ 可调整性和方向的语法
- resize: none | both | horizontal | vertical | block | inline;

/* 关键字值 Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* 全局值 Global values */
resize: inherit;
resize: initial;
resize: unset;

⑶ 可调整性和方向属性值
- ① 不可调整大小 (默认值): none
  - 元素不能被用户缩放。
  - 元素没有提供用户可控制的方法来调整它的大小。
  - 默认显示 = resize: none;
    - 不可调整，也没有可调整的按钮。
- ② 水平垂直-双向可调整: both
  - 允许用户在水平和垂直方向上调整元素的大小。
  - 元素显示了一种允许用户调整大小的机制，可以水平或垂直地调整大小。
- ③ 水平可调整: horizontal，美 /ˌhɔːrɪˈzɑːntl/
  - 允许用户在水平方向上调整元素的大小。
  - 元素显示了一种允许用户在水平方向调整大小的机制。
- ④ 垂直可调整: vertical
  - 允许用户在垂直方向上调整元素的大小。
  - 元素显示了一种允许用户在垂直方向调整大小的机制。
- ⑤ 按块的方向: block = 块级元素的排列方向。(浏览器支持度差)
  - 元素显示了一种允许用户按块方向调整大小的机制。
  - 水平或垂直，取决于书写模式(writing-mode)和方向(direction) 的值。
- ⑥ 按内联方向: inline = 内联级元素的排列方向。(浏览器支持度差)
  - 元素显示了一种允许用户在内联方向。

上图涉及的代码
html

<div class="divcontainer">
    <p class="poem">明日复明日，明日何其多。

        我生待明日，万事成蹉跎。</p>
</div>

.divcontainer {
    width: 30%;
    height: 10%;
    margin: 10px;
    padding: 10px;
    border: solid 10px darkgreen;

}

.poem {
    /*宽高不设置成固定值⇒ 不文本溢出⇒ 只要设置 overflow≠ visible的值了 resize 属性也有效 */
    /*width: 100px;*/
    /*height: 50px;*/
    margin: 10px;
    border: dashed 10px lightskyblue;
    padding: 10px;
    /*不许换行⇒ 文本溢出⇒ 使用 resize 属性有效前提1,如果没设置这个 只要设置 overflow≠ visible的值了 resize 属性也有效 */
    /*white-space: nowrap;*/

    /*溢出不能可见 overflow≠ visible⇒ 使用 resize 属性有效 必须前提*/
    overflow: auto;
    /*overflow: hidden;*/
    /*overflow:scroll;*/


    /* 可调整属性和调整方向   */
    resize: none;
    resize: both;
    /*resize: horizontal;*/
    /*resize: vertical;*/
}

⑷ 可调整型和方向的浏览器支持
- 对<iframe>没有效果。

6. user-select 属性: 设置文本的选中性

⑴ 设置文本选中性: user-select 属性
- 设置用户能否选中文本。

⑵ 文本选中性的语法
- user-select: auto | text | none | contain | all;

/* 关键字值 Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* 全局值 Global values */
user-select: inherit;
user-select: initial;
user-select: unset;

/* 前缀 Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* 前缀 WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* 在 Safari 中无效; 仅使用
                             "none" or "text", 否则 it will
                             allow typing in the <html> container */

/* 前缀 Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

⑶ 文本选中性的属性值
- ① 文本不可选中: none
  - 元素及其子元素的文本不可选中。
    - Selection 对象可以包含这些元素。
  - 从Firefox 21开始， none 表现的像 -moz-none，因此可以使用 -moz-user-select: text在子元素上重新启用选择。
    - 默认: 父子的内容都是可以选中的，设置不可选中后⇒ 都无法再选中，过程如下
- ② 浏览器决定(默认值): auto
  - 根据不同情况决定，auto的计算值确定如下：
    - 在 ::before 和 ::after 伪元素上
      - 计算值是 none。
    - 元素 = 可编辑元素
      - 计算值是 contain。
    - 否则，父元素的 user-select的计算值为 all
      - 计算值则为 all
    - 否则，父元素的 user-select 的计算值为 none
      - 计算值则为 none
    - 否则，计算值则为: text
      - 普通元素，默认值是 auto，一般都是可选中的。
- ③ 可以选中文本: text
  - 用户可以选择文本。
- ④ 整体选中(父子一起): all
  - 父⇒ 子: 如果一个选择包含元素的一部分，那么该选择必须包含整个元素，包括它的所有后代。
  - 子⇒ 父: 如果在子元素中发生了双击或单击内容，则将选择具有此值的最高祖先。
    - 在父元素或者子元素中的任意位置单击一下，就会同时选中父子中的所有内容。
- ⑤ 元素内: contain (= element，IE-specific alias)
  - 允许选择在元素内开始; 但是，选择将包含在该元素的边界内。
  - element = contain仅在 IE 中受支持。
- 文本选中性和继承
  - 在不同浏览器之间实现的一个区别是继承。
  - 在 Firefox 中，-moz-user-select 不会被绝对定位的元素继承，但在 Safari 和Chrome中，-webkit-user-select 由这些元素继承。

上图的代码
html

<div class="divcontainer">
    明日歌
    <p class="poem">明日复明日，明日何其多。

        我生待明日，万事成蹉跎。</p>
</div>

/*设置 元素的包含块 */
.divcontainer {
    width: 20%;
    height: 10%;
    margin: 10px;
    padding: 10px;
    border: solid 10px darkgreen;
    text-align: center;
    font-weight: bold;

    /* 设置文本的可选择性 */
    user-select: none;
    /*user-select: auto;*/
    /*user-select: text;*/
    /*user-select: all;*/
    /*user-select: contain;*/
    /*user-select: element;!*IE中*!*/

}

.poem {
    /*宽高不设置成固定值⇒ 不文本溢出⇒ 只要设置 overflow≠ visible的值了 resize 属性也有效 */
    /*width: 100px;*/
    /*height: 50px;*/
    margin: 10px;
    border: dashed 10px lightskyblue;
    padding: 10px;
    font-weight: normal;
    letter-spacing: 1px;
    /*子元素中 重启文本选中*/
    /*user-select: text;*/
}

⑷ 文本选中性的浏览器支持
- 需要浏览器前缀: -webkit-，-ms-，-moz-
- 属性值 contain的浏览器支持很差。

♣ 结束语和友情链接

参考文档
- MDN CSS 教程
- CSS Basic User Interface - CSS: Cascading Style Sheets | MDN

友情链接
- 【CSS 颜色的合法颜色值 (详细介绍)】
- 【CSS 单位 (详细介绍)】

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
- 可以备注支持的理由或想对作者说的话哦~
赞助二维码:

转载请评论告知作者并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103494965
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

在这里插入图片描述

Hey_Coder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS 用户界面属性 (Basic user interface)】

CSS 用户界面属性 Basic user interface1. appearance 属性: 设置元素的外观样式2. box-sizing 属性: 设置元素宽高属性的指定区域 (搭配 width,height 属性)3. caret-color 属性: 设置插入光标的颜色4. cursor 属性: 设置元素内鼠标光标的形状5. resize 属性: 设置元素的可调整性和调整方向 ( 搭配 overflow 属性)6. user-select 属性: 设置文本
复制链接

扫一扫