CSS-调试

2018-03-18

一、CSS和调试

1.和HTML一样，CSS是宽容的,在CSS情况下，如果一个声明是无效的(语法错误或者浏览器不支持该特性),浏览器完全忽略它，然后转向它找到的下一个;

如果选择器是无效的，那么它就不会选择任何东西，而整个规则也不会再做任何事情，浏览器只会继续执行下一个规则。

2.检查DOM和CSS

所有的web浏览器都提供了帮助您检查和理解web页面的开发工具：DOM检查器和CSS编辑器。

DOM检查器

DOM

CSS编辑器

CSS

Tips:每个属性旁边还有一个复选框，可以选择checked/unchecked来启用/禁用您的CSS属性。这对于找出可能导致错误的原因也非常有用。

3.CSS验证

我们已经看到了W3C HTML验证器，但是它们也有一个CSS验证器。它的工作方式是相同的，允许您在特定的URL上验证CSS，通过上传本地文件，或者直接使用CSS输入。

CSS Lint是一个类似的工具，用于验证CSS和发现错误，它也可以提供一些有用的提示并给出有趣的警告。

参考资料：

1.CSS调试

展开全文 >>

CSS-盒模型

2018-03-17

一、简介

1.CSS盒模型(框模型）是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容、内边距、边界和外边距像洋葱的膜那样，一层包着一层构建起来。

浏览器渲染网页布局时，它会算出每个框的内容要用什么样式，周围的洋葱层有多大，以及框相对于其它框放在哪里。

2.框属性

文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。

box-model-standard-small

• width和height:设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框( 还有其他属性可以更巧妙地处理内容的大小——设置大小约束而不是绝对的大小。这些属性包括min-width、max-width、min-height 和 max-height。);
• padding:表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边;（顺时针：上、右、下、左）
• border:CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如  border: 1px solid black; 但这个简写可以被各种普通书写的更详细的属性所覆盖：
    border-top, border-right, border-bottom, border-left: 分别设置某一边的边界厚度／风格／颜色。
    border-width, border-style, border-color: 分别仅设置边界的厚度／风格／颜色，并应用到全部四边边界。
    你也可以单独设置某一个边的三个不同属性，如 border-top-width, border-top-style, border-top-color，等。 
•margin:外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。

tips: 外边距有一个特别的行为被称作外边距塌陷（margin collapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和.

二、玩转框

1.一些提示及想法:

默认情况下background-color/background-image 延伸到了边界的边沿（the edge of the border）。该行为可以使用将在Background_clip 章中学到的background-clip 属性来改变。
如果内容框变得比示例输出的窗口大，它将从窗口溢流，然后滚动条将会出现允许你滚动窗口来查看盒子剩余的内容 。你可以使用overflow属性来控制溢流——参看下边的 Overflow 章节。
框的高度不监视百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px 或者em），它会比在页面上默认是100%高度更实用。
边界也忽略百分比宽度设置。
框的总宽度(属性之和) = width + padding-right + padding-left + border-right + border-left。
在一些情况下比较恼人（例如，假使你想要一个框占窗口宽度的50%，但边界和内边距是用像素来表示时该怎么办？），为了避免这种问题，有可能使用属性box-sizing来调整框模型。使用值border-box，它将框模型更改成这个新的模型：

box-model-alt-small

三、高级框操作

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

1.溢流

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

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

eg:

<div>
  <p class="autoscroll">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Mauris tempus turpis id ante mollis dignissim. Nam sed
      dolor non tortor lacinia lobortis id dapibus nunc. Praesent
      iaculis tincidunt augue. Integer efficitur sem eget risus
      cursus, ornare venenatis augue hendrerit. Praesent non elit
      metus. Morbi vel sodales ligula.
   </p>

   <p class="clipped">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Mauris tempus turpis id ante mollis dignissim. Nam sed
      dolor non tortor lacinia lobortis id dapibus nunc. Praesent
      iaculis tincidunt augue. Integer efficitur sem eget risus
      cursus, ornare venenatis augue hendrerit. Praesent non elit
      metus. Morbi vel sodales ligula.
   </p>

   <p class="default">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Mauris tempus turpis id ante mollis dignissim. Nam sed
      dolor non tortor lacinia lobortis id dapibus nunc. Praesent
      iaculis tincidunt augue. Integer efficitur sem eget risus
      cursus, ornare venenatis augue hendrerit. Praesent non elit
      metus. Morbi vel sodales ligula.
   </p>
  </div>

  CSS
  /* 溢流 */
p {
  width  : 400px;
  height : 2.5em;
  padding: 1em 1em 1em 1em;
  border : 1px solid black;
}

.autoscroll { overflow: auto;    }
.clipped    { overflow: hidden;  }
.default    { overflow: visible; }

overflow

2.背景裁剪(Background clip)

框的背景是由颜色和图片组成的，它们堆叠在一起（background-color, background-image）。它们被应用到一个盒子里，然后被画在盒子的下面。默认情况下，背景延伸到了边界外沿。这通常是OK的，但是在一些情况下比较讨厌（假使你有一个平铺的背景图，你只想要它延伸到内容的边沿会怎么做？），该行为可以通过设置盒子的background-clip属性来调整。

eg:

<div class="default"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

CSS
/* 背景裁剪 */

div {
  width  : 60px;
  height : 60px;
  border : 20px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin : 20px 0;

  background-size    : 140px;
  background-position: center;
  background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
  background-color   : gold;
}

.default     { background-clip: border-box;  }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }

Background-clip

3.轮廓(Outline)

一个框的 outline 是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）;

tips:使用 outline 属性的时候要注意，它一般只在需要可用性的一些情况才被使用，例如在一些用户点击它的时候使用 outline 来表示高亮、可用，如果你要使用 outline，请确保不要因为它看起来像链接的高亮让用户迷惑。

eg:

