cssプロパティボックスのサイズ変更
この記事では主に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 サイトに注目してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7321
9
1625
14
1349
46
1261
25
1209
29
Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する
Mar 07, 2025 am 11:33 AM
このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。
WordPressブロックと要素にボックスシャドウを追加します
Mar 09, 2025 pm 12:53 PM
CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。
スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティス
Mar 08, 2025 am 09:45 AM
これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で
満足している属性を持つインラインテキストエディターを作成します
Mar 02, 2025 am 09:03 AM
インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。 エディターの作成 このエディターを構築するには、コンテンツを動的に変更する必要があります
最初のカスタムSvelteトランジションを作成します
Mar 15, 2025 am 11:08 AM
Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。
GraphQLキャッシングの使用
Mar 19, 2025 am 09:36 AM
最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または
node.jsとexpressのMulterを使用してファイルアップロードします
Mar 02, 2025 am 09:15 AM
このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。 単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。 まず、プロジェックをセットアップします
5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する
Mar 04, 2025 am 10:22 AM
この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム
