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 ベースのページフローティングボックスを実装するためのサンプルコード
>>: ページにスクロールバーが表示されたときに、スクロールバーがページ幅に影響しないようにする方法
推薦する
EChartsマウスイベント処理方法の詳細な説明
イベントとは、クリック、マウスオーバー、ページの読み込み後にトリガーされる読み込みイベントなど、ユー...
Linux ファイル操作でよく使われるコマンドのまとめ
0. 新しい操作: mkdir abc #新しいフォルダを作成 touch abc.sh #新しいフ...
ホスト上のDockerコンテナ内でシェルまたはプログラムを実行する
Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...
MySQL における制限関数と合計関数の混在使用の問題の詳細な説明
序文今日、注文データを同期した後、同僚は、合計注文金額とデータソースの合計金額に差があったため、LI...
ウェブレッスンプラン、初心者向けレッスンプラン
指導トピックウェブページ適用グレード高校2年生授業時間1 クラス教科書分析焦点: 静的および動的ウェ...
MySQLデータベースに他のIPアドレスからアクセスできない問題の解決策
序文先ほどのプロジェクトを参考にすると、環境は整いました。プロジェクトの準備と検証の段階で、問題が発...
MySQL に絵文字を保存するときに表示されるエラー メッセージ「java.sql.SQLException: 文字列値が正しくありません:'\xF0\x9F\x92\xA9\x0D\x0A...'」の解決方法
序文この記事では主に、MySQL ストレージ テーブル エラー「java.sql.SQLExcept...
MySQLトリガーの簡単な使用例
この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...
MySQL NULLがピットを引き起こした
比較演算子でNULLを使用する mysql> 1>NULLを選択します。 +------...
Mysql SQL ステートメント演習 (50 問)
テーブル名とフィールド–1. 学生リスト学生 (s_id、s_name、s_birth、s_sex)...
MySQL 集計関数のネストされた使用操作
目的: MySQL 集計関数のネストされた使用集計関数は直接ネストできません。例: max(coun...
HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)
この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...
24 の実用的な JavaScript 開発のヒント
目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...
Vue で計算プロパティを使用する際の知識ポイントのまとめ
計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...
React 星評価コンポーネントの実装
要件は、製品の評価データを渡すことであり、ページには対応する星の数が表示されます。 1. 異なる評価...