HTML
<p>hell world</p>

 CSS
 /* 宽度 | 样式 | 颜色 */
 p{
     outline: 1px solid red;
 }

四、CSS框类型

所有对于框的应用都表示的是块级元素的，然而，CSS还有一些表现不同的其他框类型。框类型应用通过指定display属性，这个属性有很多的属性值，三个最普遍的类型：block, inline, and inline-block。

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

tips:默认状态下display属性值，块级元素display: block ，行内元素display: inline;

eg:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

CSS
p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

block

参考资料：

1.盒模型

2.溢流

3.背景裁剪

4.Outline

展开全文 >>

CSS-层叠和继承

2018-03-16

当多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？这是通过层叠机制来控制的，这也和样式继承(元素从其父元素那里获得的属性值)有关。

一、层叠

CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它表明CSS规则的顺序很重要，但它比那更复杂。什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）：

1.重要性（Importance）
2.专用性（Specificity）
3.源代码次序（Source order）

1.重要性

在CSS中，属性值后面加上 !important 可以让这条规则优先于其他规则：

eg:

<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

CSS
#winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;//语法格式
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

important

• 第三条规则 color 和 padding 被运用了, 但 background-color没有:实际上，这三种情况都应该应用，因为在源顺序后面的规则通常会覆盖较早的规则。
• 然而, 在前面的规则被运用了,因为IDs/class 选择器优先于element选择器;
• 这两个元素都有 class并带有 better属性, 但是第二个元素有 id 值为winning 。 因为比起class而言id专用性更高(在一个页面上id是唯一的, 但很多元素可以拥有相同的class — ID 选择器在它们的目标中是非常优先的)，红色背景色和1pixel的黑色边框都应应用于第二元素，第一个元素获得灰色背景色，没有边框，如类所指定。
• 第二个元素获得红色背景色，但没有边框。因为 !important 在第二条规则中的声明——在 border: none之后写入它意味着尽管id具有更高的优先性，该声明也将优先于前面规则中的边界值声明。

注意:重载这个 !important 声明的唯一方法是在后面的源码或者是一个拥有更高特殊性的源码中包含相同的 !important 特性的声明。

应用说明：

• !important存在是很有用的，但是！建议千万不要使用它，除非绝对必须使用它;
• 不得不使用的情况：在CMS中工作时，不能编辑核心的CSS模块，并且确实想要重写一种不能以其他方式覆盖的样式;
• 由于 !important 改变了层叠正常工作的方式，因此调试CSS问题，尤其是在大型样式表中，会变得非常困难。

用户可以设置自定义样式表覆盖开发商的样式,比如:视力障碍者，调整字体大小。

相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：

a)在用户代理样式表的声明 (例如：浏览器在没有其他声明的默认样式).
b)用户样式表中的普通声明（由用户设置的自定义样式）。
c)作者样式表中的普通声明（这是我们设置的样式，Web开发人员）。
d)作者样式表中的重要声明
e)用户样式表中的重要声明

2.专用性

专用性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。
优先级:

!important语法 > ID选择器 > 类选择器 > 元素选择器

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：

• 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
• 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
• 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
• 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

tips:通用选择器(*),复合选择器(+,>,~,’’),否定伪类(:not)在专用性中无影响。

example

eg:

HTML
<div id="outer" class="container">
  <div id="inner" class="container">
    <ul>
      <li class="nav"><a href="#">One</a></li>
      <li class="nav"><a href="#">Two</a></li>
    </ul>
  </div>
</div>

CSS
/* specificity: 0101 */
/*id(outer - 0100) + 元素(a- 0001) = 0101  */
#outer a {      
  background-color: red;
}

/* specificity: 0201 */
/*id(outer|inner - 0100 + 0100) + 元素(a- 0001) = 0201  */
#outer #inner a {
  background-color: blue;
}

/* specificity: 0104 */
/*id(outer - 0100) + 元素(a|div|ul|li- 0001 * 4) = 0104  */
#outer div ul li a {
  color: yellow;
}

/* specificity: 0113 */
/*id(outer - 0100) + 元素(a|ul|div- 0001 * 3) + 类选择器(class - 0010) = 0113  */
#outer div ul .nav a {
  color: white;
}

/* specificity: 0024 */
/*伪类(:hover|:nth-child(2) - 0010 * 2) + 元素(div|div|li|a- 0001* 4) = 0024  */
div div li:nth-child(2) a:hover {
  border: 10px solid black;
}

/* specificity: 0023 */
/*伪类(:hover|:nth-child(2) - 0010 * 2) + 元素(div|li|a- 0001* 3) = 0023  */
div li:nth-child(2) a:hover {
  border: 10px dashed black;
}

/* specificity: 0033 */
/* 类选择器(.nav - 0010) + 伪类(:hover|:nth-child(2) - 0010 * 2) + 元素(div|div|a- 0001 * 3) = 0033  */
div div .nav:nth-child(2) a:hover {
  border: 10px double black;
}

