DIV+CSSまとめ
6967 ワード
この博文を书くのは主に伝智播客の中から学んだDIV+CSSの技巧を分かち合うためで、同时に同じくはっきり覚えていない时に调べやすくて、完全に菜鸟の1匹で、间违った地方が私に指摘することができることを望みます
継承:
1.ラベルに独自の属性がある場合は、自分の属性を使用します.そうでない場合は、次のように上司から継承されます.
2.margin,padding,height,widthなど距離に関する属性は継承されません
3.テキスト関連属性は継承される:font-size,font-family,line-height,text-indexなど
4.リスト関連属性は継承する:list-style-typeなど5.カラー関連属性は継承されています:color 6:button,input,select,textareaはIEの下でbody属性を継承しないので、単独で書く必要があります
テクニック:
CSSを書くときの最初のステップは、body,ul,li,div,table,h 1,p{margin:0;padding:0;
ul,li,olの2つのラベルは互換性の問題が発生しやすいので、ul,li,ol{margin:0 px;padding:0 px;list-style:none;
border-color:この属性はborder:1 pxで使用する必要があります.このような太い属性を定義してから、否定者は役に立たない.
内容や他の要素を本当に中心にしたいときは左右のmargin:固定しない値20 auto;
分割線を作るときはhrではなくdivのborder属性で各エッジの幅を制御できます
divのコンテンツを水平に中央に位置させるにはtext-alginを使用し、垂直に中央に位置させるにはdivのheigth=100 pxなどの行の高さline-heightをdivの高さに等しく設定します.では、line-height:100 pxを設定します.
background-image背景画像の添付方法:fixed(固定)の意味は、ラベルの上ではなくスクリーン(可視領域)に固定することです.
background-attachment:fixedはie 6の上で互換性の問題が存在して、もし効果を実現するならば、1つの方法だけが解決することができて、それはそれを支持する2つのラベルの中で書いて、1つはhtmlで、2つ目はbodyラベルで、基本的に他の方法はありません
cssスプライトを使用するとhttpのサーバへの要求を低減し、アクセスを高速化できます.
デフォルトはmarginとborder属性があり、input全体をクリアしても役に立たず、単独でmargin:0 pxを書く必要があります.border:0px;よりよい
IE 6では、親エレメントの中の子エレメントの高さが親エレメントが設定した高さを超えると、親エレメントの高さは、子エレメントの高さと同じになります
float(フローティング)は、divなどのブロック要素に相当します.つまり、ドキュメントストリームから離れると、下の内容が上に移動します.下のブロックが移動すると上が占有されていることに気づき、移動したばかりの要素が右側に表示されます.
DIVなどの複数のブロック要素を同じ行に表示する場合は、左の要素ではなく同じ方向にフローティングを設定し、右の要素を右にフローティングを設定すると、異なるブラウザとの互換性が向上します.
divを書くたびに幅値を付けなければなりません.そうしないと100%幅になります.
1つのブロックをフローティング(float)プロパティに設定すると、このブロックに関連するmargin,padding,text-alginなどの距離に関連するプロパティがまだ機能しているかどうかを再確認し、特にautoに設定された値は基本的に役に立たない.
1行に複数のフローティングブロックがある場合は、これらのフローティングブロックをすべて大きなブロック(div)に配置する必要があります.また、この大きなブロックには幅を加えなければ、より強い互換性が得られません.
親要素が自分の高さを持っていない場合、親要素の子要素(どのように言えば?中の要素)に浮動属性がある場合、親要素の高さ酒は自分で増加しません(親要素の高さは子要素に適応しません)ieの効果も異なり、テスト効果は以下の通りです.
上記の問題が発生した場合、解決方法は以下のとおりです.
方法1:
w 3 cの提案:親要素の中で、つまり親要素の中の最後のブロック(div)の中に空のdivを加えて、このdivはフローティングをクリアする属性を持っていて、唯一の悪いところは何の機能もないdivを加えてコード量を増加しました;
コードを次のように変更します.
方法2:親要素に:overflow:hiddenを加える.コード入力:
方法2は最も推奨される方法であるが,サブ要素に位置決めレイアウトが現れた場合,方法2は無効となり,その場合は方法1を用いる.
絶対位置を使用する必要がある場合は、2つの条件を満たす必要があります.1つが必要です.Noブラウザの互換性の問題:
(1).親要素には独自の位置決めプロパティが必要です.position:relativeを使用することをお勧めします.
(2)..サブエレメントには独自の絶対位置決めプロパティが必要です.position:absolute;同時に方向プロパティを使用します.
継承:
1.ラベルに独自の属性がある場合は、自分の属性を使用します.そうでない場合は、次のように上司から継承されます.
<style>
body{
font-size:20px;
color:red;
}
</style>
<body>
<ul>
<li>
</li>
</ul>
<h1> ， </h1>
</body>2.margin,padding,height,widthなど距離に関する属性は継承されません
3.テキスト関連属性は継承される:font-size,font-family,line-height,text-indexなど
4.リスト関連属性は継承する:list-style-typeなど5.カラー関連属性は継承されています:color 6:button,input,select,textareaはIEの下でbody属性を継承しないので、単独で書く必要があります
テクニック:
CSSを書くときの最初のステップは、body,ul,li,div,table,h 1,p{margin:0;padding:0;
ul,li,olの2つのラベルは互換性の問題が発生しやすいので、ul,li,ol{margin:0 px;padding:0 px;list-style:none;
border-color:この属性はborder:1 pxで使用する必要があります.このような太い属性を定義してから、否定者は役に立たない.
内容や他の要素を本当に中心にしたいときは左右のmargin:固定しない値20 auto;
分割線を作るときはhrではなくdivのborder属性で各エッジの幅を制御できます
divのコンテンツを水平に中央に位置させるにはtext-alginを使用し、垂直に中央に位置させるにはdivのheigth=100 pxなどの行の高さline-heightをdivの高さに等しく設定します.では、line-height:100 pxを設定します.
background-image背景画像の添付方法:fixed(固定)の意味は、ラベルの上ではなくスクリーン(可視領域)に固定することです.
background-attachment:fixedはie 6の上で互換性の問題が存在して、もし効果を実現するならば、1つの方法だけが解決することができて、それはそれを支持する2つのラベルの中で書いて、1つはhtmlで、2つ目はbodyラベルで、基本的に他の方法はありません
cssスプライトを使用するとhttpのサーバへの要求を低減し、アクセスを高速化できます.
デフォルトはmarginとborder属性があり、input全体をクリアしても役に立たず、単独でmargin:0 pxを書く必要があります.border:0px;よりよい
IE 6では、親エレメントの中の子エレメントの高さが親エレメントが設定した高さを超えると、親エレメントの高さは、子エレメントの高さと同じになります
float(フローティング)は、divなどのブロック要素に相当します.つまり、ドキュメントストリームから離れると、下の内容が上に移動します.下のブロックが移動すると上が占有されていることに気づき、移動したばかりの要素が右側に表示されます.
DIVなどの複数のブロック要素を同じ行に表示する場合は、左の要素ではなく同じ方向にフローティングを設定し、右の要素を右にフローティングを設定すると、異なるブラウザとの互換性が向上します.
divを書くたびに幅値を付けなければなりません.そうしないと100%幅になります.
1つのブロックをフローティング(float)プロパティに設定すると、このブロックに関連するmargin,padding,text-alginなどの距離に関連するプロパティがまだ機能しているかどうかを再確認し、特にautoに設定された値は基本的に役に立たない.
1行に複数のフローティングブロックがある場合は、これらのフローティングブロックをすべて大きなブロック(div)に配置する必要があります.また、この大きなブロックには幅を加えなければ、より強い互換性が得られません.
親要素が自分の高さを持っていない場合、親要素の子要素(どのように言えば?中の要素)に浮動属性がある場合、親要素の高さ酒は自分で増加しません(親要素の高さは子要素に適応しません)ieの効果も異なり、テスト効果は以下の通りです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
body,div{
margin:0px;
padding:0px;
}
#header{
height:100px;
width:960px;
background:#036;
margin:0px auto;
}
#main{
width:960px;
height:500px;/* ： ， （ ？） ， ( )************* ， , border */
background:#906;
margin:0px auto;
}
#left{
width:360px;
height:500px;
background:red;
float:left;
}
#right{
width:400px;
height:500px;
background:green;
float:left;
}
#footer{
height:50px;
width:960px;
background:yellow;
clear:both;
margin:0px auto 0px;;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
上記の問題が発生した場合、解決方法は以下のとおりです.
方法1:
w 3 cの提案:親要素の中で、つまり親要素の中の最後のブロック(div)の中に空のdivを加えて、このdivはフローティングをクリアする属性を持っていて、唯一の悪いところは何の機能もないdivを加えてコード量を増加しました;
コードを次のように変更します.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
body,div{
margin:0px;
padding:0px;
}
#header{
height:100px;
width:960px;
background:#036;
margin:0px auto;
}
#main{
width:960px;
/*height:500px; ： ， （ ？） ， ( )************* ， , border */
background:#906;
margin:0px auto;
}
#left{
width:360px;
height:500px;
background:red;
float:left;
}
#right{
width:400px;
height:500px;
background:green;
float:left;
}
#footer{
height:50px;
width:960px;
background:yellow;
clear:both;
margin:0px auto 0px;;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
<div style="clear:both;"></div> <!-- div-->
</div>
<div id="footer">
</div>
</body>
</html>
方法2:親要素に:overflow:hiddenを加える.コード入力:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
body,div{
margin:0px;
padding:0px;
}
#header{
height:100px;
width:960px;
background:#036;
margin:0px auto;
}
#main{
width:960px;
/*height:500px; ： ， （ ？） ， ( )************* ， , border */
background:#906;
margin:0px auto;
overflow:hidden;
}
#left{
width:360px;
height:500px;
background:red;
float:left;
}
#right{
width:400px;
height:500px;
background:green;
float:left;
}
#footer{
height:50px;
width:960px;
background:yellow;
clear:both;
margin:0px auto 0px;;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="main">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
方法2は最も推奨される方法であるが,サブ要素に位置決めレイアウトが現れた場合,方法2は無効となり,その場合は方法1を用いる.
絶対位置を使用する必要がある場合は、2つの条件を満たす必要があります.1つが必要です.Noブラウザの互換性の問題:
(1).親要素には独自の位置決めプロパティが必要です.position:relativeを使用することをお勧めします.
(2)..サブエレメントには独自の絶対位置決めプロパティが必要です.position:absolute;同時に方向プロパティを使用します.