HTML>CSS DIV Web ページのスタイルとレイアウトに精通している>CSS の配置と DIV レイアウトを理解している>float 属性の自己理解_html/css_WEB-ITnose

ASP.NET フロントエンド開発への愛を込めて、今朝、float 属性を調べました。正直に言うと、これは非常に複雑です。

まず私の例をあげましょう。この例には自己理解のすべてが詰まっています。まだ不完全な部分があり、クリア属性はついていません。

< html >
<;頭 > <;タイトル＞ float プロパティの自我理解
.father
{
背景色 : #fffea6 ;
ボーダー : 1px solid #111111 ;
パディング: 25px ;
}

.oldbrother
{
パディング : 10px ;
余白 : 5px ;
背景色 : #70baff ;
境界線 : 1px 破線 #111111 ;
float : なし ;
}
.youngbrother
{
パディング : 5px ;
マージン : 0px ;
背景色 : #ffd270 ;
境界線 : 1px 破線 #111111 ;
}


$( function () {
$( " #nofloat " ).click( function () {
$( " .oldbrother " ).attr( " style " , " float:none; " );
$( " . youngbrother " ).attr( " style " , " float:none " );
});
$( " #leftfloat1 " ).click( function () {
$( " .oldbrother " ).attr( " style " , " float:left; " );
$( " #rightfloat1 " ).click( function () {
$( " .oldbrother " ).attr( " style " , " float:right; " ) ;
});
$( " #nofloat1 " ).click( function () {
$( " .oldbrother " ).attr( " style " , " float:none; " );
});
$( " #Fumargin " ).click( function () {
$( " .oldbrother " ).attr( " style " , " float:left;margin:5px 0 0 -35px; " );
$( " #leftfloat2 " ).click( function () {
$( " .youngbrother " ).attr( " style " , " float:left; " );
});
$( " #rightfloat2 " ).click( function () {
$( " .youngbrother " ).attr( " style " , " float:right; " );
});
});

< ボディ > 元占用の空間 (ブロック)、スパン行内行 (インライン) の分。 , 撑满父要素; inline, 占有空間は単にコンテンツ + パディング + ボーダー + マージンです。
要知道ブロック、インライン、浮動プロパティを持っています。 < br />
弟要素の設定後、その弟要素は親要素に属しません。影響はありますが、父元素には属しません。< br />
< div クラス ="兄" > < div クラス ="弟" ;/ div > " />< br />
< input type ="button" id ="nofloat1" value ="要素を浮動小数点なしに設定する" />
< input type ="button" id ="leftfloat1 " value ="兄弟要素を左にフロートに設定します" /> < input type ="button" id ="rightfloat1" value ="兄弟要素を右にフロートに設定します" /> input type ="button" id ="Fumargin" value ="兄要素の margin 属性を負の数に設定し、浮動小数点のままにします" />
< input type ="button" id ="leftfloat2" value ="弟の要素を左にフロートに設定します" /> < input type ="button" id ="rightfloat2" value ="弟の要素を右にフロートに設定します" /> / div >
< div style ="float:left " > これはブロック要素です。
< div > これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。
これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。

< これはインライン要素です。
< div style ="border:dotted 1px black" > これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。
これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。これはブロックレベルの要素です。




もちろん、ダウンロードも可能です。 /Files/samwu/float 属性の自己理解.rar