CSS を使用して正方形の div を実装する 2 つの方法
|
目標: 辺の長さが等しい正方形を作成する 方法 1: 単位 vw を使用する (ps これが最も簡単な方法だと思います) HTML構造も非常にシンプルで、divは1つだけです。
<html>
<本文>
<div class="square">
</div>
</本文>
</html>
。四角{
幅：50vw;
高さ：50vw;
背景: 青;
}方法2: padding-bottomを使用する 要点: 1. 高さ: 0、コンテンツはパディングにオーバーフローしますが、心配しないでください~~ 2. padding-bottom の値がパーセンテージとして設定されている場合、その値は包含ブロックの幅を基準とします。 3. 包含ブロックを設定する必要がある HTML構造:
<html>
<本文>
<div class="コンテナ">
<div class="square">
</div>
</div>
</本文>
</html>css:
*{
マージン: 0;
}
/* ページの表示領域を埋めるように設定 */
。容器{
高さ：100vh;
幅：100vw;
背景：淡いゴールデンロッド;
}
。四角{
width: 50%; /* コンテナの幅に対する相対値 */
padding-bottom: 50%; /* コンテナの幅に対する相対値 */
背景：淡い緑;
}それだけです、2つあれば十分です。marginも使えますが、崩れる恐れがあるので、この2つで十分です〜〜 要約する 上記は、CSS を使用して正方形の div を実現するために私が紹介した 2 つの方法です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。 |
<<: Docker の win ping 失敗コンテナ回避ガイド
推薦する
HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
Docker ベースの Tomcat クラスタと Nginx ロード バランシングの展開の概要
目次前面に書かれた1. Ngixnイメージの作成2. Java Web (Tomcat) アプリケー...
Vueの監視方法のケースの詳細な説明
Vueでの監視方法時計知らせ名前: 監視する属性に同じ名前を付ける必要があります。 1. 機能Vue...
Vue 開発ツリー構造コンポーネント (コンポーネント再帰)
この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は...
MYSQL での Truncate の使用法の詳細な説明
この記事のガイド: テーブル内のデータを削除するには、削除と切り捨ての 2 つの方法があります。TR...
JavaScript における BOM と DOM の詳細な説明
目次BOM (ブラウザ オブジェクト モデル) 1. ウィンドウブラウザのウィンドウサイズを取得する...
MySQL の大きなテーブルで大量のデータを一括削除する方法
質問はhttps://www.zhihu.com/question/440066129/answer...
Dockerに関するよくある質問
Docker はポートを IPv6 にのみマッピングし、IPv4 にはマッピングしません。 dock...
ウェブサイトのデザインでは色の階層感覚に注意を払う必要があります
最近、私はデザインには階層感覚が必要だと言っています。この階層感覚には、色の重ね合わせや要素の重ね合...
docker 環境でのデータベース バックアップ (postgresql、mysql) のサンプル コード
目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...
VMware Workstationはデバイス/資格情報ガードと互換性がありません
仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...
MySQLでページングクエリを実装する方法
SQL ページング クエリ:背景会社のシステムには、構成管理用のプラットフォーム、いわゆる CRUD...
IE と FF でスペースの幅を同じにするにはどうすればよいですか?
body{font-size:12px; font-family:"宋体";}...
SSL で Nginx リバース プロキシを構成する簡単な手順
序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...
JavaScript イベント キャプチャ バブリングとキャプチャの詳細
目次1. イベントの流れ1. コンセプト2. DOMイベントフロー2. イベントの委任1. イベント...