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全文検索の使用例
目次1. 環境整備2. データの準備3. ショーを始める4. 単語分割エンジン要約する参考文献1. ...
MySQL エラー コード 1064 の解決策
SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...
mysql の追加、削除、変更、クエリの基本ステートメント
文法以下は、MySQL テーブルにデータを挿入するための INSERT INTO コマンドの一般的な...
Dockerを使用してサーバー上で複数のPHPバージョンを実行する
PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...
CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法
1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...
最小限のルートファイルシステムを構築するためにbusyboxを移植するための詳細な手順
Busybox: 小さなコマンドが詰まったスイスアーミーナイフ。ステップ1: ディレクトリ構造を作成...
Dockerでmongodbデータベースを使用するための実装コード
mongoイメージを取得する sudo docker pull mongo mongodbサービスを...
ファイルのアップロードの進行状況を示す React の例
目次React アップロードファイル表示の進行状況デモフロントエンドにReactアプリケーションを素...
Linux の daily_routine サンプルコードの詳細な説明
まずサンプルコードを見てみましょう: #/bin/bash cal 日付 -u echo "...
JavaScript - Vue でのスロットの使用: スロット
目次Vue でのスロットの使用: slotスコープ付きスロット: テンプレートタグで囲む要約するVu...
チェックボックスとラジオボタンの配置を実装する方法
ブラウザによって動作が異なるだけでなく、フォントやテキスト サイズによっても動作が異なります。フォー...
反応ループデータの実装（リスト）
まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...
ウェブページの画像最適化ツールと使用方法のヒントの共有
ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...
MySQL スライディングオーダー問題の原理と解決の例分析
この記事では、例を使用して、MySQL スライディング順序問題の原理と解決方法を説明します。ご参考ま...
RGBA の「a」は何を意味するのでしょうか? CSS RGBA カラー ガイド
RGBAは色の値と透明度を設定できるCSSカラーです以下は、rgba() を使用して白色を 50% ...