3 列レイアウトの n 個の実装-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

3 列レイアウトの n 個の実装

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 16, 2016 am 08:39 AM

この記事では主に、左右のサイドバーが固定幅で、中央の列が残りのスペースを埋めるレイアウトについて説明します。他のタイプについては、基本的には半斤と 8 オンスです。各レイアウトにはデモが含まれますが、記事に掲載されているコードはデモほど直接的ではないと思います。したがって、本文で説明を担当し、ソースコードは Demo にあります。ここでは、次の理由から非常に多くの種類のレイアウト (6) が説明されています。 1 各レイアウトにも欠点があり、完璧なレイアウトは存在せず、すべてのレイアウトに独自のものがあります。使用中です。 2 比較的優れた解決策もありますが、それほど優れていない解決策の中にも有用なものがあり、不足している知識点を補うために他のアイデアを刺激する可能性があります。

絶対配置機能を使用する: 左列と右列は絶対配置を使用してドキュメントフローを分離し、それぞれページの左側と右側に固定されます。中央の列は開くことで収容できます。左と右の margin 値左と右のサイドバー間の距離。これは非常に簡単で、ほとんど説明は必要ありません。デモ:http://www.dabao.love/demo/layoutDemo/absoluteLayout.html
ドキュメントフローを占有しないように両側でフローティングを使用します: 左の列は左にフロート、右の列は右にフロートし、左右のマージン値は中央の列の幅は、左右の列の幅と同じです。 html では、中央の列を左側と右側の列の後ろに配置する必要があります。この原理は絶対配置と似ています。つまり、ドキュメントフローを占有せず、他の要素が埋め込まれます。重ならないように両側にスペースを残すだけです。デモ: http://www.dabao.love/demo/layoutDemo/twoSidesFloatLayoutDemo.html
浮動マージン値と負のマージン値の特性を使用する: ラベルの順序は中幅 100%、サブ左右のマージンは左右の列用のスペースを残します、のうち、 sub 要素をフローティングにしないでください。そうしないと、コンテンツが内側にラップされ、他のすべての要素が左にフローティングされます。左のマージン左は -100%、右のマージン左はサブの負のマージン右です。フローティングの特徴は、前の要素に続き、収まりきらない場合は改行することです。本来、midle 要素は最初の行と、sub の余白のスペースを占めます。要素は他の浮動要素ではありません。左列は 2 行目の左端の位置に強制的に折り返されます。これは、100% とすると、最初の行が最初の行の左端になります。このとき、左の列は sub 要素の左端のスペースと一致します。このとき、右の列は左の列の元の位置にあり、同様の処理方法を使用して最終的な効果を実現します。同じ原理と効果で、sub のマージンをパディングに置き換えることができます。ここのスペースを埋める必要がない場合 (サブ要素を埋めるコンテンツがある場合)、親要素 (つまり、中央) は必要ありません。デモ: http://www.dabao.love/demo/layoutDemo/floatLayoutDemo.html

インラインブロック機能の使用 : 親要素には左、中央、右の列が含まれます: (子要素は左、右の順) 親要素は、左と右のスペースを残すようにパディングを設定します。右の列の場合、中央の列の幅は 100% になります。パディング以外のスペースを占有し、独自の幅の負の値に等しい margin-left を使用して、左右の列を中央の列の右端と一致させます。次に左を調整します。左列の左は -100%、右列の左は右列の幅です。左、中、右の列はすべて子要素であるため、margin-left はパディングスペースを占有することができません。目的の状態を達成するには、左側と右側の列を相対的に配置し、左側の値を調整する必要があります。親要素は font-size: 0; Letter-spacing: -4px; を設定し、子要素はこれら 2 つの属性をリセットすることに注意してください。デモ: http://www.dabao.love/demo/layoutDemo/inlineBlockLayoutDemo.html calc 属性と inline-b
ck 機能を使用します : (親要素には左、中、右の列も含まれます)

🎜> 文字間隔: -4px; 左、中央、右の列をリセットします: font-size: 16px; 文字間隔:normal;

HTML の要素の順序は、左、中央、右の順に固定されています。

の幅は 300 ピクセルです。

中央ブロック: width:calc(100% - 300px);

パーセントおよび固定幅の混合レイアウトが使用されます。ie9+ をサポートします。+-＊/ 記号の両側にスペースがあることに注意してください

デモ: http://www.dabao.love/demo/layoutDemo/useCalcLayoutDemo.html

フレックスレイアウトを使用する: フレックスレイアウトは最も高度で便利なレイアウトだと思います。残念ながら、ie10+。早速、Ruanyifeng 先生のチュートリアルをお勧めします: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 親要素の表示: flex; 、左右の列は flex-basis のプリセット幅を設定し、中央の列は flex-grow: 1; 自動的に伸縮します。完全な人生。デモ: http://www.dabao.love/demo/layoutDemo/flexLayoutDemo.html

間違いがある場合は、私を批判して修正してください。間違いがない場合は、私を批判してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。