hiccLoghicc log by wccHipo日志

css3笔记——resize、nav-index、content属性

toc

Intro

一.resize属性

该属性设置浏览器提供哪种尺寸调节机制来允许用户自由缩放浏览器中元素的大小,其支持的属性有:

  • none:不能缩放元素,默认只。
  • both:允许用户调节元素的宽度和高度。
  • horizontal:允许用户调节元素的宽度。
  • vertiacl:允许用户调节元素高度。
  • inherit:默认继承。

resize属性是css3中一个非常实用的属性,比借助于JavaScript模拟来的轻量,但是进过测试使用resize,若是元素定了高度或者宽度,则缩放不能小于所定的宽度或者高度,而且在视觉上没有明确的指示,也没有鼠标手势,只能从一个角度缩放元素

二.nav-index属性,定义导航序列号

导航的序列号可以改变页面中元素通过键盘操作获得焦点的顺序。nav-index的值有:

  • auto:浏览器默认的顺序。
  • :必须为正整数,数字越小越先被导航,若不同元素的数值一样,则按照文档的先后顺序进行导航。
  • inherit:默认继承。

而与nav-inde配合使用的在css3中增加了四个方向键切换导航的属性。nav-up、nav-right、nav-down、nav-left其值有:

  • auto:根据浏览器默认的切换顺序(根据文档流的顺序)。
  • :要切换元素的id名/
  • root | :该参数不能以“_”敏明,指出framest目标页面之间的元素焦点切换。如果制定的目标页面不存在,则被视为当前页面高的焦点。该属性是以关键节点“root”标示,浏览器将把整个framest框架页面定为目标。
  • inherit:继承。

三.content属性——为元素添加内容

content属性能够在制定的元素中添加非结构性的样式服务标签,或者补充说明性的内容,其值有:

  • normal:默认值。
  • string:插入文本内容。
  • attr():插入元素的属性值。
  • url():插入一个外部资源(任何浏览器支持的资源,譬如图像,音频,视频)。
  • counter():计数器,用于插入排序标识。
  • none:无任何内容。

值得注意的是可能content属性用的最多的地方就是清除浮动 (来源于bootstrap),譬如下面的代码:

.clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; }