a {
  display: inline-block;
  line-height: 40px;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  margin-bottom: 10px;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

specificity

• 前两个选择器正在竞争链接的背景颜色的样式——第二个赢得并使背景色为蓝色:专用性值为101比201;
• 第三个和第四个选择器在链接文本颜色的样式上进行竞争——第二个选择器获胜，使文本变白:专用性值为104和113;
• 第五、六、七个选择器在徘徊在链接附近时的样式进行竞争。专用性值 - 五：六：七 = 24：23：33 - 第七个选择器胜;

3.源代码次序

如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜

eg1:后面的规则将战胜先前的规则(第二个选择器优先)

p {
  color: blue;
}

/* This rule will win over the first one */
p {
  color: red;
}

eg2:专用性高于源代码顺序(第一个选择器优先)

/* This rule will win */
.footnote {
  color: blue;
}

p {
  color: red;
}

4.在考虑所有这些层叠理论和什么样式优先于其他样式被应用时，记住：所有这些都发生在属性级别上——属性覆盖其他属性，但不会让整个规则凌驾于其他规则之上。

当多个CSS规则匹配相同的元素时，它们都被应用到该元素中。只有在这之后，任何相互冲突的属性才会被评估，以确定哪种风格会战胜其他类型。

<p>I'm <strong>important</strong></p>

/* specificity: 0002 */
p strong {
  background-color: khaki;
  color: green;
}

/* specificity: 0001 */
strong {
  text-decoration: underline;
  color: red;
}

hybrid

二、继承

CSS继承以获取所有信息并了解什么样式应用于元素。其思想是，应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会。例如:

1.对 font-family 和 color 进行继承是有意义的;
因为这使得您可以很容易地设置一个站点范围的基本字体，方法是应用一个字体到 <html> 元素；然后，您可以在需要的地方覆盖单个元素的字体。如果要在每个元素上分别设置基本字体，那就太麻烦了。

2.让 margin，padding，border 和 background-image 不被继承是有意义的;
因为如果您将这些属性设置在一个容器元素上，并将它们继承到每个子元素，然后不得不将它们全部放在每个单独的元素上，那么将会出现的样式/布局混乱。

1.控制继承

CSS为处理继承提供了三种特殊的通用属性值：

inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。(最有趣 - 它允许我们显式地让一个元素从其父类继承一个属性值.)
initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。

tips: initial 和 unset 不被IE支持。

eg:

<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="inherit">Inherit the <a href="#">link</a> color</li>
  <li class="initial">Reset the <a href="#">link</a> color</li>
  <li class="unset">Unset the <a href="#">link</a> color</li>
</ul>

CSS
body {
  color: green;
}

.inherit a {
  color: inherit;
}

.initial a {
  color: initial
}

.unset a {
  color: unset;
}

inheritance

a)首先设置<body> 的color为绿色。
b)由于color属性是自然继承的，所有的body子元素都会有相同的绿色。需要注意的是默认情况下浏览器设置链接的颜色为蓝色，而不是自然继承color属性，因此在我们列表中的第一个链接是蓝色的。
c)第二个规则设置一个类 inherit 的元素内的链接，并从父类继承它的颜色。在这种情况下, 意思是说链接继承了父元素<li>的颜色，默认情况下<li>的颜色来自于它的父元素 <ul> , 最后<ul> 继承自 <body>元素，而<body>的color 根据第一条规则设置成了绿色。
d)第三个规则选择了在元素上使用类 initial 的任意链接然后设置他们的颜色为 initial 。通常， initial 的值被浏览器设置成了黑色，因此该链接被设置成了黑色。
e)最后一个规则选择了在元素上使用类 unset 的所有链接然后设置它们的颜色为 unset  ——即我们不设置值。因为color属性是一个自然继承的属性，它实际上就像把值设置成 inherit 一样。结果是，该链接被设置成了与body一样的颜色——绿色。

参考资料:

CSS-值和单位

2018-03-16

一、CSS的值

1.数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。

1.1长度和尺寸:lenght

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

CSS
p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

字号(font-size)代表字体/字形的高度;

绝对单位:

像素-px(pixels)
mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches = 2.54cm）
pt, pc: 点（Points - 1pt=1/72in）， 十二点活字（ picas - 1pc=12pt）

1in 总是（等于）96px
3pt 总是（等于）4px
25.4mm 总是（等于）96px

相对单位 - 相对于当前元素的字号（ font-size ）或者视口（viewport ）尺寸:

em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。em是Web开发中最常用的相对单位。
ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持;
rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，这听起来像一个更好的选择比em，虽然在旧版本的IE上不被支持（查看关于跨浏览器支持 Debugging CSS.)
vw, vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。

使用相对单位是非常有用的-调整HTML元素大小相对于字体或视口大小，这意味着布局将保持看起来正确.

1.2无单位的值

eg1:边框(内/外)

一个元素完全去除外边框和内边框，你可以只使用无单位的0 —0就是0，不管前面设置的单位是什么！
margin: 0

eg2:无单位的行高

 line-height,设置元素中每行文本的高度。你可以使用单位设置特定的行的高度，但使用一个无量纲的值往往更容易，它就像一个简单的乘法因子。
p {
      line-height: 1.5;//这里默认字号16px;行高为1.5或24px（1.5x16）;
}

eg3:动画数值-角度、时间、时长、次数

<p>Hello</p>

CSS
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

2.百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度，或默认的字体大小。

<div>
  <div class="boxes">Fixed width layout with pixels</div>
  <div class="boxes">Liquid layout with percentages</div>
</div>

