この記事では主に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 サイトに注目してください。
Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AMReact Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、
バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AMバックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、
ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AMRequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう
ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AMおそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...
Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです
毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。
ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
Dreamweaver Mac版
ビジュアル Web 開発ツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
