常用css属性拓展
text-overflow:clip | ellipsis(默认值:clip)
clip:当内联内容溢出块容器时,将溢出部分裁切掉。
ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...)。
----------------------------------------------------------------------------------
pointer-events:auto | none (默认值auto这里讲解是常用的属性值,具体参考实践和css手册)
与pointer-events属性未指定时的表现效果相同。
none:元素永远不会成为鼠标事件的target。
----------------------------------------------------------------------------------
user-select:none | text | all | element(默认值:text,适用于:除替换元素外的所有元素)
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element:可以选择文本,但选择范围受元素边界的约束
IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果;
----------------------------------------------------------------------------------
resize:none | both | horizontal | vertical(默认值:none)
none:不允许用户调整元素大小。
both:用户可以调节元素的宽度和高度。
horizontal:用户可以调节元素的宽度
vertical:用户可以调节元素的高度。
----------------------------------------------------------------------------------
text-decoration:none | underline | overline | line-through | blink
none:无下划线;
underline:下划线;
overline:上划线;
line-through:贯穿线;
blink:定义闪烁的文本。
----------------------------------------------------------------------------------
text-transform:none | capitalize | uppercase | lowercase | full-width(默认值:none)
none:无转换
capitalize:将每个单词的第一个字母转换成大写
uppercase:将每个单词转换成大写
lowercase:将每个单词转换成小写
full-width:将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,
将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)
----------------------------------------------------------------------------------
white-space:normal | pre | nowrap | pre-wrap | pre-line(默认值:normal)
normal:默认处理方式。
pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
nowrap:强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
----------------------------------------------------------------------------------
overflow-wrap/word-wrap:normal | break-word(默认值:normal)
normal:允许内容顶开或溢出指定的容器边界。
break-word:内容将在边界内换行。如果需要,单词内部允许断行。
----------------------------------------------------------------------------------
letter-spacing:normal | <length> | <percentage>(字间距,默认值:normal)
normal:默认间隔
<length>:用长度值指定间隔。可以为负值。如:2px;
<percentage>:用百分比指定间隔。可以为负值。(CSS3)
text-indent(首行缩进)
----------------------------------------------------------------------------------
text-size-adjust:auto | none | <percentage>(默认值:auto)
auto:文本大小根据设备尺寸进行调整。
none:文本大小不会根据设备尺寸进行调整。
<percentage>:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。
该属性只在移动设备上生效;如果你的页面没有定义meta viewport,此属性定义将无效;
----------------------------------------------------------------------------------
border-collapse:separate | collapse(默认值:separate)
适用于:table系元素;
separate:边框独立
collapse:相邻边被合并
----------------------------------------------------------------------------------
display:none | inline | block | inline-block | | flex | inline-flex(默认值:inline)
none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline:指定对象为内联元素。
block:指定对象为块元素。
inline-block:指定对象为内联块元素。(CSS2)
flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
(以上探讨的是常用的display属性)
----------------------------------------------------------------------------------
clear:none | left | right | both(默认值:none)
适用于:块级元素;
none:允许两边都可以有浮动对象
both:不允许有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
----------------------------------------------------------------------------------
visibility:visible | hidden | collapse(默认值:visible)
visible:设置对象可视
hidden:设置对象隐藏(占位隐藏,display是不占位隐藏)
collapse:主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。
----------------------------------------------------------------------------------
overflow:visible | hidden | scroll | auto(默认值:visible)
visible:对溢出内容不做处理,内容可能会超出容器。
hidden:隐藏溢出容器的内容且不出现滚动条。
scroll:隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
auto:当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
overflow的效果等同于overflow-x + overflow-y;
overflow-x: auto;当内容超出设定的宽度时自动出现横向滚动条
overflow-y:auto;当内容超出设定的宽度时自动出现纵向滚动条
----------------------------------------------------------------------------------