探新Web前端开发(三)

CSS选择器

组合选择器

一次使用一个选择器是很有用的，但在某些情况下却可能效率低下。CSS有几种方法可以选择元素基于它们如何彼此相关。这些关系与组合子表示如下(A和B代表任何选择器见上图):

Combinators	Select
A,B	匹配满足A（和/或）B的任意元素
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

CSS的值和单位

“值”指的就是:

• 数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。
• 百分比:用于指定尺寸或长度——例如相对于父容器的长度或高度，或默认的字体大小。
• 颜色: 用于指定背景颜色，字体颜色等。
• 坐标位置: 例如，用于指定定位元素相对于屏幕的左上方的位置。
• 函数: 例如，用于指定背景图片或背景图片渐变。

“单位”:
我们最常用的单位就是px(像素)了，像素 (px) 是一种绝对单位（ absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。也有相对单位，他们是相对于当前元素的字号（ font-size ）或者视口（viewport ）尺寸。

em:1em与当前元素的字体大小相同。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。em是Web开发中最常用的相对单位。

盒模型

盒模型我还是比较了解的，现在看看我所不知道的

高级的盒子操作

在设置盒子的width, height, border, padding 及margin之外， 还有一些其他的属性可以改变它们的行为。

Overflow

当你使用绝对的值设置了一个盒子的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢出。我们使用overflow属性来控制这种情况的发生。它有一些可能的值，但是最常用的是：

• auto: 当内容过多，溢出的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容
• hidden: 当内容过多，溢出的内容被隐藏
• visible: 当内容过多，溢出的内容被显示在盒子的外边（这个是默认的行为）

CSS 盒子类型

之前我们说的所有对于盒子的应用都表示的是块级元素的，然尔，CSS还有一些表现不同的其他盒子类型。盒子应用通过指定display属性，这个属性有很多的属性值，在本篇文章，我们将关注三个最普遍的类型：block, inline, and inline-block。

• 块盒（ block box）是定义为堆放在其他盒子上的盒子（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于盒模型的应用适用于块盒 （ block box）
• 行内盒（ inline box）与块盒是相反的，它随着文档的 文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin and border都会更新周围文字的位置，但是对于周围的的块盒不会有影响。
• 行内块状盒（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内盒（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块盒一样保持了其块特性的完整性-它不会在段落行中断开（在下面的示例中，内联框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。)

样式链接

链接状态

首先要理解的是链接状态的概念 - 链接可以存在的不同状态，可以使用不同的伪类来设计链接：

• Link（unvisited）：链接所在的默认状态，当它不处于任何其他状态。这可以使用:link伪类来专门设计。
• 已访问：链接已被访问（存在于浏览器的历史记录中），使用:visited伪类进行风格化。
• 悬停：当链接被用户的鼠标指针悬停时，使用:hover伪类进行风格化。
• 焦点：一个关注焦点的链接（例如使用Tab键或类似键盘用户移动，或以编程方式集中使用HTMLElement.focus()） - 这是使用:focus伪类的样式。
• 活动：链接被激活（例如点击），使用:active伪类进行风格化。

使用CSS更改背景样式

元素的背景是位于元素内容，填充和边框下方的区域。默认情况下，无论如何 - 在较新的浏览器中，您可以使用background-clip属性更改背景占用的区域
背景没有坐在边缘之下 - 边距不算作元素区域的一部分，而是元素之外的区域。

还有许多其他不同的属性可以用来处理元素的背景，其中有些已经在我们的课程中已经看到了很多次：

• background-color：设置背景的纯色。
• background-image：指定要在元素背景中显示的背景图像。这可以是静态文件或生成的渐变。
• background-position：指定背景应在元素背景中显示的位置。
• background-repeat：指定是否应重复（平铺）背景。
• background-attachment：指定元素在内容滚动时的行为，例如它是否与内容一起滚动，还是固定？
• background：在一行上指定上述五个属性的简要说明。
• background-size：允许动态调整背景图像大小

背景图

该background-image属性指定要在元素的背景中显示的背景图像。这个属性的最简单的用法是使用将url()图像的路径作为参数的函数来获取要插入的静态图像文件。
比如:background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);

背景重复

background-repeat允许您指定如何重复背景图像。默认值是repeat，如上所述，使图像保持重复，直到整个元素背景被填充。在这种情况下，这不是我们想要的。其他普遍和广泛支持的价值观是：

• no-repeat：图像不会重复：只会显示一次。
• repeat-x：图像将横跨背景水平重复。
• repeat-y：图像将沿背景垂直重复。

背景位置

