第四周预习内容

浮动

原文引用链接: link.

一、float 属性：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

实例：
现在有两个div，分别设置宽高。我们知道，它们的效果如下：

此时，如果给这两个div增加一个浮动属性，比如float: left;效果如下：

一旦一个元素浮动了，那么将能够并排，并且能够设置宽高。无论它原来是个div还是个span。(所有标签不区分行内、块)。

前言：

• float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

• 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

• 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

性质

1.浮动的元素脱标（脱标即脱离标准流）

标准文档流： 宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。

在默认情况下，两个div标签是上下进行排列的。现在由于float属性让图中的第一个<div>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<div>还在自己的层面上遵从标准流进行排列。

2.浮动的元素互相贴靠

我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：

上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，3号自己去贴左墙。

不过3号自己去贴墙的时候，注意：
上图显示，3号贴左墙的时候，并不会往1号里面挤。

3.浮动的元素有“字围”效果

我们让div浮动，p不浮动。

上图中，我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。

关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

4.收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

实例：

5.浮动的补充（做网站时注意）

将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：

二、clear属性：

• left 在左侧不允许浮动元素。
• right 在右侧不允许浮动元素。
• both 在左右两侧均不允许浮动元素。
• none 默认值。允许浮动元素出现在两侧。
• inherit 规定应该从父元素继承 clear 属性的值。

前言：

clear 属性设置一个元素的侧面是否允许其他的浮动元素。

实例：
有两个块级元素div，div没有任何属性，每个div里有li，效果如下：

可如果我们给里面的<li>标签加浮动。效果却成了下面这个样子：

上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。

那该怎么解决呢？

浮动清除方法

1.给浮动元素的祖先元素加高度

造成前言中这个现象的根本原因是：li的父亲div没有设置高度，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。

撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。

好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象：

给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：

总结：

如果一个元素要浮动，那么它的祖先元素一定要有高度。

有高度的盒子，才能关住浮动。

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

2.clear:both;

网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚的方法1，工作中用得很少。

这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。

margin失效的本质原因是：上图中的box1和box2，高度为零。

3.隔墙法

为了防止第二个div贴靠到第一个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性。既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。

   内墙法

记住一句重要的话：一个父亲是不能被浮动的儿子撑出高度的

与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。

而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高

4.overflow:hidden;

overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。

如下：

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。

那么对于前言中的例子，我们同样可以使用这一属性：

定位

原文引用链接: link.

前言

我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果

1. 小黄色块在图片上移动，吸引用户的眼球。

2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的

结论：要实现以上效果，标准流或浮动都无法快速实现将盒子定在某一个位置，自由的漂浮在其他盒子(包括标准流和浮动)的上面。

所以，我们脑海应该有三种布局机制的上下顺序：

标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）

定位详解

定位也是用来布局的，它有两部分组成：
定位 = 定位模式 + 边偏移

1. 边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

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

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

2.position属性：

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

静态定位(static)

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。

静态定位 按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时就是个废物

相对定位(relative)

相对定位是元素相对于它 原来在标准流中的位置 来说的。

相对定位的特点：

• 相对于自己原来在标准流中位置来移动的
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位(absolute)

绝对定位是元素以带有定位的父级元素来移动位置

• 完全脱标 —— 完全不占位置；
• 父元素没有定位，则以浏览器为准定位（Document 文档）。
• 父元素要有定位
  将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：

绝对是以带有定位的父级元素来移动位置
如果父级都没有定位，则以浏览器文档为准移动位置 不保留原来的位置，完全是脱标的。
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

定位口诀 —— 子绝父相

刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？

子绝父相 —— 子级是绝对定位，父级要用相对定位。

分析：

• 方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
• 父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
  如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。
  结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

固定定位(fixed)

固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形，那么固定定位就类似于正方形

完全脱标 —— 完全不占位置；

• 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性
  来设置元素的位置；
• 跟父元素没有任何关系,单独使用的
• 不随滚动条滚动。
• 提示：IE 6 等低版本浏览器不支持固定定位。

伪类

什么是伪类？ 伪类用于定义元素的特殊状态。

伪类的语法：

selector:pseudo-class {
  property: value;
}

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 <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> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 “required” 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 <input> 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 <input> 元素。
:required	input:required	选择指定了 “required” 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

伪元素

什么是伪元素？ CSS 伪元素用于设置元素指定部分的样式。

伪元素的语法：

selector::pseudo-element {
  property: value;
}

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

1. ::first-letter 伪元素用于向文本的首字母添加特殊样式。
   下面的例子设置所有 <p> 元素中文本的首字母格式：

实例：

效果：

2. ::first-line 伪元素用于向文本的首行添加特殊样式。
   下面的例子为所有 <p> 元素中的首行添加样式：

实例：

效果：

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

请注意双冒号表示法： ::first-line 对比 :first-line

• 在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

• 在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

• 为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

3. ::selection 伪元素匹配用户选择的元素部分。
   下例使所选文本在黄色背景上显示为红色：

实例：

效果：（当你选择“请选择本页中的文本：”时）

以下 CSS 属性可以应用于 ::selection：

• color
• background
• cursor
• outline