チュートリアル4

CSSフロート（浮動）、要素は、その周囲の要素が再配置され、左または右に移動します。

フロート（浮動）、画像が用いられることが多いが、それは、レイアウトに非常に有用であるとして。

あなたが一緒に入れ、いくつかの浮動要素を入れた場合はスペースがある場合、それらは互いに隣接することになります。

画像を右浮いている場合は、次のテキストは、それの左側の周りに流れます。

浮動要素の後、周囲の要素は、この、明確な性質を避けるために再配置されます。

浮動要素指定された要素の両側に明確なプロパティが表示されないことができます。

揃え

（例えば、<DIV>のような）を中心に水平要素に、使用することができる自動;マージン。

要素内の中央にテキストについては、使用することができますテキスト整列：センター;

画像中央揃え、利用してみましょうマージン：自動;そして上に置き 、ブロック 要素：

我々は使用することができます位置：絶対に、属性は要素を整列します：

また、使用することができる要素を整列させるフロートプロパティを：

注意：子要素は親要素の高さよりも大きくなると、子要素が浮くように設定され、その後、子要素が波及するだろう場合は、この時間は、あなたが「を使用することができ、問題を解決するためにclearfix（クリアフロート）」。

私たちは、親要素のオーバーフローに追加することができます：自動;オーバーフローがサブ要素の問題を解決するために：

CSS垂直方向の中央を実装するための多くの方法があります。簡単な方法は、頭の上使用することですパディングを：

垂直方向の中心 - 行の高さを利用して

使用に加えて、パディングとのline-height属性、我々は使用することができます垂直方向の中心を設定するtransformプロパティを：

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

div+p
{
  background-color:yellow;
}

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

div~p
{
  background-color:yellow;
}

css 伪类：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

选择器匹配作为任何元素的第一个子元素的 元素：

p:first-child
{
    color:blue;
}

在下面的例子中，选择相匹配的所有元素的第一个 元素：

p > i:first-child
{
    color:blue;
}

选择器匹配所有作为元素的第一个子元素的 元素中的所有 元素：

p:first-child i
{
    color:blue;
}

为所有选中的输入元素设置背景颜色：

input:checked {
    height: 50px;
    width: 50px;
}

input[type="text"]:disabled

p:empty 没有子元素的p元素

垂直方向の中心 - 行の高さを利用して

おすすめ