background-position允许我们在背景中定位我们的背景图像。通常，属性将采用两个由空格分隔的值，它们指定图像的水平（x）和垂直（y）坐标。图像的左上角是原点 - （0,0）。将背景视为图形，x坐标从左到右，y坐标从上到下。

该属性可以接受许多不同的值类型; 你最常用的是：

• 像像素这样的绝对值 - 例如background-position: 200px 25px。
• 相对价值，如rems - 例如background-position: 20rem 2.5rem。
• 百分比 - 例如background-position: 90% 25%。
• 关键字 - 例如background-position: right center。这两个值是直观的，并且可以采取的值left，center，right，和top，center，bottom，分别。

您应该注意，您可以混合和匹配这些值，例如background-position: 99% center。另请注意，如果您仅指定一个值，则该值将被假定为水平值，并且垂直值将默认为center。

背景图像：渐变

通过传递linear-gradient()函数作为background-image属性的值来创建线性渐变。至少，该功能需要采用三个参数，用逗号分隔 - 渐变应该在背景中的方向，开始时的颜色以及最后的颜色。例如：
background-image: linear-gradient(to bottom, orange, yellow);
这个梯度将从上到下运行，从顶部开始为橙色，并在底部平滑过渡到黄色。您可以使用关键字来指定方向（to bottom，to right，to bottom right等），或角度值（0deg相当于最高，90deg相当于to right，高达360deg，这将相当于to top再次）。
您还可以指定沿渐变颜色定义的其他点 - 这些点称为颜色停止，浏览器将计算每组颜色停止点之间的颜色渐变。例如：
background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);
该梯度将从上到下运行，从黄色开始，从元素开始渐变至橙色的40％，然后以100％返回黄色。您可以根据需要指定多少个色彩停止点，您还可以使用其他单位（如rems px等）指定这些停靠点的位置。

背景大小

正如我们前面提到的，有一个可用的属性 - background-size- 它允许您动态地改变背景图像的大小，使其更适合您的设计。这在许多方面非常有用，例如自动更正未正确上传的图标的大小。请注意，低于9的Internet Explorer版本不支持此功能,对于每个背景图像，您需要包括两个背景大小值 - 一个用于水平维度，一个用于垂直尺寸值：

background-image: url(myimage.png);
background-size: 16px 16px;

边框

边框半径

箱子上的圆角都在网站的另一个非常受欢迎的功能-事实上如此受欢迎，浏览器中实现某种属性容易执行圆角：border-radius。
现在这很简单 - 您只需使用以下属性：
border-radius: 20px;

浮动

浮点数是一种允许元素浮动到彼此左侧或右侧的技术，而不是默认位于彼此之间。浮动体的主要用途是在图像上放置列和浮动文本。为了让您开始，我们快速浏览该float属性，然后查看一个简单的例子。

float属性有四个可能的值：

• left - 将元素漂浮在左边。
• right - 将元素漂浮在右边。
• none - 指定根本没有浮动。这是默认值。
• inherit - 指定float属性的值应该从父元素继承。

定位技巧

定位允许你将元素从页面上的原始位置移动到另一个位置，准确性非常高。
应该了解的有四种主要的定位类型：

• 静态定位是每个元素的默认值 - 它只是意味着“将元素放入文档布局流中的正常位置 ”。
• 相对定位允许你修改元素在页面上的位置，使其相对于正常流程中的位置移动，包括使其与页面上的其他元素重叠。这对于微小的布局调整和设计精确定位非常有用。
• 绝对定位将元素完全移出页面的正常布局流程，就像它位于其单独的图层上一样。从那里，您可以将其修复在相对于页面<html>元素边缘的位置（或它是最近定位的祖先元素）。这对于创建复杂的布局效果非常有用，例如标签框，其中不同的内容面板彼此顶部坐在一起，根据需要显示和隐藏，或默认情况下坐在屏幕上的信息面板，但可以在屏幕上使用控制按钮。
• 固定定位与绝对定位非常相似，除了它固定相对于浏览器视口的元素，而不是另一个元素。这对于创建效果非常有用，例如永久性导航菜单总是与其他内容滚动一样保持在屏幕上的相同位置。

相对定位

相对定位的一个非常常见的用法是在布局中进行小的调整，例如将图标向下移动一点，使其与文本标签对齐。为此，我们可以添加以下规则来添加相对定位：

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

该样式将使某div相对原位置向下向右各位移30px

绝对定位

绝对定位用于将元素移动到网页的任何位置，以创建复杂的布局。有趣的是，它通常与相对定位和浮动一起使用
我们可以添加以下CSS规则来实现绝对定位：

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

