cssが自分で登った穴

水平中央この要素がposition:nomalであり、親要素内のblockサブ要素が定幅されている場合、サブ要素に対してmargin:0 autoを採用すればよい.この要素はposition:absoluteであり、要素が定幅widthの場合、left:50%を用いる.margin-left:-(1/2)widthは絶対中央の親要素にdisplay:flexを設定し、親要素にjustify-content:centerを設定すればinlineであり、親要素にtext-align:centerを設定すれば親要素の幅が適応し、親要素にpadding-leftとpadding-rightを加えることができる

垂直中央この要素はposition:nomalであり、親要素に対してdisplay:table-cellを採用する.vertical-align:middle; この元素がposition:absoluteであり、元素がheightを高く設定した場合、top:50%を用いる.margin-top:-(1/2)heightで親エレメントにdisplay:flexを設定し、親エレメントにalign-item:centerを設定すればよい子エレメントがinlineであれば親エレメントにtext-align:centerを設定すれば親エレメントに高度に適応し、親エレメントにpadding-topとpadding-bottomを追加すれば、単純に文字を垂直に中央に置くだけで、文字のline-heightをコンテナと同じ高さに設定すれば

でよい

Canvas Canvasはpx単位のみをサポートする、canvasの幅をcss制御、または$(‘canvas’).css({})で制御すると、中の画像が変形する.$(‘canvas’)[0].width = 100しか使えません.$(‘canvas’)[0].height = 300、またはラベルに\< canvas width=100 height=300>

と書く

Display親要素がdisplay:flexを設定すると、親要素はblockレベルになります.同時に、子要素をすべてblockに設定したほうがいいです.子要素がinline-blockまたはinlineの場合、問題が発生しやすいです.親要素がdisplay:table-cellを設定すると、親要素はinline-blockレベルになり、子要素には影響しません.

Width&Height htmlとbodyはいずれも特殊なdivと見なすことができ、一般的には高さを設定することはなく、スクリーン全体のスライドの需要がある場合にのみhtml height:100%、body height:100%を設定する.しかしbodyはmin-width,max-width,widthなどの属性と連用されることが多い.

Background bodyがワイドに設定されていても、bodyにbackgroundを設定するか、スクリーン全体にbackground-position:centerとbackground-sizeを使用してバックグラウンドマップが常に中央にあり、ワイドor高の適応効果Css 3におけるbackground-origin:content-boxとbackground-repeat:repeatを併用すると衝突する

Positionサブエレメントがposition:absoluteに設定と通常のドキュメントフローから離れます.この場合、親エレメントのpaddingがサブエレメントに対して無効になりますposition:absoluteは、最近のpositionがnormalではない親エレメントに基づいて位置決めpositon:fixedは、ブラウザウィンドウに基づいてビット

です.

Animation transform:要素を変形するanimation:要素アニメーションを規定し、複数のキーフレームを設定することができ、イベントトリガを必要としない複雑なアニメーションを行う場合、通常transformとtransitionを連用する:2つのキーフレームのanimationのみ、すなわち開始と終了のみである.また、transitionではhover

などのイベントトリガが必要です.

他のボタンは一般的にspan+backgrount-imageの形式で書かれているが、imgに設定するとユーザ移動端が長押しして保存できる場合があるため疑問である

.

BUG div下img height:100%でもdivより数px少ないのは、imgが行内要素であるため、自動的に末尾に空白文字が追加されるからです.解決方法:imgはdisplay:blockを設定すればよいが、実際にはすべてのdisplay:inline-blockでこの問題が発生し、ブラウザは自動的に要素の末尾に空白の文字を追加する(サイズはfont-sizeに関係する).解決方法:親要素にfont-size:0 pxを設定できます.さらにこの要素でfont-size設定をpadding/marginのtopに戻し、bottom設定の割合は親要素の幅に基づいています.