CSS3ユーザーインターフェース

CSS3 ユーザーインターフェイス

CSS3 では、要素のサイズ、ボックスのサイズ、外枠を調整するための新しいユーザーインターフェイス機能がいくつか追加されています。

この章では、次のユーザーインターフェイスプロパティについて学習します:

resizebox-sizingoutline-offset

CSS3 サイズ変更 (サイズ変更)

CSS3 では、resize 属性は要素のサイズを変更するかどうかを指定します。ユーザーのサイズ。

この div 要素はユーザーによってサイズ変更されます。 (Firefox 4 以降、Chrome、Safari の場合)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>

CSS3 ボックスサイズ設定

ボックスサイズ設定プロパティを使用すると、コンテンツが特定の領域にどのように収まるかを正確に定義できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>

CSS3 アウトライン変更 (outline-offset)

outline-offset プロパティは、アウトラインをオフセットし、境界線の端を越えてアウトラインを描画します。

アウトラインは 2 つの点で境界線と異なります:

アウトラインはスペースをとらないアウトラインは長方形でなくてもよい

この div には境界線の 15 ピクセル外側にアウトラインがあります。

CSS コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div
{
margin:20px;
width:150px; 
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
} 
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>

新しいユーザーインターフェイス機能

属性要素を標準のユーザーインターフェイス要素のように見せる 3 -sizing を使用すると、ロケールに合わせて特定の要素を定義できます。 3

オーサリング用アイコン要素を同等のアイコンに設定する機能を提供します。 3

nav-down 下矢印ナビゲーションキーを使用して移動する場所を指定します 3

nav-index 要素のタブの順序を指定します 3

nav-left 左矢印ナビゲーションキーを使用する場所を指定しますナビゲーション 3 aNAV-RIGHT は、ナビゲーションに右側の右矢印ナビゲーションキーを使用する場所を指定します 3

Nav-UP ナビゲーションキーを移動するために矢印を使用する場所を指定します 3

アウトライン - 外部輪郭の変更をオフセットし、境界エッジを超えて描画します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } </style> </head> <body> <p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p> <div>调整属性指定一个元素是否由用户可调整大小的。.</div> </body> </html>

提出するリセットコード

自動運転