教程4

Posted 2022-06-27 webcyh

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> 元素：

p:first-child

    color:blue;

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

p > i:first-child

    color:blue;

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

p:first-child i

    color:blue;

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

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

input[type="text"]:disabled

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