フロントエンドの基礎(1) CSSレイアウトの基礎_html/css_WEB-ITnose

CSS では、ボックス モデルはボックス モデル (またはボックス モデル) と呼ばれ、要素ボックスが要素コンテンツ (要素コンテンツ)、パディング (パディング)、ボーダー (境界線) を処理することを規定します。 ）と外側のエッジの方法。この方法は基本的に Android 開発におけるレイアウト方法と似ているため、Android 開発者はフロントエンド レイアウト方法をすぐに学習し始めることができます。ただし、Android ではマージンとパディングを設定する順序は [10, 20, 30, 20] のように左、上、右、下ですが、CSS では上、右、下、左です。概要図は次のとおりです。

位置決めの基本

位置位置決め​​

位置には次の種類の位置決めが含まれます

• 静的なデフォルト値。 Position: static を持つ要素は特別に配置されません。静的要素は「配置」されないことを意味し、position 属性が別の値に設定された要素は「配置」されることを意味します。

• 相対 相対レイアウト。元のレイアウトから一定の方向に一定の距離だけずれます。 Android のレイアウト方法とよく似ています。例

.relative2 {  position: relative;  top: -20px; //在原有top位置上向上偏移-20px  left: 20px; //在原有left位置上向左偏移20px  background-color: white;  width: 500px;}

• 絶対絶対レイアウト、上向きに検索して使用します。位置から位置へ (デフォルト値の静的を除く)、その要素に基づいて位置を決定します。

.relative { position: relative; width: 600px; height: 400px;}.absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px;}

写真に示すように

• 固定固定位置、相対位置つまり、ページがスクロールしても同じ位置に留まります。

.fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white;}

要素の位置は常に右下隅で同じままです。

float float

フローティングボックスは、その外端がそれを含むボックスまたは別のフロートボックスの境界線に触れるまで、左または右に移動できます。

このように理解できます。たとえば、float: left は、エッジがルート要素または別の仏窟の境界のエッジに触れるまで左に移動することを意味します。つまり、複数の要素が左側に浮いている場合、それらは左から右に配置されます。

以下に示すように

clear フロートをクリアします

clear 属性は、要素のどの側が許可されないかを定義します浮動小数点要素。

具体的な例はこちらをご参照ください