CSS学习第二篇

2016-11-15 本文已影响32人只敲代码不偷桃

这次主要是补充一些在实际开发（练习）中遇到的一些问题，记录下来，方便自己以后查找复习，如果恰巧也能捎带脚解决您的困惑，那也是荣幸之至。下面还是闲话少叙，直接上干活：
注意：本文也可以看做是《CSS设计指南》的读后感，如果你恰巧看过这本书，那有趣的事很多，不要在此浪费时光。

一、什么时候用ID，什么时候用类？

ID：id的用途是在页面中唯一地表示一个元素。正因为如次，同一个界面中的每一个ID属性，都必须是独一无二的值（身份证号码）。
类：类的目的是为了标识一组具有相同特征的元素。（人的名字，你叫张三，别人也可以叫张三）

不要乱用类

要避免Web开发专家Jeffrey Zeldman说的“类滥用----标记中的麻疹”出现。什么意思呢？就是说你不要像使用ID一样，每个类都指定一个不同的类名，然后再为每个类编写规则。尽量使用一些继承和上下文选择符来让不同的标签共享样式。

小结

ID的用途是在界面标记中唯一的标识一个特定的元素。它能够为我们编写CSS规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签。或者和javasprite交互时使用。
相对来说，类是可以应用给任意多个页面中的任意多个HTML元素的公共标识符，以便我们为这些元素应用相同的CSS样式，而且，使用类也让为不用标签名的元素应用相同的样式成为可能。

二、伪类

这里只是简单的总结一下，针对链接的伪类一共有四个：
Link：此时，链接就在那等着用户点击；
Visited：用户此前点击过这个链接；
Hover：鼠标指针悬停在连接上；
Active：链接正在被点击（鼠标在元素上按下，还没有释放）
使用实例：
a：link {color:block;}
a: visited {color:gray;}
a: hover{text-decoration:none;}
a:active{color:red;}
一个磨耗（:）表示伪类，两个冒号（::）表示CSS3新增的伪元素

2.2、focus伪类

:focus 选择器用于选取获得焦点的元素。(伪类)

三、围住浮动元素的三种方法

方法一、为父元素添加overflow:hidden

实际上，overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden 之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此之外，overflow:hidden 还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素。

方法二、同时浮动父元素

第二种促使父元素包围其浮动子元素的方法，是也让父元素浮动起来。浮动 section 以后，不管其子元素是否浮动，它都会紧紧地包围(也称收缩包裹)它的子元素。

方法三、添加非浮动的清除元素(clearfix 规则)

第三种强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。

.clearfix:after {  
  content:".";  
  display:block;  
  height:0;  
  visibility:hidden;  
  clear:both;
}

这个 clearfix 规则最早是由程序员 Tony Aslett 发明的，它只添加了一个清除的包含句点作为非浮动元素(必须得有内容，而句点是最小的内容)1。规则中的其他声明是为了确保这个伪元素没有高度，而且在页面上不可见。

好了，该回过头来作个总结了。要想强迫父元素包围其浮动的子元素有三种方式，哪三种?

为父元素应用 overflow:hidden
浮动父元素
在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元
素添加 clearfix 类来加(当然，样式表中得需要相应的 clearfix 规则)

这三种方法的使用要因地制宜。比如，不能在下拉菜单的顶级元素上应用overflow:hidden，否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素区域的外部，而这恰恰是 overflow:hidden 所要阻止的。再比如，不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，否则它就不会再居中，而是根据浮动值浮动到左边或右边了。

四、display

把原本dispaly属性值为inline（行内元素）转换成block（块级元素）可以让原先的行内元素填满其父元素
display 属性还有一个值有必要提一下，就是 none。把元素的 display 设定为 none，该元素及所有包含在其中的元素，都不会在页面中显示。它们原先占据的所有空间也都会被“回收”，就好像相关的标记根本不存在一样。与此相对的是 visibility属性，这个属性最常用的两个相对的值是 visible(默认值)和 hidden。把元素的visibility 设定为 hidden，元素会隐藏，但它占据的页面空间仍然“虚位以待”。

五、字体

5.1、字体大小

设定字体大小的单位有两种，一种是绝对单位，比如像素或点，另一种是相对单位，比如百分比或 em。下面我们就解释这两种单位的区别。
- em：（相对单位），浏览器样式表在设定所有元素的字体大小时，使用的都是相对单位 em，h1 被设定为 2em，h2 是 1.5em，p 是 1em。默认情况下，1em等于 16 像素，这也是 font-size 的基准大小。换算成绝对值，h1 就是 32 像素，h2是 24 像素，p 是 16 像素。
- px：像素点（绝对单位），这些以像素之类的绝对单位重新设定字体大小的元素，不会继承祖先元素的字体大小，它们会按照设定的大小显示。
注意：

如果你想使用 em，但又需要设定具体的像素大小，可以把 body 的 font-size 设定为62.5%。这样，就等于把基准大小从 16 像素改为 10 像素(16×62.5%=10)。然后， 3em 与像素的对应关系就十分明确了，比如 1em 等于 10 像素，1.5em 等于 15 像素，2em 等于 20 像素，等等。

5.2、Web字体

设定 Web 字体的方式有以下三种：
- 使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字体库；
  - 使用Google Web Fonts 的步骤。打开http://www.google.com/webfonts，找到想要的字体，单击 Add to Collection 按钮，然后单击页面底部的 Use 按钮(如图 4-14所示)。然后，Google 就会生成一个指向你刚刚选定字体的<link>标签，直接把它复制粘贴到你的 HTML 文件中即可。
    比如下面这个<link>标签就引用了 Anton、Niconne 和Prata 字体。
    <link href='http://fonts.googleapis.com/css?family=Anton|Niconne|Prata' rel='stylesheet' type='text/css'>
    把这个链接添加到页面的<head>标签中之后，就可以像使用其他字体一样使用这些Web 字体了。用户打开网页时，浏览器就会从 Google 的服务器得到相应字体。比如h3 {font: 20px "Prata", serif;}
- 使用事先打好包的@font-face 包；

@font-face {
  /*这就是将来在字体栈中引用的字体族的名字*/
  font-family:'UbuntuTitlingBold';
  src: url('../Fonts/UbuntuTitlingBold.ttf');
}

* 使用 Font Squirrel 用你自己的字体生成@font-face 包。（没有涉及，待补充）

六、一些标签

article：
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
aside
<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
section
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

七、遗漏知识点

7.1 盒子模型

注意啦，垂直外边距会叠加，也就是说垂直方向上，较宽的外边距决定两个元素最终离多远，水平外边距不叠加。对于水平相邻的元素，它们的水平间距是相邻外边距之和
盒模型结论：

一、没有(就是没有设置 width 的)宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。
二、为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。