css学習小記(二)--論理レイアウト
2607 ワード
論理レイアウト
1.フローティング要素:float属性、フローティング、その名の通り、ページの上にフローティングすることを指すべきで、その1つの特性は1つのページ要素の上にフローティングすることができて、あるいは重なることができます.
float:left/right/none;
clearプロパティ:left/right/both/none;
clearは既存のfloat属性に基づいて構築され、floatがfloat:leftと宣言された場合.を選択すると、浮動要素の右側(または周囲)にテキストが回ります.clear:leftを宣言すると、要素はフローティング要素の下、すなわち別の行に移動します.あるいは、その役割は別の行ですが、効果を生成するにはclear宣言がfloat宣言と一致する必要があります.
フローティングで発生する問題:コンテナは段落の後に終了し、テキストよりも高い画像を含むように拡張されません.2つの解決方法:
1.容器のpadding-bottom:15 pxを設定.(適切な値でよい)
2.方法1よりも柔軟なスペーサ層を追加し、下部段落以外の部分に適用でき、多層フローティングに有効です.
タイトルはブロック要素で、その後の内容はデフォルトで別の行になります.
2.位置決め
ドキュメントには通常の要素フローがあり、一般的には左から右のフォーマットです.タイトルに出会って、別の行に進みます.
静止位置:要素をデフォルトの形式で配置します.
絶対位置:ページとともにスクロールします.(段落が変わります)
固定位置:ページとともにスクロールせず、ブラウザウィンドウに対して位置が変わりません.(犬を捜すブラウザでは正常に使えないのに、なぜIEも効果がないのですか?360ブラウザでも効果がなくoperaが効果を生むことができます)
相対位置:相対的にデフォルトのブラウザが配置する位置(段落は変化しません)
属性値:position/top/left/bottom/right
position:static absolute fixed relative;
3.レイアウト
流体レイアウト(Fluid Layout):ブラウザ全体を満たすために幅を拡張または圧縮します.
フレックスレイアウト:フレックスレイアウトでは、幅が固定されておらず、ピクセル、em、またはパーセントで最小幅と最大幅を設定して、レイアウトが一定幅に達した後にスケールを停止することを保証できます.この方法の最大の利点は、テキストのサイズを再設定し、レイアウト全体をスケールすることです.
(おすすめ:www.alistapart.com/articles/elastic/)
可変固定幅:レイアウトを自動的に変更して、ユーザーウィンドウのサイズに最適なレイアウト効果を提供します.(おすすめ読書:www.clagnut.com/blog/1663)
4.ラベルの命名
推荐阅读:Andy Clarke《what's in a Name》www.stuffandnonsense.co.uk/archives/whats_in_a_name.html
5.流体フローティングの2列レイアウト
ヘッダー、フッター、メイン列、およびエッジバーが含まれます.
6.外付けスペースでレイアウト
7.異なるブラウザが設定した列幅の解釈が異なることによるレイアウトの違いを処理するために使用されるボックスモデル(hack).主にie 5とIE 5を対象とする.5のです.
実際には、枠線、内側余白、外側余白の幅を考慮して列幅を設定します.任意の標準互換性のあるブラウザでは、他の要素を含む要素の合計幅の計算は、これらのコンテナの幅とpaddingとborderを組み合わせて考慮する必要があります.すなわち、300画素幅の容器の実際の総幅は、300画素にpaddingとborderを加えたものである.
具体的には、css宣言にいくつかの調整構文を加えて、ブラウザがこの宣言がこのセレクタの宣言を書き換えると勘違いし、最後に、応答するブラウザに正しい幅宣言を設定する.(www.tantek.com)
8.固定幅レイアウト
htmlでのブロック(div)の宣言順序は、レイアウトにも影響します.特にフローティングレイアウト.
9.デザインについては、他人が与えることができるのはインスピレーションと啓発だけで、硬いままで、自分を限界に限定するだけです.
10.タイトル要素で画像を使用するのは、比較的一般的な方法![]()
11.フッター
フッターは、著作権情報、アクセス性、確認情報など、いくつかの情報を表示するために使用されます.また、連絡の詳細や会社の法律情報でもあります.また、ナビゲーション・アイテムの追加の説明をカスタマイズすることもできます.アーカイブ・記事にリンクするリンクも含まれます.また、推奨や音楽、著者や会社の紹介も含まれます.
12レイアウト方法、boxモデルを使って、全体のレイアウトを描き出して、一歩一歩細部を完備します.
1.フローティング要素:float属性、フローティング、その名の通り、ページの上にフローティングすることを指すべきで、その1つの特性は1つのページ要素の上にフローティングすることができて、あるいは重なることができます.
float:left/right/none;
clearプロパティ:left/right/both/none;
clearは既存のfloat属性に基づいて構築され、floatがfloat:leftと宣言された場合.を選択すると、浮動要素の右側(または周囲)にテキストが回ります.clear:leftを宣言すると、要素はフローティング要素の下、すなわち別の行に移動します.あるいは、その役割は別の行ですが、効果を生成するにはclear宣言がfloat宣言と一致する必要があります.
フローティングで発生する問題:コンテナは段落の後に終了し、テキストよりも高い画像を含むように拡張されません.2つの解決方法:
1.容器のpadding-bottom:15 pxを設定.(適切な値でよい)
2.方法1よりも柔軟なスペーサ層を追加し、下部段落以外の部分に適用でき、多層フローティングに有効です.
.space{
clear:left;( )
} タイトルはブロック要素で、その後の内容はデフォルトで別の行になります.
2.位置決め
ドキュメントには通常の要素フローがあり、一般的には左から右のフォーマットです.タイトルに出会って、別の行に進みます.
静止位置:要素をデフォルトの形式で配置します.
絶対位置:ページとともにスクロールします.(段落が変わります)
固定位置:ページとともにスクロールせず、ブラウザウィンドウに対して位置が変わりません.(犬を捜すブラウザでは正常に使えないのに、なぜIEも効果がないのですか?360ブラウザでも効果がなくoperaが効果を生むことができます)
相対位置:相対的にデフォルトのブラウザが配置する位置(段落は変化しません)
属性値:position/top/left/bottom/right
position:static absolute fixed relative;
3.レイアウト
流体レイアウト(Fluid Layout):ブラウザ全体を満たすために幅を拡張または圧縮します.
フレックスレイアウト:フレックスレイアウトでは、幅が固定されておらず、ピクセル、em、またはパーセントで最小幅と最大幅を設定して、レイアウトが一定幅に達した後にスケールを停止することを保証できます.この方法の最大の利点は、テキストのサイズを再設定し、レイアウト全体をスケールすることです.
(おすすめ:www.alistapart.com/articles/elastic/)
可変固定幅:レイアウトを自動的に変更して、ユーザーウィンドウのサイズに最適なレイアウト効果を提供します.(おすすめ読書:www.clagnut.com/blog/1663)
4.ラベルの命名
推荐阅读:Andy Clarke《what's in a Name》www.stuffandnonsense.co.uk/archives/whats_in_a_name.html
5.流体フローティングの2列レイアウト
ヘッダー、フッター、メイン列、およびエッジバーが含まれます.
6.外付けスペースでレイアウト
7.異なるブラウザが設定した列幅の解釈が異なることによるレイアウトの違いを処理するために使用されるボックスモデル(hack).主にie 5とIE 5を対象とする.5のです.
実際には、枠線、内側余白、外側余白の幅を考慮して列幅を設定します.任意の標準互換性のあるブラウザでは、他の要素を含む要素の合計幅の計算は、これらのコンテナの幅とpaddingとborderを組み合わせて考慮する必要があります.すなわち、300画素幅の容器の実際の総幅は、300画素にpaddingとborderを加えたものである.
具体的には、css宣言にいくつかの調整構文を加えて、ブラウザがこの宣言がこのセレクタの宣言を書き換えると勘違いし、最後に、応答するブラウザに正しい幅宣言を設定する.(www.tantek.com)
8.固定幅レイアウト
htmlでのブロック(div)の宣言順序は、レイアウトにも影響します.特にフローティングレイアウト.
9.デザインについては、他人が与えることができるのはインスピレーションと啓発だけで、硬いままで、自分を限界に限定するだけです.
10.タイトル要素で画像を使用するのは、比較的一般的な方法
11.フッター
フッターは、著作権情報、アクセス性、確認情報など、いくつかの情報を表示するために使用されます.また、連絡の詳細や会社の法律情報でもあります.また、ナビゲーション・アイテムの追加の説明をカスタマイズすることもできます.アーカイブ・記事にリンクするリンクも含まれます.また、推奨や音楽、著者や会社の紹介も含まれます.
12レイアウト方法、boxモデルを使って、全体のレイアウトを描き出して、一歩一歩細部を完備します.