***
4225 ワード
ボックスモデル関連プロパティ
枠線のプロパティ
1.ボーダースタイル(border-style)構文形式:border-style:上[右下端左];属性値:solid:枠線が単実線dashed:枠線が破線dotted:枠線が点現double:枠線が二実線2.枠線幅(border-width)構文フォーマット:border-width:上[右下辺左];3.ボーダー色(border-color)構文形式:border-color:上[右下左];属性:boder-top-colors(right,bottom,left)4.枠線構文フォーマットの統合:border:幅スタイル色5.フィレットボーダー構文形式:border-radius:パラメータ1/パラメータ2パラメータ1:フィレットの水平半径、パラメータ2:フィレットの垂直半径
マージン属性
1.内マージンpaddingとは、要素の内容と枠線との距離のことで、設定方法:padding-top:上内マージンpadding-right:右内マージンpadding-bottom:下内マージンpadding-left:左内マージンpadding:上内マージン[右内マージン下内マージン左内マージン],1つの値が4辺で、2つの値が上下/左右、3つの値が上/左右/下2.外側距離marginとは、要素の枠線と隣接する要素の距離を指し、paddingに似ています.
背景プロパティ
1.背景色を設定する2.背景画像の設定(background-image)
フローティングと位置決め
要素のフローティング
1.エレメントのフローティング属性float構文フォーマット:セレクタ{float:属性値}共通属性値:left、エレメント左フローティング;right:要素が右に浮動する;none、要素はフローティングしません2.フローティング構文フォーマットのクリア:セレクタ{clear:属性値}共通属性値:left:左側にフローティングは許可されません.right:右側にフローティングは許されません.both:左右のフローティングの影響を同時にクリア
overflowプロパティ
構文フォーマット:セレクタ{overflow:プロパティ値}共通プロパティ値:visible:コンテンツはトリムされず、要素ボックスの外に表示されますhidden:オーバーフローコンテンツはトリムされ、トリムされたコンテンツは非表示auto:必要に応じてスクロールバーが生成されます.すなわち、表示するコンテンツに適応するscroll:オーバーフローコンテンツはトリムされ、ブラウザは常にスクロールバーが表示されます
要素の配置
1.要素の配置属性構文形式:セレクタ{position:属性値}共通属性値:(1)static:静的配置;デフォルト測位方式(2)relative:相対測位、その元のシフトストリームの位置に対して測位(3)absolute:測位を決定し、その前の測位した親要素に対して測位(4)fixed:固定測位、ブラウザウィンドウに対して測位する
要素のタイプと変換
要素のタイプ
1.ブロック要素によく見られるブロック要素は、
枠線のプロパティ
1.ボーダースタイル(border-style)構文形式:border-style:上[右下端左];属性値:solid:枠線が単実線dashed:枠線が破線dotted:枠線が点現double:枠線が二実線2.枠線幅(border-width)構文フォーマット:border-width:上[右下辺左];3.ボーダー色(border-color)構文形式:border-color:上[右下左];属性:boder-top-colors(right,bottom,left)4.枠線構文フォーマットの統合:border:幅スタイル色5.フィレットボーダー構文形式:border-radius:パラメータ1/パラメータ2パラメータ1:フィレットの水平半径、パラメータ2:フィレットの垂直半径
マージン属性
1.内マージンpaddingとは、要素の内容と枠線との距離のことで、設定方法:padding-top:上内マージンpadding-right:右内マージンpadding-bottom:下内マージンpadding-left:左内マージンpadding:上内マージン[右内マージン下内マージン左内マージン],1つの値が4辺で、2つの値が上下/左右、3つの値が上/左右/下2.外側距離marginとは、要素の枠線と隣接する要素の距離を指し、paddingに似ています.
背景プロパティ
1.背景色を設定する2.背景画像の設定(background-image)
フローティングと位置決め
要素のフローティング
1.エレメントのフローティング属性float構文フォーマット:セレクタ{float:属性値}共通属性値:left、エレメント左フローティング;right:要素が右に浮動する;none、要素はフローティングしません2.フローティング構文フォーマットのクリア:セレクタ{clear:属性値}共通属性値:left:左側にフローティングは許可されません.right:右側にフローティングは許されません.both:左右のフローティングの影響を同時にクリア
overflowプロパティ
構文フォーマット:セレクタ{overflow:プロパティ値}共通プロパティ値:visible:コンテンツはトリムされず、要素ボックスの外に表示されますhidden:オーバーフローコンテンツはトリムされ、トリムされたコンテンツは非表示auto:必要に応じてスクロールバーが生成されます.すなわち、表示するコンテンツに適応するscroll:オーバーフローコンテンツはトリムされ、ブラウザは常にスクロールバーが表示されます
要素の配置
1.要素の配置属性構文形式:セレクタ{position:属性値}共通属性値:(1)static:静的配置;デフォルト測位方式(2)relative:相対測位、その元のシフトストリームの位置に対して測位(3)absolute:測位を決定し、その前の測位した親要素に対して測位(4)fixed:固定測位、ブラウザウィンドウに対して測位する
要素のタイプと変換
要素のタイプ
1.ブロック要素によく見られるブロック要素は、
~,
,,,
,
2.
:,,,,,,,,, の
display :(1)inline:この は として されます(2)block:この はブロック として されます(3)inline-block:この は ブロック として されます(4)none:この は になります
フォームの
フォーム のフォーマット:<form action="url " method=" " name=" ">
</form>
フォームのプロパティ
1.action :フォームデータを して するサービスプログラムのurlアドレス2を する.methodプロパティ:hetまたはpost 3の をとるフォームデータのコミット を します.nameプロパティ:フォーム 4を します.actocompleteプロパティ:フォームに があるかどうかを し、onまたはoff 5を します.novalidateプロパティ:フォームの にフォームの なチェックをキャンセルすることを します.
input と
1.input のtype (1) テキスト ボックス(2)パスワード ボックス(3)ラジオボタン(4)チェックボックス(5) ボタン(6)コミットボタン(7)リセットボタン(8) のコミットボタン(9) ドメイン(10)ファイルドメイン(11)emailタイプ(12)urlタイプ(13)telタイプ(14)searchタイプ(15)colorタイプ(16)numberタイプ(17)rangeタイプ2.Input の の (1)autofocus は、ページロード にフォーカス(2)form を に するかどうかを するために され、(3)list は、 ボックスにバインドされたdetailist (4)multiple (5)min,max,step (6)pattern (7)placeholder を するために される.
その のフォーム
1.textarea 、 のテキストを する2.select は、ドロップダウンメニューを するために され、optionがネストされている3.detalist 、 ボックスを するためのオプションリスト4.keygen 、フォーム キージェネレータ
CSS
transition
1.transition-propertyプロパティ、 を するCSSプロパティの フォーマットを するために します:transition-property:none|all|property 2.Transition-durationプロパティ. を するのにかかる フォーマット:transition-duration:time 3.Transition-timing-function は、 の 4を する.transition-delayプロパティ. が フォーマットを するタイミングを します.transition-delay:time
transform
1. 、translate()メソッドを して の を し、 の フォーマットを する:transform:translate(x-value,y-value);2.スケーリング、scale()メソッド フォーマット:transform:scale(x-axis,y-axis)3. 、skew()メソッド フォーマット:transform:skew(x-angle,y-angle)4. :rotate()メソッド、 の は り フォーマット:transform:rotate(angle)
アニメーション(Animation)
1.@keyframes、アニメーション フォーマットを する:@keyframes animationname{keyframes-selector{css-styles;}}2.animation-nameプロパティ. するアニメーション を します.アニメーション-durationプロパティで、アニメーション の に する を します.アニメーション-timing-functionプロパティは、アニメーションの 5を するために されます.アニメーション-delayプロパティで、アニメーション を する の 6を します.アニメーション-iteration-countプロパティで、アニメーションの 7を します.アニメーション-directionプロパティ( のアニメーションの を する)