CSS
div .boxes {
  margin: 10px;
  font-size: 200%;//字号为父容器的200%（默认字号16px）
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {//第一个框红色背景-固定宽高
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {//第二个框蓝色背景-固定高，动态宽(视口宽度75%)
  background-color: blue;
  width: 75%;
}

动态布局(流体布局)–随浏览器视口大小的变化;
固定宽度布局–不管怎样都保持不变;

可以使用动态布局来确保标准文档始终适合于屏幕，并且可以在不同的移动设备屏幕大小上表现良好。
一个固定宽度的布局可以用来保持在线地图的大小相同；浏览器视口可以在地图上滚动，只在一个时间内查看一定数量的地图。您可以立即看到的量取决于您的视口有多大。

3.颜色: 用于指定背景颜色，字体颜色等。

颜色的描述方式:

使用关键字
    red/green/yellow...
    eg:    background-color: red;

使用RGB立体坐标（RGB cubic-coordinate）系统（以“#”加十六进制或者 rgb() 和 rgba() 函数表达式的形式）；
    eg:background-color: #ff0000;
       background-color: rgb(255,0,0);
        background-color: rgba(255,0,0,0.5);
使用HSL圆柱坐标（HSL cylindrical-coordinate）系统（以 hsl() 和 hsla() 函数表达式的形式）-- 包含r、g、b、色相、饱和度、明度值；
    色调：颜色的底色调。这个值在0到360之间，表示色轮周围的角度。
    饱和度：饱和度是多少？这需要一个价值从0-100%，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
    明度：颜色有多亮或明亮？这需要一个价值从0-100%，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）
    eg:background-color: hsl(240,100%,50%);//蓝
        background-color: hsla(240,100%,50%,0.5);

通过CSS——opacity 属性设置不透明度和使用alpha通道设置不透明度的区别：

alpha通道：0是完全透明的,1是完全不透明的；
opacity属性：一切元素都是opacity的透明度；

例如,当您想创建一个图片覆盖的标题，图片能透过标题显示，且标题的文本显示不受影响，此时应该使用RGBA修改标题背景色的透明度；另一方面,当您想要创建一个动画效果,整个UI元素从完全隐藏到可见，此时应该使用不透明度（Opacity）。

4.坐标位置: 例如，以屏幕的左上角为坐标原点定位元素的位置。

5.函数: 例如，用于指定背景图片或背景图片渐变。

函数通常与JavaScript，Python，C++语言相关联，但它也作为属性值存在于CSS中。
eg:
background-color: hsla(240,100%,50%,0.5);
transform: translate(50px, 60px);
background-image: url('myimage.png');

参考资料：

iOS知识巩固-信息传递

2018-03-15

一、传值

传值方式：        
    正向传值：从首页到详情，属性、初始化、单例；
    逆向传值：从详情返回首页，属性、代理(委托)、通知、单例。

1.属性传值

方法一：属性传值 A——>B
    声明B的属性;
    在A中导入B的头文件并且把需要传输的值赋给B的属性;
    在B中运用
方法二：属性的逆向传值 B-->A
    导入头文件，利用视图推送的机制，将B页的值通过视图推送返回去

2.自定义初始化传值

在B的.h文件写入初始化方法;
.m文件中初始化（将值赋给其属性）
在A的传值处调用;

3.委托传值

声明委托协议
创建委托对象
设置委托传值方法
实现委托传值方法
设置委托传值(之前签订协议)

4.单例传值不需要释放

创建单例类
"+"号方法声明单例
实现单例
在需要运用单例的地方导入头文件对单例类的对象的属性赋值
传值

5.通知传值

在需要接受数据的视图创建一个通知;
在需要发送数据的视图界面发送一个通知（发送数据）;
在需要数据的视图界面，接收数据

展开全文 >>

CSS-选择器

2018-03-15

一、不同种类的CSS选择器

选择器是CSS规则的一部分且位于CSS声明块前。

1.简单选择器

通过元素类型、class 或 id 匹配一个或多个元素。

1.1元素选择器(类型选择器) - 这是选择所有指定类型的最简单方式。

一个选择器名和指定的HTML元素名的不区分大小写的匹配。

//html    
<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

//CSS
/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

1.2类选择器

类选择器由一个点“.”以及类后面的类名组成。

类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。

文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。

//html
<ul>
      <li class="first done">Create an HTML document</li>
      <li class="second done">Create a CSS style sheet</li>
      <li class="third">Link them all together</li>
</ul>

//css
/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

1.3ID选择器

选择单个元素的最有效的方式:ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。任何元素都可以使用id属性设置唯一的ID名称。由你自己选择的ID是什么。

重要:一个ID名称必须在文件中是唯一的。关于重复ID的行为是不可预测的，比如在一些浏览器只是第一个实例计算，其余的将被忽略.

//html
<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>


//css
#polite {
  font-family: cursive;
}
#rude {
  font-family: monospace;
  text-transform: uppercase;
}

1.4通用选择器

通用选择（*）是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用(参考下面组合 .)

重要提示：使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢.

<div>
      <p>I think the containing box just needed
      a <strong>border</strong> or <em>something</em>,
      but this is getting <strong>out of hand</strong>!</p>
</div>这是样式表：


* {
      padding: 5px;
      border: 1px solid black;
      background: rgba(255,0,0,0.25)
}

2.属性选择器

一种特殊类型的选择器，它根据元素的属性和属性值来匹配元素。

语法：由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。

2.1存在和值(Presence and value)属性选择器

这些属性选择器尝试匹配精确的属性值：

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

eg:

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

CSS

/* 
具有"data-vegetable"属性的所有元素,
将被给予绿色的文本颜色
*/
[data-vegetable] {
  color: green
}

/* 
    具有"data-vegetable"属性且属性值刚好是"liquid"的所有元素，
    将被给予金色背景颜色 
*/
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* 
    具有"data-vegetable"属性且属性值包含"spicy"的所有元素，
    即使某元素的该属性还包含其他属性值，
    都会被给予红色的文本颜色 
*/
[data-vegetable~="spicy"] {
  color: red;
}

本例中的 data-* 属性被称为 数据属性。它们提供了一种在HTML属性中存储自定义数据的方法，由此，这些数据可以轻松地被提取和使用。

属性选择器1

2.2子串值属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（-用来处理语言编码）。
[attr^=val] : 选择attr属性的值以val开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串 val 的元素。

html见上例子；

CSS
/* 语言选择的经典用法 */
[lang|=fr] {
  font-weight: bold;
}

/* 
    具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色
*/
[data-vegetable*="not spicy"] {
  color: green;
}

/* 
   具有"data-quantity"属性其值以"kg"结尾的所有元素*/
[data-quantity$="kg"] {
  font-weight: bold;
}

/* 
   具有属性"data-quantity"其值以"optional"开头的所有元素 
*/
[data-quantity^="optional"] {
  opacity: 0.5;
}

3.伪选择器：

定义:不选择实际元素，而是元素的某些部分，或仅在某些上下文中的元素。包含：伪类和伪元素两种。

