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。
选择器 |
选择器类型 |
针对性 |
* |
通用选择器 |
0000 (a=0,b=0,c=0,d=0) |
li |
元素名 |
0001 (a=0,b=0,c=0,d=1) |
ul li |
元素名 |
0002 (a=0,b=0,c=0,d=2) |
div h1+p |
元素名 |
0003 (a=0,b=0,c=0,d=3) |
input[type=’text’] |
元素名+属性 |
0011 (a=0,b=0,c=1,d=1) |
.someclass |
类名 |
0010 (a=0,b=0,c=1,d=0) |
div.someclass |
元素名+类名 |
0011 (a=0,b=0,c=1,d=1) |
div.someclass.someother |
元素名+类名+类名 |
0021 (a=0,b=0,c=2,d=1) |
#someid |
ID名 |
0100 (a=0,b=1,c=0,d=0) |
div#someid |
元素名+ID名 |
0101 (a=0,b=1,c=0,d=1) |
style(属性) |
style(属性) |
1000 (a=1,b=0,c=0,d=0) |
在针对性图表中包括了前置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轴上