跳到主要内容

改变盒模型组成方式

box-sizing: content-box | border-box | inherit;
  • content-box ：该属性值将维持 CSS 2.1 盒模型的组成模式，即元素 width/height=border+ padding+content
  • border-box ：该属性值将重新定义 CSS 2.1 盒模型组成模式，即元素 width/height=content 。此时浏览器对盒模型的解释与 IE6 解析相同
  • inherit ：默认继承

调节元素尺寸​

resize: none | both | horizontal | vertical | inherit;
  • none ：浏览器不提供尺寸调整机制，用户不能操纵机制调节元素的尺寸
  • both ：浏览器提供双向尺寸调整机制，允许用户调节元素的宽度和高度
  • horizontal ：浏览器提供单向水平尺寸调整机制，允许用户调节元素的宽度
  • vertical ：浏览器提供单向垂直尺寸的调整机制，允许用户调节元素的高度
  • inherit ：默认继承

轮廓​

outline 属性可以定义块元素的外轮廓线，该属性在 CSS 2.1 规范中已被明确定义，但是并未得到各主流浏览器的广泛支持， CSS3 增强了该特性。

outline: [outline-color] | | [outline-style] | | [outline-width] | |
  [outline-offset]| inherit;

  • <outline-color>: 定义轮廓边框颜色

  • <outline-style>: 定义轮廓边框轮廓

  • <outline-width>: 定义轮廓边框宽度

  • <outline-offset>: 定义轮廓边框偏移位置的数值

  • inherit ：默认继承

  • outline-color ：定义轮廓边框颜色。 outline-color 属性接受所有的颜色，还包括关键字 invert 。 invert 应该在屏幕上对像素点颜色进行一次反转。这个技巧保证焦点框可见，而不管背景颜色是什么

  • outline-style ：定义轮廓边框轮廓。 outline-style 属性与 border-style 属性接受值和用法相同，如 none 、 dotted 、 dashed 、 solid 、 double 、 groove 、 ridge 、 inset 和 outset 。但是， hidden 属性值并不是一个合法的外轮廓样式

  • outline-width ：定义轮廓边框宽度。 outline-width 属性与 border-width 属性接受值和用法相同

  • outline-offset ：定义轮廓边框偏移位置的数值

outline 属性是个复合属性，可以设置 outline-style 、 outline-width 和 outline-color 属性值。注意，外轮廓线在各边都是一样的，这与边框不同，没有 outline-top 或 outline-left 属性。 CSS 不支持定义多个互相覆盖的外轮廓线，也没有定义如何定义因在其它元素之后而有部分不可见的框的外轮廓线。

定义轮廓线宽度​

outline-width:thin | medium | thick | lt;length> | inherit;

定义轮廓线样式​

outline-style: auto | <border-style> | inherit;
  • auto ：根据浏览器自动设置
  • <border-style> : 沿用边框样式。包括 none 、 dotted 、 dashed 、 solid 、 double 、 groove 、 ridge 、 inset 和 outset 。详细说明请参阅 CSS 2.1 中有关 border-style 属性值内容部分
  • inherit ：默认继承

定义轮廓线颜色​

outline-color: <color> | invert | inherit;
  • <color>: 可以是颜色名，如 red ；函数值，如 rgb(255,0,0) ；或者十六进制值，如 #ff0000
  • invert ：执行颜色反转（逆向的颜色）。这样可以确保外轮廓线在不同的背景颜色中都是可见的
  • inherit ：默认继承

定义轮廓线位移​

outline-offset: <length> | inherit;

设计导航​

HTML 为表单标签定义 tab-index 属性，这个属性为当前元素指定了其在当前文档中导航的序列号。导航的序列号可以修改页面中元素通过键盘操作获得焦点的顺序。该属性可以存在于嵌套的页面元素当中。

CSS3 新增加了 nav-index 属性，用来代替标签属性 tab-index 。为了使浏览器能按顺序获取焦点，页面元素需要遵循如下规则：

  • 该元素支持 nav-index 属性，而被赋予正整数属性值的元素将会被优先导航。浏览器将按照 nav-index 属性值从小到大的顺序进行导航。属性值无须按次序，也无须以特定的值开始。拥有同一 nav-index 属性值的元素将以它们在文档流中出现的顺序进行导航
  • 对于那些不支持 nav-index 属性，或者 nav-index 属性值为 auto 的元素，将以它们在文档流中出现的顺序进行导航
  • 对那些禁用的元素，将不参与导航的排序
nav-index: auto | <number> | inherit;
  • auto ：浏览器默认的顺序
  • <number>: 必须是正整数，该数字指定了元素的导航顺序。 1 意味着最先被导航。当若干个元素的 nav-index 值相同时，则按照文档的先后顺序进行导航
  • inherit ：默认继承

定义方向键控制顺序​

  • nav-up ：控制向上方向键
  • nav-right ：控制向右方向键
  • nav-down ：控制向下方向键
  • nav-left ：控制向左方向键
