Web デザインに関するヒント III_html/css_WEB-ITnose

CSS での配置について:

static: 特別な配置なし、オブジェクトは HTML の配置ルールに従います

absolute: ドキュメントからオブジェクトをフローします ドラッグout を使用し、絶対位置を指定するために left、right、top、bottom、およびその他の属性を使用します。そして、そのカスケードは css z-index プロパティを通じて定義されます。現時点では、オブジェクトにはマージンはありませんが、パディングと境界線はまだあります

相対: オブジェクトは積み重ねることはできませんが、左、右、上、下に基づいて通常のドキュメント フローでオフセットされます。その他の属性

簡単に言うと、

absolute はドキュメントの位置に直接相対して配置され、重複する可能性があり、z-index を使用して優先順位を付けます。マージンがなくなりました (他の要素に対する相対的な配置ではなくなったため)

相対とは、要素が表示されるべき本来の位置に基づいてオフセットされた配置です。このとき、マージンはありますが、他の要素と重複することはできません

スケーリングによって相対的な位置を変更しない複数の div の CSS を書きたい場合、最良の方法は、それらを親 div に配置し、相対的な中心位置を使用することです。この親 div の場合

css3 の新機能

css3 では、長さと幅の単位として vw vh が導入されました

vw:view width

vh:view height

実際には、現在のビュー全体の高さと幅をパーセンテージで表したものです

たとえば、100vh はビュー全体の現在の高さです

css3 のグラデーション

background-image: -webkit-radial-gradient(50px 150px at 200px 150px,hsla(120,70%,60%,0.9),hsla(360,60%,60%,0.9));

50px は楕円の主半径、150 は垂直方向の二次半径です

の後に円の中心位置が続きます、次に、グラデーションになる 2 つの色

これも、xxxx の xxxx はオプションです。円を指定するだけです。これは、円