CSS Appearance 用户界面

前言

• 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

属性	描述	CSS	备注	🔗
appearance	允许使一个元素的外观像一个标准的用户界面元素	3		🔗
box-sizing	允许以适应区域而用某种方式定义某些元素	3		🔗
icon	为创作者提供了将元素设置为图标等价物的能力	3		🔗
nav-down	指定在何处使用箭头向下导航键时进行导航	3		🔗
nav-index	指定一个元素的 Tab 的顺序	3		🔗
nav-left	指定在何处使用左侧的箭头导航键进行导航	3		🔗
nav-right	指定在何处使用右侧的箭头导航键进行导航	3		🔗
nav-up	指定在何处使用箭头向上导航键时进行导航	3		🔗
outline-offset	外轮廓修饰并绘制超出边框的边缘	3		🔗
resize	指定一个元素是否是由用户调整大小	3		🔗

1、方框大小

• box-sizing 属性允许以确切的方式定义适应某个区域的具体内容。

属性	描述	CSS	备注	🔗
box-sizing	允许以适应区域而用某种方式定义某些元素	3		🔗

• 属性值

值	描述
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于 box 的宽度和高度。 元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
inherit	指定 box-sizing 属性的值，应该从父元素继承

• box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。

  • content-box 是默认的盒子模型，即 W3C 标准盒子模型，现如今所有主流浏览器都支持并使用该模型渲染布局，包括 IE。但麻烦却是一堆堆的，因为，在这模型下，border 与 padding 的设置会破坏元素的尺寸，导致最终展现出来的布局效果并不符合理想效果，而如果想要达到理想效果，又需要去计算宽高，非常麻烦。（别的属性是越标准越好用，但这个属性却是反向向 IE 标准的）

  • 而 border-box 则指 IE 盒子模型，也称为 “怪异盒子模型”。此模型下，边框和填充并不会影响元素的宽高，相当于是将元素的空间霸占成自己的空间，元素总体大小不变，内容空间变小，边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时，就非常的舒服，因为在指定元素尺寸并设置该属性值后，元素尺寸就不会因被破坏而又得重新计算了。

• 实例

  <style>
      div.container {
          width: 30em;
          border: 1em solid;
      }
  
      div.box {
          width: 50%;
          border: 1em solid red;
          float: left;
          
          box-sizing: border-box;
          -moz-box-sizing: border-box; /* Firefox */
      }
  </style>

  <div class="container">
      <div class="box">这个 div 占据了左边的一半。</div>
      <div class="box">这个 div 占据了右边的一半。</div>
  </div>

• 效果

  
  

  
  

  这个 div 占据了左边的一半。

  
  

  这个 div 占据了右边的一半。

  
  

  
  

1.1 不使用 box-sizing 属性

• 默认情况下，元素的宽度与高度计算方式如下：

  • width(宽) + padding(内边距) + border(边框) = 元素实际宽度
  • height(高) + padding(内边距) + border(边框) = 元素实际高度

• 这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大（因为元素的边框与内边距也会计算在 width/height 中）。

• 以上两个 <div> 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距。

• 实例

  <style>
      .div1 {
          width: 300px;
          height: 100px;
          border: 1px solid blue;
      }
      .div2 {
          width: 300px;
          height: 100px;
          padding: 50px;
          border: 1px solid red;
      }
  </style>

  <div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
  <br>
  <div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>

• 效果

  
  

  这个是个较小的框 (width 为 300px ，height 为 100px)。

  
  

  这个是个较大的框 (width 为 300px ，height 为 100px)。

  
  

• 使用这种方式如果想要获得较小的那个框且包含内边距，就不得不考虑到边框和内边距的宽度。

1.2 使用 box-sizing 属性

• CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

• 如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中。

• 以下是两个 <div> 元素添加 box-sizing: border-box; 属性的简单实例。

• 实例

  <style>
      .div1 {
          width: 300px;
          height: 100px;
          border: 1px solid blue;
          box-sizing: border-box;
      }
      .div2 {
          width: 300px;
          height: 100px;
          padding: 50px;
          border: 1px solid red;
          box-sizing: border-box;
      }
  </style>

  <div class="div1">两个 div 现在是一样大小的!</div>
  <br>
  <div class="div2">两个 div 现在是一样大小的!</div>