3.1.伪类(Pseudo-class)

运用：一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个（多个元素）元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个 checkbox 被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。

HTML:
<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

CSS:
/* These styles will style our link in all states */
a {
  color: blue;
  font-weight: bold;
}

/* We want visited links to be the same color as non visited links */
a:visited {
  color: blue;
}

/* We highlight the link when it is hovered (mouse), activated or focused (keyboard) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

:hover鼠标悬停
 更多的伪类用法
3.2.伪元素

用法：伪元素前缀是两个冒号 (::) —— 同样是添加到选择器后面达到指定某个元素的某个部分。配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。

<ul>
      <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>


CSS
/* All elements with an attribute "href", which values start with "http", will be added an arrow after its content (to indicate it's an external link) */
[href^=http]::after {
  content: '⤴';
}

::first-letter第一行第一个字

::first-line第一行

更多伪元素

4.组合器

这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。

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）

5.多个选取器

这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面，以将一组声明应用于由这些选择器选择的所有元素。

p, li {
      font-size: 1.6em;
}

h1, h2, h3, h4, h5, h6 {
      font-family: helvetica, 'sans serif';
}

参考资料：

CSS-基础语法

2018-03-15

CSS 是一种声明式语言，这令其语法相当简单直观且易于理解。此外，CSS还有着相当不错的错误修复系统，这一特性允许你犯一些错误但并不会造成什么异常影响 —— 比如，有可能你的某些声明浏览器并不理解，这时浏览器会直接忽略掉这些内容并继续执行渲染。当然这一特性也可能导致一些问题，比如一些异常情况出现的时候，可能在定位问题原因上造成一些障碍。随着阅读的深入，这些优势和缺点都将逐渐清晰。

一、概念介绍

1.CSS组成：属性(Propertie) + 属性值(Value)

属性（Propertie）：一些人类可理解的标识符，这些标识符指出你想修改哪一些样式，例如：字体，宽度，背景颜色等。

属性（Propertie）：一些人类可理解的标识符，这些标识符指出你想修改哪一些样式，例如：字体，宽度，背景颜色等。

CSS 的属性和属性值都是区分大小写的。属性和属性值之间，用英文半角冒号 (:) 隔离。

属性和属性值不能任意组合：每个属性都有一个已经定义好的可用属性值范围。

重要1：如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它。

重要2：在 CSS（和其他网络标准）中，使用美式拼写作为单词的标准写法。例如，颜色（见于上述代码所见）应始终拼写为 color。写成 colour 会无法正常工作。

2.声明

CSS声明

与值配对的属性被称为CSS声明。CSS声明会被放置在一个CSS声明块中。最后，CSS声明块与选择器相结合形成一个CSS规则集（或CSS规则）。

给 CSS 属性设置特定的值是 CSS 语言的核心功能。CSS 引擎会通过计算，将对应的 CSS 声明应用到页面的每一个元素上，从而使得元素们以适当的方式布局，并展示出适当的样式。

3.声明块

CSS声明块

声明被按块分组,每一组都用一对{}包裹，用{表示开始,用}表示结束;

声明块里的每一组声明必须用半角分号(;)分割，否则代码不生效（至少不会按预期结果生效）。声明块里的最后一个声明结束的地方，不需要加分号，但是最后加分号是个好习惯，因为可以防止在后续增加声明时忘记加分号。

块有时候是可以嵌套的。这种情况下，每一对括号必须逻辑上嵌套，跟嵌套 HTML 元素的标签嵌套方式相同。最常见的例子是 @-rules，这是一种用 @ 标识开头的块，例如 @media, @font-face等;

声明块的内容允许为空 —— 这完全有效。

4.CSS选择器和规则

通过在每个声明块前加上选择器（selector）来完成这一动作，选择器是一种模式，它能在页面上匹配一些元素。这将使相关的声明仅被应用到被选择的元素上。选择器加上声明块被称为规则集（ruleset），通常简称规则（rule）。

CSS-selector

选择器可以很复杂 —— 你可以制作一个匹配多种元素的规则，这是通过把多个选择器囊括成用逗号分隔的选择器（一组,）来达成；选择器还可以被“链”在一起，例如我要选择所有 class 是 “blah” 的元素, 但是当且仅当它在

元素里、并且仅当鼠标指针悬停在这个元素上的时候。

一个元素可以被多个选择器所匹配，因此，一个给定的属性可能被多个规则设置多次。 CSS 定义了哪个规则比其它规则更具优先级，则更具优先级的规则必定被应用：这被称为层叠算法（cascade algorithm），关于层叠算法的更多内容和运作原理见层叠和继承。

重要：如果链或组中的某个选择器无效，比如使用了未知的伪元素或伪类，整个组的选择器仍然是有效的，除了这个无效的将被忽略的选择器。

5.CSS语句

CSS语句：

1.CSS规则(CSS语句中的一种) - 是样式表的主要组成块;在CSS中最常见的块;

2.@-规则(At-rules) - 在CSS中被用来传递元数据、条件信息或其它描述性信息。
它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。
eg1:@charset和@import（元数据）
eg2:@media 或@document(条件信息，又被称为嵌套语句)
eg3:@font-face（描述性信息）
该@-规则向当前 CSS 导入其它 CSS 文件。
eg：@import 'custom.css'

3.嵌套语句 - 是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：
@media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
@supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
@document 只有当前页面匹配一些条件时才会应用该@-规则的内容。

eg：下列嵌套语句只有在页面宽度超过801像素时才会应用.
@media(min-width: 801px){
    body{

        margin: 0auto;
        width: 800px;
    }
}

重要：任何不是规则集或@-规则或嵌套语句的 CSS 语句都是无效的，并会因此被忽略。

二、其他

1.空格

