＃4 CSSでレイアウト
CSSで構築するウェブレイアウト
クラスを追加し、位置のプロパティを編集する最初の要素の位置を変更するには、要素にスタイルを追加することに似ています。あなたはマージン、パディング、ディスプレイ、フロート、オーバーフロー、および位置について学びます。
マージン＆パディング例
ニュース速報
連邦エージェントがGunshopを襲撃、武器を探します
店のオーナーのスティーブWitmereは、以前は闇市場のバズーカ取引のため逮捕しました。ロシアマフィアの関与を告白。
gunshopで見つかった多数のバズーカのうち少なくとも万ドルの価値が不正に取得した絵画の数万人でした。これらのダムの絵画の支払いに重い価格のthats。
説明： マージンとパディングスタイルパネルの位置パレットで見つけることができます。追加証拠金は、ブロックの外にスペースを追加し、パディングを追加すると、ブロックの内側にスペースを追加します。
自分を間隔に追加
ニュース速報
連邦エージェントがGunshopを襲撃、武器を探します
店のオーナーのスティーブWitmereは、以前は闇市場のバズーカ取引のため逮捕しました。ロシアマフィアの関与を告白。
gunshopで見つかった多数のバズーカのうち少なくとも万ドルの価値が不正に取得した絵画の数万人でした。これらのダムの絵画の支払いに重い価格のthats。
ヒント： メイングレーブロック（親要素）のすべての側面にパディングを追加することで起動します。そして、個々のテキスト要素（子要素）間の間隔を追加するには下余白を追加します。ヒント：また、反対側に適用するために、すべての側面とALTに適用するマージン/パディングコントロールを使用しながらShiftキーを押したままにします。
「表示：ブロック」の例
この見出しが表示されるように設定されています。ブロックを
この段落は表示に設定されています：ブロック。だから、親ウィンドウの幅を満たし、他のブロックの上にスタックします。
ブロック：ディスプレイとボタンの表示とボタン：ブロックこのリンクを表示するように設定されている：ブロックこのリンクを表示するように設定されている：ブロック説明： ブロックに要素の表示設定を設定するには、彼らは互いの上にスタックにし、100％に、その親ブロックの幅を記入します。ほとんどの要素は、実際には、デフォルトでこの設定を持っています。
自分を：彼ら「一括表示」作ります
これはボタンである。これは、ボタンで表示されているリンク：デフォルトによるインラインリンクが表示されている：インラインデフォルトでヒント： これらの要素を選択します（一部はインラインブロックであり、一部はインラインである）、それらを表示します、彼らは互いの上に積み重ねるようにブロック。
「ディスプレイ：インラインブロック」の例
説明： インラインブロックに設定する要素の表示を設定するには、ブロックの幅は、その内部のコンテンツの幅に適合するようになります。すなわち、それらの内容が十分に小さい場合には、互いに隣に積み重ねることができることを意味します。あなたは上のボタンをコピー＆ペーストし、それがどのように動作するか確認するために内のテキストを編集することができます。
例をフロート
ありがとう！あなたの投稿は受信されました！
おっと！フォームを送信しながら、何かが間違っていた:(
説明： 設定画面：インラインブロックまたはフローティング（この例では）側の要素側をスタックする最も一般的な方法です。この例では、私は何かをフロートする方法を紹介します。
それを自分でフロート
ありがとう！あなたの投稿は受信されました！
おっと！フォームを送信しながら、何かが間違っていた:(
ヒント： まず、テキストフィールドを選択し、それがフロートにする：左、それに割合幅（例：60％）を得ました。左だけでなく、別のパーセンテージの幅（例：40％）を設定します。そして、フロートボタンを設定ので、両方を100％まで追加。それが並んでスタックする任意の要素を強制的に手動の方法です。
絶対位置の例
ジョーのマイカップ
これは、写真のキャプションテキストです。
おすすめ
説明： あなたは要素の絶対位置を設定する場合は、その親ブロック内の任意の場所にそれを配置することができるでしょう。の内側に位置するためにどの親選択するには、相対的に親要素の位置を設定します。注：エレメントは、彼らが他の要素の上に浮い絶対配置されているとき。
それを自分のスタイル
ジョーのマイカップ
これはジョーの私のお気に入りのカップのための写真のキャプションです。
おすすめ
ヒント： 第一の画像ラッパー要素を選択し、相対的にその位置を設定します。次の画像にドラッグし、キャプションを選択することは絶対にポジションだし、7プリセットを選択します。正しい場所におすすめバッジを配置するには、2番目のプリセットを選択し、それを手動で配置します。
