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 ベースのページフローティングボックスを実装するためのサンプルコード
>>: ページにスクロールバーが表示されたときに、スクロールバーがページ幅に影響しないようにする方法
推薦する
jsはポップアップウィンドウをクリックすることでポップアップログインボックスを実装します
この記事では、ポップアップウィンドウをクリックしたときにポップアップログインボックスを実現するための...
JSは文字列内の指定された文字列のn番目の出現位置を取得します
文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...
要素シャトルフレームのパフォーマンス最適化の実装
目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...
JS は複数のタブを切り替えるカルーセルを実装します
カルーセルアニメーションは、ページの外観とインタラクティブなパフォーマンスを向上させることができます...
Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明
目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...
mysql 5.7.5 m15 winx64.zip インストール チュートリアル
win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...
WeChatアプレットは写真アップロード機能を実現
この記事の例では、WeChatアプレットで写真をアップロードするための具体的なコードを参考までに共有...
mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル
mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...
フロントエンドの面接の質問の最も包括的なコレクション
HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小...
ズームインとズームアウトの閉じるボタンを実現する CSS (サンプル コード)
この効果はブラウザ ページで最もよく見られます。まずは効果の画像をご覧ください。 上の図に示すように...
ウェブデザインと制作に関する科学的原則と提案の要約
<br />ネットワーク設計の分野では、アイトラッキングに関する研究が非常に盛んに行われ...
MySQLデータベースの基礎知識と操作のまとめ
この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...
Vue+tsx のスロット使用の問題が置き換えられない
目次序文問題を見つける解決する追記序文最近、 UIコンポーネントを作成する予定で、 vue 2.xと...
Flash が HTML div 要素を覆わないようにする方法
今日、フラッシュ広告のコードを書いていたとき、フラッシュに付属するリンクはポップアップ広告と間違われ...
KVM ベースの SRIOV パススルー構成とパフォーマンス テストの詳細な説明
SRIOVの導入、VFパススルー構成、パケット転送速度性能テスト目次1. SRIOVの紹介2. 環境...