CSS入门经典-知识点摘录



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

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



 

计算选择器的针对性

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

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

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

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

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

5、  忽略伪元素

.把每个变量中的数字连接在一起得到选择器的针对性。连接是一个编程术语,表示粘合。在这里,将abcd连接得到abcd,而不是计算abcd之和得到另一个变量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

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

 

 

浮动盒模型

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

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

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

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

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

 

*回顾相对定位:

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

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

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

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



版权声明:本文为博主原创文章,未经博主允许不得转载。