这是非常不同的！定位的元素现在已经与页面布局的其余部分完全分离，并位于其顶部。这些top和left属性对绝对定位的元素具有不同于在相对定位的元素上的效果。在这种情况下，它们不指定元素相对于其原始位置移动多少; 而是指定元素应该从页面的边界的顶部和左侧（<html>元素，准确地）坐下的距离。

灵活的盒子

CSS是一种强大的语言，可以做许多事情。但是如果你想：

• 垂直居中的一盒内容（不只是文字，line-height不会工作）。
• 使含有不同数量内容的多个列具有相同的高度，而不使用固定的高度，或者用背景图像伪装。
• 使一行中的几个框占用相同数量的可用空间，无论它们中有多少，并且应用了填充，边距等。

上述示例几乎不可能通过常规CSS实现 。灵活的框（或flexbox）被发明以允许这样的事情更容易实现
我们来看一个例子，首先，一些简单的HTML：

<section>
  <div>This is a box</div>
  <div>This is a box</div>
  <div>This is a box</div>
</section>

<button class="create">Create box</button>
<button class="reset">Reset demo</button>

在这里，有一个内部<section>有三个元素<div>，还有几个按钮来创建一个新的框，并重置演示。默认情况下，子元素根本不会被布局或大小，并且使用旧的传统方法，我们必须仔细地调整每个元素的大小，允许宽度，填充，边框和边距，如果我们添加了另一个子元素， div必须彻底改变所有样式
我们来用Flexbox：

html {
  font-family: sans-serif;
}

section {
  width: 93%;
  height: 240px;
  margin: 20px auto;
  background: purple;
  display: flex;
}

div {
  color: white;
  background: orange;
  flex: 1;
  margin-right: 10px;
  text-shadow: 1px 1px 1px black;
}

div:last-child {
  margin-right: 0;
}

section, div {
  border: 5px solid rgba(0,0,0,0.85);
  padding: 10px;
}

这两行CSS真的很有趣：

display: flex;告诉<section>元素的孩子被放置为灵活的框 - 默认情况下，它们将全部展开，以填充父母的可用高度，无论如何，并排列成一行 - 具有足够的宽度来包装其内容。
flex: 1;告诉每个<div>元素占用相同数量的行中可用的空间，无论有多少
若三个div都是flex:1，那他们各占父元素空间的1/3，若有一个div为flex:2，则它占2/4，另外两个各占1/4

浮动元素

浮动通常用来创建整个网站布局，其中包括浮动的多列信息，因此它们彼此并排放置（默认行为是列彼此之间的排列顺序与它们在源中显示的顺序相同）

三列布局

两列布局比较常见，添加一个第三列(或更多)并不是太难。你只需要添加另一个列在同一个父元素，添加以下CSS

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 36%;
  float: left;
}

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
}

:nth-of-type是伪类中的一个

清除浮动

将clear属性应用到一个元素，它基本上说“停止浮动在这里” -这个元素和它之后的源将不会浮动，除非你应用一个新的float声明到另一个元素。
clear可以取三个值:

• Left：停止左侧浮动
• right：停止右侧浮动
• both： 停止左右浮动

浮动问题

以上部分提供了使用浮动创建简单布局的基础，但是还有一些问题需要解决。

整个宽度可能难以计算

到目前为止，我们的例子是没有应用样式的浮动框——这很容易。当你开始给这些框加上样式时，比如borders, padding等等，问题就来了。
比如:

div, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

此时，将看到布局已损坏 - 由于填充和边框引入的额外宽度，三个div不再适合一行，因此第三div下降到第二行。

我们有很多方法可以解决上面的问题，但最好的方法是给你的html加上下面的css。

* {
  box-sizing: border-box;
}

box-sizing 将我们box的width的计算方式变为了content + padding + border，而不是之前的content的width，所以当我们增加padding或border的width时，我们不会增加我们box的width。相反我们的content的width会缩小padding或border增加的宽度。

但是floated元素在某些方面表现相当奇怪，它存在于正常的文档布局流程之外：

• 首先，他们在父元素的有效高度为0 。这个可以通过很多方式解决，但在我们上述中我们依靠在父容器的底部清除浮动来解决这一问题。
• 其次，你不能在非浮动元素上使用边距去创建它们之间的浮动空间— 这是我们在这里眼前的问题，我们将在下面实施修复。

让我们解决这些问题！ 首先，在HTML的代码里添加，新的<div> 元素，在<footer>标签的上方添加：
<div class="clearfix"></div>
如果你没有一个元素可以清除，你可以添加一个不可见的 “clearfix div” 元素，在你想要清除的浮动后是非常有用的 (就像页脚), 但在这里也有用。接下来我们要做的是清除：both; 声明了对页脚进行样式化的规则，并将其放在clearfix div上：

.clearfix {
  clear: both;
}