32

クライアントのためにウェブサイトをデザインしていますが、ウェブデザインと CSS の経験はあまりありません。また、標準の CSS の方法でデザインしたいと考えています。

問題は、CSS の align プロパティと float プロパティをかなり混同していることです。これら 2 つのプロパティには大きな違いがあることはわかっていますが、開発時にはまだ正しく処理できません。

これら 2 つのプロパティの正確な違いを説明できる人はいますか?

4

6 に答える 6

37

「text-align」はボックスのコンテンツに適用され、「float」はボックス自体に適用されます。

于 2012-09-28T06:55:17.690 に答える
17

整列 - 整列を使用して、テキストやその他の項目を左、右、中央、または両端揃えにするのではなく、整列させます。整列は、ドキュメント フローから項目を削除しません。

フロート - オブジェクトを左または右にフロートさせ、ドキュメント フローから削除します。(つまり、周囲に段落テキストが流れているサムネイル画像 -- 通常は、画像が正しく見えるように余白を設定する必要があります)。

ほとんどの場合、float を使用してページをレイアウトします。グリッドシステムの使用をお勧めします。これは、私がこれまでに知っている最も簡単で互換性のあるグリッド システムです。http://webdesignerwall.com/trends/960-grid-system-is-getting-old

また、「最初に」クラスを使用することと、CSS clearfix が何をするかを理解する必要があります。また、すべての要素が左から右だけでなく上下にも整列するように、ベースライン グリッド (水平グリッドだけでなく垂直グリッド) の生成についても理解する必要があります。

于 2012-09-28T12:46:20.213 に答える
9

まず、O'Reilly の出版物による CSS と HTML の Head First シリーズを参照することをお勧めします。デザイン初心者の方に是非読んでいただきたい一冊です。

したがって、float プロパティは多くのブロック (サイドバー、コンテンツ領域など) を移動するために使用され、HTML の配置について話している場合、この方法で CSS で同じことを行うことができます。

.test{
text-align: right; 
}

上記のコードは CSS になり、同等の HTML コードになります。

<div class="test"> This text will be aligned from right </div>

当分の間、O'Reilly head first with HTML AND CSS を参照すると、大いに役立ちます。

于 2012-09-28T07:02:03.760 に答える
3

子 div に指定するfloatと、親 div は子 div の寸法に依存しなくなります。つまり、親 div は幅と高さを自動的に増加しません。(親 div に寸法を指定していない場合は継承されますwidth:0 and height:0)

多くのデザイナーが問題に直面するのfloatは、レイアウトに適していないためですが、非常に便利です。floatcss selector を使用して、レイアウトをわかりやすくすることができます:after。

一方Text-align、子 div に与えると、親 div は影響を受けません。

これが私が知っているすべてです。

于 2012-09-28T06:57:19.493 に答える
1

align は、 table 、 text 、 span などの単一要素を整列するプロパティです

float は、サイドバー、div などのブロック レベルの要素を配置するためのプロパティです。

于 2012-09-28T07:15:42.667 に答える