ホームページ > 記事 > ウェブフロントエンド > cssプロパティボックスのサイズ変更
cssプロパティボックスのサイズ変更
- 高洛峰オリジナル
- 2017-02-24 13:27:001300ブラウズ
この記事では主にcssプロパティボックスのサイズ変更について紹介します。 box-sizing属性は、width属性とheight属性でそれぞれ指定した幅と高さの値にパディング領域を含めるかどうかを指定できると説明している人もいます。要素内、および境界線の幅と高さ。
ボックスのサイジングを理解する前に、ボックス モデルを簡単に確認してみましょう。モデルは、標準ボックス モデル + IE ボックス モデルに分かれています。それで、違いは何ですか？画像を参照してください:
上の画像からわかるように、標準の w3c ボックス モデルのスコープにはマージン、ボーダー、パディング、コンテンツが含まれており、コンテンツ部分には他の部分は含まれません。
上の図からわかるように、IE ボックス モデルのスコープには、マージン、ボーダー、パディング、コンテンツも含まれます。標準の w3c ボックス モデルとの違いは、IE ボックス モデルのコンテンツ部分であることです。ボーダーとパディングが含まれます。
もちろん、フロントエンド エンジニアはページ レイアウトを記述するときに標準ボックス モデルを採用し、標準ボックス モデルに従ってページをレンダリングするようにブラウザに指示する必要があります (ページの HTML 宣言に doctype ステートメントを追加する必要があります)。 、その逆も同様で、ページはさまざまなブラウザに従って解析され、IE はレンダリングに IE のボックス モデルを使用し、FIREFOX と GOOGLE は標準モードに従ってレンダリングされますが、これは明らかに不合理です。
したがって、私たちが作成する Web ページをさまざまなブラウザーと互換性を持たせるためには、標準の w3c ボックス モデルを使用するのが最善です。
ボックスモデルについて話した後、CSS 属性のボックスサイジングについて理解しましょう。
box-sizing の 3 つの属性値: content-box は、幅と高さの外側に要素のパディングと境界線を描画します。 border-box 要素に指定されたパディングと境界線は、設定された幅と高さの外側になります。継承は、box-sizing 属性の値が親要素から継承されることを指定します。box-sizing 属性を使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。
ie8+ ブラウザは content-box と border-box をサポートします。
ff は 3 つの値すべてをサポートします。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>box-sizing事项</title>
<style type="text/css">
*{padding: 0;margin: 0;font-family: "微软雅黑";box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */}
.content{width: 800px;height: 500px;margin: 30px auto;border: 5px solid #e2e2e2;padding: 10px}
</style>
</head>
<body>
<p class="content">
这是内容@！
</p>
</body>
</html>box-sizing 属性を変更すると、ボックスの幅は 770px = 800px - 10px -20px になります。
は、内部の塗りつぶしと境界線が 800 ピクセル内で実行されることを意味します。設定されているコンテンツボックス コンテンツボックスの幅は770で描画されます。
box-sizing 属性を変更しない後のボックスの幅は 800px;
この box-sizing 属性により、フロントエンド開発プロセス中にページ レイアウトが非常にすっきりとシンプルになります。
以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
CSS 属性のボックス サイズに関するその他の記事については、PHP 中国語 Web サイトに注目してください。