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 失敗コンテナ回避ガイド
推薦する
よく知られているブラウザのDOCTYPEモード選択メカニズム
ドキュメントの範囲この記事では、Firefox やその他の Gecko ベースのブラウザ、Safar...
Facebook によるインターネット サービスのほぼ完璧な再設計
<br />出典: http://www.a-xuan.cn/?p=197 先ほどFac...
Linux の grep コマンドと egrep コマンドの詳細な説明
反復/egrep構文: grep [-cinvABC] 'word' ファイル名-c...
Mysql 日付クエリの詳細な紹介
現在の日付を照会する CURRENT_DATE() を選択します。 CURDATE() を選択する;...
Firefox または IE でスパン幅が決定されない場合の解決策
コードをコピーコードは次のとおりです。 <html xmlns="http://ww...
HTML の小さなタグの使用に関するヒント
<em></em> などのフレーズ要素を使用すると、意図した視覚スタイルを維...
HTMLウェブページテーブル構造化マークアップの応用に関する簡単な説明
Web テーブルの構造マークアップについて説明する前に、いくつかの画像を見てみましょう。 HTML ...
HTMLは角丸四角形を簡単に実装します
質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...
今日、私は非常に奇妙なクリックの問題に遭遇し、自分で解決しました
...こんな感じで、今日はポップアップウィンドウを作ろうと思ったのですが、バックエンド PHP によ...
backgroundImage を使用して画像カルーセルの切り替えを解決する詳細な説明
単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...
JavaScript 即時実行関数の使用状況分析
一般的に、関数は実行する前に呼び出す必要があることはご存じのとおりです。以下に示すように、関数を定義...
WeChatミニプログラムビデオ集中砲火位置ランダム
この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...
MySQL の同時実行性の問題と解決策の分析
目次1. 背景2. テーブルロックによるクエリの遅延3. オンラインでテーブル構造を変更するとどのよ...
VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)
Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...
初心者向けウェブサイト構築チュートリアルの概要
これら 6 つの記事を書いた後、私は少し混乱し始めました。次にどこに書けばいいのか分かりません。ドメ...