CSS3 box-sizing プロパティ
 完全な CSS3 リファレンス
例
Specify two bordered boxes side by side:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
} |
Try it yourself »
|
ブラウザ・サポート
box-sizing property is supported in Internet Explorer, Opera, and Chrome.
Firefox supports an alternative, the -moz-box-sizing property.
Safari supports an alternative, the -webkit-box-sizing property.
定義と用法
box-sizing property allows you to define certain elements to fit an area
in a certain way.
For example, if youd like two bordered boxes side by side, it can be
achieved through setting box-sizing to "border-box". This forces the browser to
render the box with the specified width and height, and place the border and
padding inside the box.
| デフォルト値: |
content-box |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.boxSizing="border-box" |
構文
| box-sizing: content-box|border-box|inherit: |
| 値 |
説明 |
| content-box |
This is the behavior of width and height as specified by CSS2.1. The
specified width and height (and min/max properties) apply to the width and
height respectively of the content box of the element. The padding and
border of the element are laid out and drawn outside the specified width and
height |
| border-box |
The specified width and height (and min/max properties) on this element
determine the border box of the element. That is, any padding or border
specified on the element is laid out and drawn inside this specified width
and height. The content width and height are calculated by subtracting the
border and padding widths of the respective sides from the specified 'width'
and 'height' properties |
| inherit |
Specifies that the value of the box-sizing property should be inherited
from the parent element |
関連ページ
CSS3 チュートリアル: CSS3 User Interface
完全な CSS3 リファレンス
|