空格实际上意味着一些空格，一些制表符以及一些新行。你可以通过添加空格使你的样式表更具可读性;

浏览器会倾向于忽略你 CSS 中的许多空格；许多空格在那的意义仅仅是增加了可读性;

始终确保至少用一个空格分隔不同的值，且保持属性名/值为一个连续的字符串;

2.注释

CSS中的注释以 /* 开始并以 */ 结束;

3.简写

一些属性比如 font，background，padding，border，和 margin 被称为简写属性—— 这是由于它们允许你在一行设置多个属性，从而节省时间并使代码更整洁;

eg1:
/* 在padding和margin这样的简写属性中，值赋值的顺序是top、right、bottom、left。 
它们还有其他简写方式，例如给padding两个值，则第一个值表示top/bottom，第二个值表示left/right */
padding: 10px 15px 15px 5px;
等价于：
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;


eg2:
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
等价于：
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

参考资料：

1.CSS语法

2.@-规则

展开全文 >>

CSS-基础介绍

2018-03-15

一、CSS(层叠样式表)简介

1.CSS概念

CSS - 是一种用于向用户指定文档如何呈现的语言–它们如何指定样式、布局等。

文档 - 通常是用标记语言结构化的文本文件–HTML是最常用的标记语言，其他标记语言如SVG、XML等。

呈现 - 文档给用户意味着将其转换为用户可用的形式。可视化呈现文档：Firefox、chrome、IE浏览器等，计算机屏幕、投影仪、打印机等。

CSS不是真正的编程语言，它是样式语言，允许你有选择地为HTML文档的元素添加样式。

CSS用于设计风格和布局（更改内容字体、颜色、大小、间距，将内容分为多列，添加动画，其他装饰效果）。（HTML用于定义内容的结构和语义）

2.CSS对HTML的影响

一个CSS规则由以下组成：

一组属性：属性的值更新了 HTML 的内容的显示方式。比如，我想让元素的宽度是其父元素的50％，或者元素背景变为红色。

一个选择器：它选择元素，这（些）元素是你想应用这些最新的属性值于其上的元素。比如，我想将我的CSS规则应用到我HTML文档中的所有段落上。

样式表中的一组CSS规则确定了网页如何显示。

二、CSS的使用

CSS-parsing

1.CSS在HTML的引用方法
在html文件中，head之中加入下列代码：

<head>
    ...
    <link rel="stylesheet" href="styles/style.css" type="text/css">
</head>

<body>
    <h1>这是一个CSSDemo标题</h1>
       <p>This is my first CSS example</p>
</body>

保存html文件，浏览器打开即可生效.

2.解析CSS

h1{
      color: blue;//将文本颜色设置为蓝色；
      background-color: yellow;//将背景颜色设置为黄色；
      border:1px solid black;//将标题（h1是标题元素）边框（border）设置为：1像素宽、实线（不是虚线、点线等）、颜色黑色。
}
p{
        color: red;//设置字体颜色为红色
}

第一条规则从 h1 选择器开始，这意味着它将其属性值应用到<h1>元素上，它包含三个属性和属性各自的值（每个属性/值对称为一个声明；

第二个规则从 p 选择器开始，这意味着它将其属性值应用到<p>元素上。

三、CSS工作原理

CSS-work-principle

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

1.浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。

2.浏览器显示 DOM 的内容。

四、关于DOM

1.DOM - 文档对象模型(Document Object Model)是一种树形结构。标记语言中的每个元素、属性、文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点，且这些子节点有兄弟（节点）。

2.表示DOM

<p>
      Let's use:
      <span>Cascading</span>
        <span>Style</span>
        <span>Sheets</span>
</p>

在该 DOM 中，我们的<p>元素所对应的节点是父节点。

<p>元素的子节点:一个文本节点 + <span>元素对应的节点。

这些 SPAN 结点也是父节点，子节点：它们各自的文本节点。

P
├─ "Let's use:"
├─ SPAN
|      └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
       └─ "Sheets"

3.应用CSS到DOM

span {
      border: 1px solid black;
      background-color: lime;
}

浏览器会解析 HTML 并通过它创建 DOM，之后解析 CSS。由于 CSS 只有一个可用的规则，该规则有一个span选择器，它会将这个规则应用到这三个的每一个上。

五、将CSS应用到HTML的方式：

1.外部样式表：此方法最佳(可以使用一个样式表来设置多个文档的样式，需要更新CSS时只要在一个地方更新)

当你将你的CSS保存在一个独立的扩展名为.css的文件中，并从HTML的<link>元素中引用它。

2.内部样式表：

指不使用外部CSS文件，将你的CSS放置在<style>元素中，该元素包含在HTML的head内:

<html>
    <head>
        ...
        <style>
            ...
            h1{
                border:1px solid black;
            }
            p{
                color:red;
            }
        </style>
    </head>
    <body>
        ...
    </body>
</html>

在某些情况有用（正在使用内容管理系统，不能修改CSS文件）;但它不如外部样式表高效 —— 在网站中，CSS 将需要在每个页面重复，并且需要更新时要更改的多个位置。

3.内联样式：仅影响一个元素的CSS声明，被style属性包括着

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <title>My CSS experiment</title>
      </head>
      <body>
            <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
            <p style="color:red;">This is my first CSS example</p>
      </body>
</html>

在非必要，否则不要这么做！这很难维护（你可能不得不在每份文档里更新多次同样的信息），并且它还混合了 CSS 表示的样式信息和 HTML 的结构信息，使 CSS 难以阅读和理解。

保持不同类型代码的分离和纯净使处理该代码的任何人工作更为容易。

参考资料：

1.CSS如何工作

展开全文 >>

HTML-表单

2018-03-15

一、表单基本指南
1.表单概述

2.表单构造

二、表单小部件
1.原生小部件
2.自定义表单小部件

三、验证和提交表单数据
1.发送表单数据

