教程4

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

如果图像是右浮动，下面的文本流将环绕在它左边：

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

为了文本在元素内居中对齐，可以使用 text-align: center;

让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

我们可以使用 position: absolute; 属性来对齐元素:

我们也可以使用 float 属性来对齐元素:

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:

垂直居中 - 使用 line-height

除了使用 padding 和 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元素

垂直居中 - 使用 line-height

猜你喜欢