nav-up:auto | <id>[ current | root | <target-name>]? | inherit;
    nav- right:auto | <id>[ current | root | <target-name>]? | inherit;
    nav- down:auto | <id>[ current | root | <target-name>]? | inherit;
    nav- left:auto | <id>[ current | root | <target-name>]? | inherit;
  • inherit ：继承
  • auto ：根据浏览器默认的顺序
  • <id>: 要切换元素的 id 命名
  • root | <target-name>: 该参数不能以 * 命名，指出 frameset 目标页面之间的元素焦点切换。如果指定的目标页面不存在，则被视为当前页面的焦点，意味着完全依赖框架页。该属性是以关键节点" root "标示，浏览器将把整个 frameset 框架页定为目标

添加显示内容​

content: normal | string | attr() | uri() | counter() | none;
  • normal ：默认值
  • string ：插入文本内容
  • attr() ：插入元素的属性值
  • uri() ：插入一个外部资源，如图像、音频、视频或浏览器支持的其它任何资源
  • counter() ：计数器，用于插入排序标识
  • none ：无任何内容

恢复默认样式​

取消元素样式 CSS3 中新增了一个 initial 属性值，使用这个 initial 属性值可以直接取消对某个元素的样式指定。

图文​

以图换字方法一：把文字标签的高度设置为 0 ， padding-top 的值设置为与背景图片高度一致，以显示背景，同时设置文字溢出隐藏

  • 需要进行以图换字的标签高度必须设置为 0 ，如果不设置高度为 0 ，标签的高度将由内容撑开
  • 使用 padding-top 属性来显示背景图片， padding-top 的属性值是背景图片的高度
  • 必须有 overflow:hidden ， overflow:hidden 用于隐藏溢出。一开始，我们给标签设置了高度为 0 ，那么标签内的文本就会在高度以外显示，使用 overflow:hidden 能将溢出的文本隐藏起来

以图换字方法二：超大行高配合溢出隐藏​

文字的超大行高可以调整文本行基线间的垂直距离，即文字在文本行之间的位置 。

text-indent 用于设置首行缩进，可以支持负数，设置为负数时代表文字向左偏移 2000 像素。这种方式看似将文字隐藏了，但是当用户强制缩小页面（ Ctrl+ 滚轮滚动可强制缩小页面）时，文字可能就会被看见。所以，使用 text-indent 设置超大负值这种方式是不推荐的，因为这种方式很耗性能且不能保证任何时候的效果完全一致。

以图换字方法四：给文字标签添加 display:none 样式

精灵图​

CSS 精灵图是网页制作中最常见的图片处理方式，它有以下 4 个优点。

  • 使图片变小，把每个小图片的大小相加后与精灵图的大小做对比，就会发现精灵图减少了图片所占的字节数
  • 减少了网页 http 请求，从而大大提高了页面的性能
  • 解决了单个图片命名的烦恼，只需要对集合图片命名即可
  • 操作以及维护起来更方便，如果想改变图片颜色或者其它样式，只需要在一张图片上修改即可

CSS 精灵图的优点很多，但并不代表 CSS 精灵图就完美无缺， CSS 精灵图还是有一些缺点是需要注意的：

  • 在合并图片时，要把多张图片有序合理地合并成一张图片，还要留好足够的空间
  • 需要考虑在宽屏浏览器或高分辨率的浏览器下图片宽度是否合适，如果不合适，那么背景图就会出现裂痕等问题

content​

使用 before 选择器在元素前面插入内容，使用 after 选择器在元素后面插入内容，在选择器的 content 属性中定义要插入的内容。

使用 before 选择器或 after 选择器，除了可以在元素的前面或后面插入文字之外，还可以插入图像文件。插入图像时，需要使用 url 属性值来指定图像文件的路径。

如果在 content 属性中通过" attr （属性名）"这种形式来指定 attr 属性值，可以将某个属性的属性值显示出来。

在 content 属性中使用 counter 属性值来针对多个项目追加连续编号，使用计数器来计算编号，计数器可任意命名。

另外，还需要在元素的样式中追加对元素的 counter-increment 属性的指定，为了使用连续编号，需要将 counter-increment 属性的属性值设定为 before 选择器或 after 选择器的 counter 属性值中所指定的计数器名。

可以使用 list-style-type 属性的值来指定编号的种类， list-style-type 为指定列表编号时所用的属性。

可以在大编号中嵌套中编号，在中编号中嵌套小编号。

如果要将第二个大标题里的中标题重新开始编号的话，需要在大标题中使用 counter-reset 属性将中编号进行重置。

可以使用 content 属性的 open-quote 属性值与 close-quote 属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。 open-quote 属性值用于添加开始的嵌套文字符号， close-quote 属性值用于添加结尾的嵌套文字符号。

另外，在元素的样式中使用 quotes 属性来指定使用什么嵌套文字符号。