2.表单数据验证

四、表单样式指南
1.HTML表单样式
2.高级表单样式
3.表单部件的兼容性

参考资料：
1.HTML表单-英文
2.Runoob.com - HTML表单

展开全文 >>

HTML-表格

2018-03-14

一、表格概念

表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。

1.表格如何工作

表格的一个特点就是严格. 通过在行和列的标题之间进行视觉关联的方法，就可以让信息能够很简单地被解读出来。

2.表格风格

为了能够让表格在网页上有效, 你需要提供一些 CSS 的样式信息，以及尽可能好的 HTML 固定结构.

3.HTML表格的应用

HTML 表格 应该用于表格数据;

4.使用表格布局而不是用CSS布局的理由：

表格布局减少了视觉受损的用户的可访问性: 屏幕阅读器, 被盲人所使用, 解析存在于 HTML 页面上的标签，然后为用户读出其中的内容。因为对于布局来说，表格不是一个正确的工具， 使用的标记比使用 CSS 布局技术更复杂, 所以屏幕阅读器的输出会让他们的用户感到困惑。
表格会产生很多标签: 正如刚才提到的, 表格布局通常会比正确的布局技术涉及更复杂的标签结构，这会导致代码变得更难于编写、维护、调试.
表格不能自动响应: 当你使用正确的布局容器 (比如 <header>, <section>, <article>, 或是 <div>), 它们的默认宽度是父元素的 100%. 而表格的的默认大小是根据其内容而定的。因此，需要采取额外的措施来获取表格布局样式，以便有效地在各种设备上工作。

二、创建表格步骤

1.定义table样式

方式一：CSS

html {
    font-family: sans-serif;
}
table {
    border-collapse: collapse;
    border: 2px solid rgb(200,200,200);
    letter-spacing: 1px;
    font-size: 0.8rem;
}
td, th {
    border: 1px solid rgb(190,190,190);
    padding: 10px 20px;
}
th {
    background-color: rgb(235,235,235);
}
td {
    text-align: center;
}
tr:nth-child(even) td {
    background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
    background-color: rgb(245,245,245);
}
caption {
    padding: 10px;
}

方式二：在html的<head></head>中加入代码：

<style>
    html {
        font-family: sans-serif;
    }
    table {
        border-collapse: collapse;
        border: 2px solid rgb(200,200,200);
        letter-spacing: 1px;
        font-size: 0.8rem;
    }
    td, th {
        border: 1px solid rgb(190,190,190);
        padding: 10px 20px;
    }
    th {
        background-color: rgb(235,235,235);
    }
    td {
        text-align: center;
    }
    tr:nth-child(even) td {
        background-color: rgb(250,250,250);
    }
    tr:nth-child(odd) td {
        background-color: rgb(245,245,245);
    }
    caption {
        padding: 10px;
    }
</style>

2.在html的<body></body>中加入标签代码：

<body>
    <table>
        ...
    </table>
</body>

3.在表格中，最小的内容容器是单元格, 是通过元素创建的 (‘td’ 代表 ‘table data’). 把下面的内容添加到你的表格标签中:

<td>Hi, I'm your first cell.</td>

4.如果我们想要一行四个单元格，我们需要把这组标签拷贝三次，更新你表中的内容，让它看起来是这样的:

<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>

单元格不会放置在彼此的下方, 而是自动与同一行上的其他单元格对齐. 每个元素创建一个单独单元格，它们共同组成了第一行。我们添加的每个单元格都使行的长度变长。

5.新增一行：

如果想让这一行停止增加，并让单元格从第二行开始，我们需要使用元素 (‘tr’ 代表 ‘table row’).

<tr>
      <td>Hi, I'm your first cell.</td>
      <td>I'm your second cell.</td>
      <td>I'm your third cell.</td>
     <td>I'm your fourth cell.</td>
</tr>

可以继续增加至两行、三行。每一行都需要一个额外的<tr>元素来包装，每个单元格的内容都应该写在<td>中。

三、给table添加各种样式结构

1.添加标题:<caption>Dogs table</caption>

numbers-table-header

<table>
      <caption>Dogs table</caption>
      ...
</table>

2.表格中的标题是特殊的单元格，通常在行或列的开始处，定义行或列包含的数据类型;

为了将表格的标题在视觉上和语义上都能被识别为标题，你可以使用<th>元素 (‘th’ 代表 ‘table header’). 用法和<td>是一样的，除了它表示为标题，不是普通的单元格以外。

 <table>
    <caption>Dogs table</caption>
    <tr>
        <td>&nbsp;</td>
        <th>Knocky</th>
        <th>Flor</th>
        <th>Ella</th>
        <th>Juan</th>
     <tr>
        <th>Breed</th>
        <td>Jack Russell</td>
        <td>Poodle</td>
        <td>Streetdog</td>
        <td>Cocker Spaniel</td>
     </tr>
     <tr>
        <th>Age</th>
        <td>16</td>
        <td>9</td>
        <td>10</td>
        <td>5</td>
     </tr>
     <tr>
        <th>Owner</th>
        <td>Mother-in-law</td>
        <td>Me</td>
        <td>Me</td>
        <td>Sister-in-law</td>
     </tr>
     <tr>
        <th>Eating Habits</th>
        <td>Eats everyone's leftovers</td>
        <td>Nibbles at food</td>
        <td>Hearty eater</td>
        <td>Will eat till he explodes</td>
     </tr>
</table>

作用：

当标题明显突出的时候，你可以更加简单地找到你想找的数据，设计上也会看起来更好；
即使你不给表格添加你自己的样式，表格标题也会带有一些默认样式：加粗和居中，让标题可以突出显示；

3.添加<thead>、<tfoot>、<tbody>

<thead> 需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 <col>/<colgroup> 元素，那么 <thead>元素就需要放在它们的下面。

