浮动、定位、伪类、伪元素

<!DOCTYPE>
<html>
<head>
    <style>
        .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="left">一个盒子</div>
</body>
</html>

大致效果：

浮动特性

浮动元素会脱离标准流；（脱离标准普通流的控制移动到指定位置，浮动的盒子不再保留原先的位置）

浮动的元素会一行内显示并且元素顶部对齐；

浮动的元素会具有行内块元素的特性；

常见网页布局

清除浮动

很多父盒子不便于给高度，但是子盒子的浮动不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

本质是清除浮动元素造成的影响；

如果父盒子本身有高度，则不需要清除浮动；

清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了；

语法：

选择器{clear：属性值；}

属性值：left（清除左边的浮动）；right（清除右边的浮动）；both（清除左右两侧浮动的影响）；none（允许两侧都有浮动元素）；

我们可以通过向包含元素中添加 overflow：auto；来解决元素浮动溢出问题。

练习部分代码：

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，便于书写	添加了许多无意义的标签，结构化较差
父级overflow：hidden；	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	可能有兼容性问题
父级双伪元素	结构语义化正确	可能有兼容性问题

二、定位

定位是将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

有些情况（当滚动窗口时，盒子固定在屏幕的某个位置等）用标准流或者浮动无法实现。需要定位来做。

定位组成

由定位模式（用于指定一个元素在文档中的定位方式）和边偏移（决定了该元素的最终位置）组成。

定位模式

通过position属性来设置，属性值如下表：

属性值	语义	是否脱标	移动位置	使用频率
static	静态定位	否	不能使用边偏移	很少
relative	相对定位	否	相对于自身位置移动	常用
absolute	绝对定位	是	带有定位的父级	常用
fixed	固定定位	是	浏览器可视区	常用
sticky	粘性定位	否	浏览器可视区	当前用得少

static静态定位

静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 { position：static；}

特点：

按照标准流特性摆放位置，没有边偏移；布局中较少使用；

relative相对定位

元素在移动位置的时候，是相对于原来的位置来说的。

语法：

选择器 { position：relative；}

特点：

不脱标，移动后继续保留原来位置。

absolute绝对定位

在元素移动位置的时候，是相对于它的祖先元素来说的.

语法：

选择器 { position：absolute；}

特点：

没有祖先元素或祖先元素没有定位，则以浏览器为准定位；否则，则以最近一级的有定位祖先元素为参考点移动位置。移动后不再占有原先位置。

fixed固定定位

固定定位是元素固定于浏览器可视区的位置。主要用于使元素的位置在浏览器页面滚动时不发生改变。

语法：

选择器 { position：fixed；}

特点：

以浏览器的可视窗口为参照点移动元素：跟父元素没有关系；不随滚动条滚动；

固定定位不占有原先的位置：脱标，可看作一种特殊的绝对定位；

sticky粘性定位

相对定位和固定定位的混合。

语法：

选择器 { position：sticky；top：10px；}

特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）；粘性定位占有原先位置（相对定位特点）；必须添加top、left、right、bottom其中一个才有效；

总结

边偏移

定位的盒子移动到最终位置。

属性	例子	概述
top	top：100px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom：100px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left：100px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right：100px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位叠放顺序

使用定位布局时，可能会出现盒子重叠的情况。此时可以使用z-index来控制盒子的前后次序

（z轴）。

语法：

选择器 { z-index：1；}

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上；属性值相同时，按照书写顺序，后来居上；数字后面不能加单位；只有定位的盒子才有z-index属性；

注：行内元素添加绝对或者固定定位，可以直接设置高度和宽度；块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

三、伪类

伪类是用来添加一些选择器的特殊效果，名称不分大小写。

语法：

选择器：pseudo-class { property：属性值；}

:anchor伪类

显示链接不同的状态

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

最终的顺序只有两种:link、visited、focus、hover、active或visited、link、focus、hover、active；

:first-child伪类

用来选择父元素的第一个子元素。

示例练习：

p:first-child {
  color: blue;
}

:lang伪类

令你可以为不同的语言定义特殊的规则。

示例练习：

<html>
<head>
<style>
q:lang(test) {
  quotes: "It's a test";
}
</style>
</head>
<body>

<p>这是一个测试<q lang="test">一个测试</q></p>

</body>
</html>

伪类和CSS类

示例练习：

a.highlight:hover {
  color: #FF00FF;
}

四、伪元素

用来添加一些选择器的特殊效果。

语法：

选择器：pseudo-element { property：value；}

::first-line伪元素

用于向文本的首行设置特殊样式，只能用于块级元素。

该伪元素属性：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

示例练习：

p::first-line {
  font-size:100%;
}

::first-letter伪元素

用于向文本的首字母设置特殊样式，只能用于块级元素，可以结合CSS类使用，可以多个结合使用。

属性：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

::before伪元素

可以在元素内容前面插入新内容。

示例练习：

p::before {
  content: url(test.gif);
}

::after伪元素

可以在元素内容后面插入新内容。

示例练习：

p::after {
  content: url(test.gif);
}

::selection伪元素

匹配用户选择的元素部分。

属性：

color

background

cursor

outline

多个伪元素组合

p::first-letter {
  font-size: xx-large;
}

::selection {
  color: white; 
  background: orange;
}

CSS伪类/元素总结

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not(p)	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值