CSS3 用戶界面

CSS3的用戶界面模塊為頁面的UI表現(xiàn)提供了更多效果和選擇方案。

增加了一些新的用戶界面特性來調(diào)整元素尺寸，框尺寸和外邊框。

resize 屬性

屬性定義及使用說明

resize屬性指定一個元素是否是由用戶調(diào)整大小的。

注意：resize屬性適用于計(jì)算其他元素的溢出值是不是"visible"。

默認(rèn)值： none

繼承： no

版本： CSS3

JavaScript 語法： object.style.resize="both"

瀏覽器支持：Firefox 4+, Chrome,和Safari支持resize屬性。

語法

resize: none|both|horizontal|vertical:

none：不允許用戶調(diào)整元素大小。不允許用戶調(diào)整元素大小。

both：用戶可以調(diào)節(jié)元素的寬度和高度。

horizontal：用戶可以調(diào)節(jié)元素的寬度

vertical：用戶可以調(diào)節(jié)元素的高度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
<style>
  .box {   
        width: 600px;   
        height: 300px;   
        border: 1px solid #000;   
        resize: both;   
        overflow: auto;   
     }  
</style>
</head> 
<body>
    <p>請注意觀察方框右下角</p>
    <div class="box"></div>
</body>  
</html>

box-sizing屬性
box-sizing具有content-box和border-box兩個值。

box-sizing: content-box;
當(dāng)設(shè)置box-sizing:content-box;時，瀏覽器對盒模型的解釋遵從W3C標(biāo)準(zhǔn)，當(dāng)它定義width和height時，它的寬度不包括border和padding。

box-sizing: border-box;
當(dāng) 設(shè)置box-sizing:border-box;時，瀏覽器對盒模型的解釋與IE6之前的版本相同，當(dāng)它定義width和height時，border 和padding則是被包含在寬高之內(nèi)的。內(nèi)容的寬和高可以通過定義width和height減去相應(yīng)方向的padding和border的寬度得到。內(nèi) 容的寬和高必須保證不能為負(fù)，必要時將自動增大該元素border box的尺寸以使其內(nèi)容的寬或高最小為0。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
      <style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
   </style>
  </head> 
  <body>
    <div class="content-box"></div>
      <div class="padding-box"></div>
    <div class="border-box"></div>
  </body>  
</html>

outline-offset 屬性

outline-offset 屬性對輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。

輪廓與邊框有兩點(diǎn)不同：

1. 輪廓不占用空間

2. 輪廓可能是非矩形

語法：

outline-offset：<length> | inherit

<length>：定義輪廓距離容器的值。

inherit：默認(rèn)繼承。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style type="text/css">
    div {
        height: 100px;
        width: 100px;
        margin: 50px auto;
        outline: 10px solid rgba(255,255,0,9);
        background: black;
        outline-offset: 10px;
        border:5px solid blue;
    }
   </style>
  </head> 
  <body>
      <div></div>
  </body>  
</html>

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; } .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; } .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; } </style> </head> <body> <div class="content-box"></div> <div class="padding-box"></div> <div class="border-box"></div> </body> </html>

einreichen Code zurücksetzen

Automatische Operation