<tfoot> 需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead> 的下面。(浏览器仍将它呈现在表格的底部)

<tbody> 需要嵌套在 table 元素中，放置在 <thead>的下面或者是 <tfoot> 的下面，这取决于你如何设计你的结构。(<tfoot>放在<thead>下面也可以生效.)

table结构

 <style>
    tbody {
      font-size: 90%;
      font-style: italic;
    }
    tfoot {
      font-weight: bold;
    }
</style>

<table>
    <caption>How I chose to spend my money</caption>
    <thead>
        <tr>
            <th>Purchase</th>
            <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th colspan="4">SUM</th>
            <th>118</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/09</td>
            <td>Great idea</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/09</td>
            <td>Regrets</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/09</td>
            <td>Big regrets</td>
            <td>65</td>
        </tr>
        <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/09</td>
            <td>Good</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

四、单元格跨越多行和多列

1.表格中的标题和单元格有 colspan 和 rowspan 属性；这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。

比如:

colspan="2" 该单元格占2个单元格的宽度；//<th colspan="2">Animals</th>
rowspan="2" 该单元格占2个单元格的高度；//<th rowspan="2">Chicken</th>

more-row-more-col

<table>
    <caption>多行多列demo</caption>
        <tr>
          <th colspan="2">Animals</th>
        </tr>
        <tr>
          <th colspan="2">Hippopotamus</th>
        </tr>
        <tr>
          <th rowspan="2">Horse</th>
          <td>Mare</td>
        </tr>
        <tr>
          <td>Stallion</td>
        </tr>
        <tr>
          <th colspan="2">Crocodile</th>
        </tr>
        <tr>
          <th rowspan="2">Chicken</th>
          <td>Cock</td>
        </tr>
        <tr>
          <td>Rooster</td>
        </tr>
</table>

2.为表格中的列提供共同的样式

HTML有一种方法可以定义整列数据的样式信息：就是<col>和<colgroup>元素。它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个<td>或<th>上定义样式，或者使用一个复杂的选择器，比如 :nth-child()。

共同样式

方法一：不可取

<table>
      <tr>
            <th>Data 1</th>
            <th style="background-color: yellow">Data 2</th>
      </tr>
      <tr>
                <td>Calcutta</td>
            <td style="background-color: yellow">Orange</td>
      </tr>
      <tr>
            <td>Robots</td>
            <td style="background-color: yellow">Jazz</td>
      </tr>
</table>

方法二：推荐

<table>
      <colgroup>
            <col>//第一列不处理
            <col style="background-color: yellow">//第二列 背景颜色为黄色
      </colgroup>
      <tr>
            <th>Data 1</th>
            <th>Data 2</th>
      </tr>
      <tr>
            <td>Calcutta</td>
            <td>Orange</td>
      </tr>
      <tr>
            <td>Robots</td>
            <td>Jazz</td>
      </tr>
</table>

使用了两个 <col>来定义“列的样式”，每一个<col>都会制定每列的样式，对于第一列，没有采取任何样式，但是仍然需要添加一个空的 <col> 元素，如果不这样做，那么得到的样式就会应用到第一列上，这和预想的不一样。
表示从此行开始的"2"行一致：<col span="2">

如果你想把这种样式信息应用到每一列，我们可以只使用一个<col>元素，不过需要包含 span 属性：

<colgroup>
      <col style="background-color: yellow" span="2">
</colgroup>

tips:col中有多个属性样式时，用; 分号分开

<col style=" background-color:#DCC48E; border:4px solid #C1437A">

五、嵌套表格

在一个表格中嵌套另外一个表格是可能的，只要你包含完整的结构，包括<table>元素。这样通常是不建议的，因为这种做法会使标记看上去很难理解，对使用屏幕阅读的用户来说，可访问性也降低了。

嵌套表格

  <table id="table1">
        <caption>嵌套表格</caption>
        <tr>
              <th>title1</th>
              <th>title2</th>
              <th>title3</th>
        </tr>
        <tr>
              <td id="nested">
                    <table id="table2">
                          <tr>
                                <td>cell1</td>
                                <td>cell2</td>
                                <td>cell3</td>
                          </tr>
                    </table>
              </td>
              <td>cell2</td>
              <td>cell3</td>
        </tr>
        <tr>
              <td>cell4</td>
              <td>cell5</td>
              <td>cell6</td>
        </tr>
</table>

六、对于视力受损的用户的表格

1.使用列和行的标题 - <th>（tale header）

2.scope属性：可以添加在<th>元素中，用来帮助屏幕阅读设备更好地理解那些标题单元格，这个标题单元格到底是列标题呢，还是行标题。

scope 还有两个可选的值 ： colgroup 和 rowgroup。这些用于位于多个列或行的顶部的标题。

将列标题这样定义：

<thead>
      <tr>
            <th scope="col">Purchase</th>
            <th scope="col">Location</th>
            <th scope="col">Date</th>
            <th scope="col">Evaluation</th>
            <th scope="col">Cost (€)</th>
      </tr>
</thead>

每一行都可以这样定义一个行标题 (如果我们已经使用了 th 和 td 元素):

<tr>
      <th scope="row">Haircut</th>
      <td>Hairdresser</td>
      <td>12/09</td>
      <td>Great idea</td>
      <td>30</td>
</tr>

3.id和标题属性

如果要替代 scope 属性，可以使用 id 和 headers 属性来创造标题与单元格之间的联系。使用方法如下:

1）为每个<th> 元素添加一个 id (id 不能重复)。

2）为每个 <td> 元素添加一个 headers 属性。每个 headers 属性需要包含 th 元素的 id 。 如果这个单元格是属于一个 th 元素下的，那么就需要包含 th 元素的 id 的值，如果属于多个 th 元素，那么可以用空格分隔这些 id。

参考资料：
1.HTML表格基础
2.Table表格结构

展开全文 >>