CSS入门经典-知识点摘录

Width属性的“收缩”和“扩展”适应

所有带width属性的元素都有一个默认的auto值，但在使用auto宽度时并不是所有元素都具有相同的效果。例如,<table>元素只是水平扩展以容纳其中的数据，这种方法称为“收缩适应”。另一方面，<div>元素则尽可能水平扩展其宽度，这种方法称为“扩展适应”。

计算选择器的针对性

作为对样式表优先级的一个补充，每个样式表中的选择器也存在优先级顺序。这种优先级由选择器的针对性决定。比如,id选择器最有针对性，通用选择器最为一般化。在他们之间，选择器的针对性使用以下公式计算：

1、 设一个变量a,若样式是通过(X)HTML的style属性应用的，a的值为1，否则为0.

2、 计算选择器中ID属性的数量，和为变量b的值。

3、 计算选择器中属性、伪类和类名的数量，三者之和为变量 c的值。

4、 计算选择器中元素名的数量，和为变量d的值。

5、 忽略伪元素

.把每个变量中的数字连接在一起得到选择器的针对性。连接是一个编程术语，表示粘合。在这里，将a、b、c、d连接得到abcd，而不是计算a、b、c、d之和得到另一个变量e。

在针对性图表中包括了前置0来表示连接是如何工作的，但实际上要省去。要决定优先级的次序，只需要简单地确定最大的数字。当两个或多个选择器有相同的优先级，最后一个将优先适用。Style属性比所有其他规则都优先。

！important规则

随着CSS中的层叠机制而来的是重写它的需求。这就是！important规则的来源。！important语法出现在声明中，在属性值之后，结束声明的分号之前。该语法由两个部分组成：一个感叹号作为分隔符，然后是important 关键字。分隔符标志着一个组成部分的结束，另一个组成部分的开始。在这里感叹号标志着声明的结束。Important关键字必须紧跟着出现，然后是结束整个声明的分号。

如：

P{

Background:lightblue !important;

}

该规则优先于style属性。

用margin属性来水平对齐元素

用atuo关键字和margin属性一起协作可以左对齐、居中对齐或者右对齐一个元素。

左对齐时margin-left设为0,margin-right设为auto，右对齐反之，居中对齐则左右都是auto。

但IE(有别于标准)可以使用text-align属性来对齐元素。这个技术在其他浏览器中不起作用。

宽度和高度的auto值

在默认情况下，width和height属性的值为auto，所以当不指定宽度和高度时，他们的值都就是auto关键字。Auto关键字会根据应用的元素类型发生改变。当它应用在<div>元素上时，意味着元素将横跨所有可用控件；垂直方向上，会扩展到容纳元素内部所有的内容，包括文本、图像或者其他盒子。具有这种行为的元素叫做块级元素有<div>、<p>、<h1>~<h6>、<form>和<ul>元素等。

浮动盒模型

浮动的元素会被重新定位，以便允许其他的内容在它们周围浮动，这种行为很独特。关于这种行为的描述如下：

1、 浮动元素的外边距不会折叠，不管它们如何靠近

2、 只有浮动元素后面的元素内容会被该浮动元素所影响。就是说浮动元素后面元素的背景、外边框、边框、内边距和宽度(盒模型和尺寸)都不受影响。

3、 浮动元素总是会被当作块级元素来对待

当一个元素浮动时，它表现得像一个块级元素，但有一个主要区别：它的大小设置变成水平方向和垂直方向都是收缩适应。这意味着在浮动一个<div>元素时，它的尺寸只会扩展到足够容纳里面的内容。

回顾相对定位：

1、 相对定位类似于静态定位，其元素保持在正财的文档流中，但这也是仅有的相似之处。

2、 相对定位元素可以用作绝对定位元素的参考点。

3、 相对定位元素可以接受4种偏移属性的组合方式有：top和left、top和right、bottom和left、bottom和right，浏览器将忽略除此之外的其他种组合方式。例如，不能对一个相对定位的元素同时使用top和bottom偏移属性。

4、 相对定位的内容可以堆叠和分层放置在Z轴上

原文发布时间为：2011-05-21

本文作者：vinoYang

本文来自云栖社区合作伙伴CSDN博客，了解相关信息可以关注CSDN博客。