• 效果

  
  

  两个 div 现在是一样大小的!

  
  

  两个 div 现在是一样大小的!

  
  

• 从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。

1.3 推荐使用 box-sizing

• 以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box;。

• 但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样。

• 所有元素使用 box-sizing 是比较推荐的。

• 实例

  <style>
      * {
          box-sizing: border-box;
      }
      input, textarea {
          width: 100%;
      }
  </style>

  <form>
      用户名:<br />
      <input type="text" name="username" value="" /><br />
      邮箱:<br />
      <input type="text" name="email" value="" /><br />
      评论:<br />
      <textarea name="message" rows="5" cols="30"></textarea>
      <br /><br />
      <input type="submit" value="提交" />
  </form>

• 效果

  
  

  用户名:
  
  
  邮箱:
  
  
  评论:
  
  
  

  
  

• 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。

2、外形修饰

• outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

• 轮廓与边框有两点不同：

  • 轮廓不占用空间
  • 轮廓可能是非矩形

属性	描述	CSS	备注	🔗
outline-offset	外轮廓修饰并绘制超出边框的边缘	3		🔗

• 属性值

值	描述
length	轮廓与边框边缘的距离
inherit	规定应从父元素继承 outline-offset 属性的值

• outline-offset 属性用来设置轮廓（外边框）与边框（内边框）之间的间隔，或 “填充”，默认情况下，轮廓是紧贴着边框的，所以需要通过该属性来使它们分开。

• outline 不会破坏元素宽高，同样的 outline-offset 设置的间隔，也不会影响元素的宽高。

• 实例

  <style>
      div {
          margin: 20px;
          width: 150px;
          padding: 10px;
          height: 70px;
          border: 2px solid black;
          
          outline: 2px solid red;
          outline-offset: 15px;
      }
  </style>

  <div>这个 div 在边框之外 15 像素处有一个轮廓。</div>

• 效果

  
  

  这个 div 在边框之外 15 像素处有一个轮廓。

  
  

• 这个 div 在边框之外 15 像素处有一个轮廓。

3、调整尺寸

• CSS3 中，resize 属性指定一个元素是否应该由用户去调整大小。

属性	描述	CSS	备注	🔗
resize	指定一个元素是否是由用户调整大小	3		🔗

• 属性值

值	描述
none	用户无法调整元素的尺寸
both	用户可调整元素的高度和宽度
horizontal	用户可调整元素的宽度
vertical	用户可调整元素的高度

• resize 属性，规定用户可以通过拉伸元素尺寸来显示溢出隐藏的内容。效果类似 <textarea></textarea> 文本域标签。

• 可以说 <textarea> 标签自带 resize: both; 所以可以通过设置 resize: none; 来禁止 <textarea> 的尺寸被拉伸。

• 但是，值得注意的是溢出形式的设置：

  • 当 overflow: hidden; 时，无论是否拉伸尺寸，超出尺寸的内容都会被隐藏裁剪；
  • 当 overflow: scroll; 时，无论是否拉伸尺寸，元素始终显示滚动条；
  • 当 overflow: auto; 时，仅尺寸小于内容显示时，才会出现滚动条，可以说，这是最美观的设置（<textarea> 也是自带此属性）；

• 实例

  <style>
      div {
          border: 2px solid lightgray;
          padding: 10px 40px;
          width: 300px;
          overflow: auto;
          
          resize: both;
      }
  </style>

  <div>调整属性指定一个元素是否由用户可调整大小的。</div>

• 效果

  
  

  调整属性指定一个元素是否由用户可调整大小的。

  
  

• 这个 div 元素由用户调整大小。(在 Firefox 4+, Chrome, 和 Safari 中)。

4、浏览器支持

属性
resize	4.0	不兼容	5.0 4.0 -moz-	4.0	15.0
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.1 -webkit-	9.5
outline-offset	4.0	不兼容	5.0 4.0 -moz-	4.0	9.5

• 表格中的数字表示支持该属性的第一个浏览器版本号。
• 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。