div の幅が width:100% に設定されていて、パディングまたはマージンが親要素を超えてしまう問題の解決方法
|
序文 この記事では、div の幅を 100% に設定し、親要素を超えてパディングまたはマージンを設定するという問題を解決するために、新しい CSS3 属性 box-sizing を使用する方法を紹介します。困っている方は参考にしてください。 文法 ボックスのサイズ設定: コンテンツボックス|ボーダーボックス|継承; 値 1、コンテンツボックス これは CSS2.1 で規定されている幅と高さの動作です。 幅と高さはそれぞれ要素のコンテンツ ボックスに適用されます。 要素の幅と高さに加えて、パディングと境界線が描画されます。 値 2、境界ボックス 要素に指定された幅と高さによって、要素の境界ボックスが決まります。 つまり、要素に指定されたパディングと境界線は、指定された幅と高さの範囲内で描画されます。 コンテンツの幅と高さは、設定された幅と高さからそれぞれ境界線とパディングを減算することによって取得されます。 価値3: 継承 box-sizing プロパティの値を親要素から継承することを指定します。 例 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
div.コンテナ
{
幅:100%;
境界線:1em実線;
パディング:15px;
ボックスのサイズ:境界線ボックス;
}
div.ボックス
{
ボックスのサイズ:境界線ボックス;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
幅:100%;
border:1em 赤一色;
フロート:左;
パディング:15px;
}
</スタイル>
</head>
<本文>
<div class="コンテナ">
<div class="box">この div は左半分を占めます。 </div>
</div>
</本文>
</html>要約する 上記がこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してコミュニケーションを取ることができます。 |
<<: JS ベースのページフローティングボックスを実装するためのサンプルコード
>>: ページにスクロールバーが表示されたときに、スクロールバーがページ幅に影響しないようにする方法
![MySQL コード実行構造例の分析 [シーケンス、分岐、ループ構造]](/upload/images/67cad60de7a9d.webp)
推薦する
Vueキャッシュ機能の使い方
目次vue2のキャッシュ機能Vue キャッシュ関数の変換最適化要約するvue2のキャッシュ機能vue...
Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。
1. 分離マーカーを追加します。 ip netns add fd 2. 指定されたネットワーク カ...
JSはキャンバス技術を使用してeChartsの棒グラフを模倣します
Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...
DockerHubを自分で構築する方法
先ほど使用したDocker HubはDockerによって提供されています。独自のDockerを構築す...
jQuery タグセレクターの適用例の詳細な説明
この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...
Linux で圧縮ファイルの内容を表示する 10 の方法 (要約)
一般的に、アーカイブされたファイルや圧縮されたファイルの内容を表示するには、まず解凍してから表示する...
PXEを使用してCentOS7.6を自動的にインストールする方法の詳細なチュートリアル
1. 需要ベースには 300 台の新しいサーバーがあり、CentOS7.6 オペレーティング システ...
HTMLポップアップ透明レイヤーインスタンスのサイズを設定でき、比例することができます
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
Node.js でのブレークポイント再開の実装
序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...
jQuery は、画像を切り替えるための左ボタンと右ボタンのクリックを実装します。
この記事では、左ボタンと右ボタンをクリックすることで画像を切り替えるjQueryの具体的なコードを例...
MySQL ストアド プロシージャと共通関数のコード分析
mysql ストアド プロシージャの概念:特定のタスク (クエリと更新) を実行できる、データベース...
CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード
この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...
HTMLはテキスト行のインターセプトの実装原理とコードを超えています
複数行を超えるテキストをインターセプトするための HTML コードは次のとおりです。 HTML:コー...
CSSを使用してダークモードとブライトモードを切り替える
Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...
MySQL で中国語を入力するときに発生するエラー 1366 の解決方法
MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...