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轴上

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

本文作者:vinoYang

时间: 2024-10-30 22:08:12

CSS入门经典-知识点摘录的相关文章

《HTML与CSS入门经典(第8版)》——1.5 用多种Web浏览器测试

1.5 用多种Web浏览器测试 刚刚讨论了Web内容交付的过程和Web服务器的获得,回到使用多种Web浏览器测试你的网站看上去有点奇怪.但是,在你离开并且学习所有关于使用HTML和CSS创建网站的知识之前,要记住这个非常重要的事实:你的网站的每个访问者可能使用和你不同的硬件和软件配置.他们的设备类型(台式机.笔记本.智能电话.iPhone).屏幕分辨率.浏览器类型.浏览器窗口大小.连接速度--记住,你不能控制访问者查看你的网站时的任何方面. 尽管所有Web浏览器以总体相同的方式处理信息,但是它们

《HTML与CSS入门经典(第8版)》——导读

https://yqfile.alicdn.com/4a4f68706cb7015c22ed2f3d9713314ffc525d37.png" > 前 言2009年,全世界估计有15亿人访问互联网,在美国就有2.2亿.加上3.38亿的中国用户,5500万德国用户,4800万英国用户,3800万俄罗斯用户,以及6700万巴西用户,你可以看到World Wide Web中"World"一词的含义.许多互联网用户还为Web创建了内容--你可能是其中之一!虽然精确地度量网页的数

《HTML与CSS入门经典(第8版)》——2.3 理解Web服务器上放置文件的位置

2.3 理解Web服务器上放置文件的位置 维护Web内容的一个重要方面是确定组织内容的方法--不仅是为了用户寻找,也为了你在服务器上的维护.将文件放到指定目录中将帮助你管理这些文件. 在你的Web服务器上命名和管理目录,并且开发文件维护规则,这完全取决于你.但是,维护一个精心组织的服务器使你在长期中更加有效地管理它的内容. 2.3.1 基本文件管理在你浏览Web时,你可能已经注意到URL随着你在网站之间浏览而变化.例如,如果你查看一个公司的网站并且单击图形化导航进入公司的产品或者服务,URL可能

《HTML与CSS入门经典(第8版)》——1.6 总结

1.6 总结 本章为你介绍了使用HTML标记文本文件以生成Web内容的概念.你还学到了Web内容有比"页面"更多的含义--Web内容还包含图像.音频和视频文件.所有这些内容存在于一个Web服务器上--一台通常远离你的计算机的远程机器.在你的计算机或者其他设备上,你使用Web浏览器请求.读取,并且最终在你的屏幕上显示Web内容. 你学习到在确定Web托管提供商是否适合你的需求时所应该考虑的标准.你还学习了在你的作品放置到Web服务器上时用多种浏览器测试的重要性.编写正确的.与标准兼容的H

《HTML与CSS入门经典(第8版)》——第1章 理解Web的工作方式1.1 HTML和万维网简史

第1章 理解Web的工作方式 本章中你将学到: 万维网(WWW)的简史 "网页(Web Page)"的含义,以及该术语不能反映所涉及的所有内容的原因 如何从你的个人计算机进入别人的浏览器 选择Web托管提供商的方法 不同的Web浏览器和设备类型对网面内容的影响在学习复杂的HTML和CSS之前,先对这些技术有坚实的理解是很重要的,这些技术可以将这些普通文本文件转化为通过计算机或者手持设备浏览网页时看到的丰富的多媒体显示. 如果不使用Web浏览器查看,包含HTML和CSS的文件则看不出效果

《HTML与CSS入门经典(第8版)》——2.5 测试Web内容

2.5 测试Web内容 当你传送文件到Web服务器或者将它们放置到可移动媒体用于本地浏览,你应该立即完全测试所有页面.下面的检查列表将帮助确保你的Web内容的表现符合你的预期.注意,某些术语现在对你来说有点不熟悉,但是随着你进一步学习并且创建更大的项目,可以再回到这一列表. 在传送文件之前,在你的计算机上测试以确保链接有效,内容反映你的视觉设计.在传送页面到Web服务器或者可移动设备之后,再次测试. 在可能的情况下用尽量多的浏览器进行这些测试--Chrome.Firefox.Internet E

《HTML与CSS入门经典(第8版)》——1.2 创建Web内容

1.2 创建Web内容 你可能已经注意到"Web内容"(而不是"网页")这个术语的使用--这么说内涵更丰富.尽管我们说"访问一个网页",但真实的意思是"在我们的计算机上查看所有某个地址上的文本和图像".我们阅读的文本,看到的图像由Web浏览器根据在单独的文件上找到的一些指令显示. 这些文件包含由HTML代码标示或者包围的文本,告诉浏览器如何显示文本--作为标题.作为段落.红色的字体等.一些HTML标示告诉浏览器显示一个图像或者

《HTML与CSS入门经典(第8版)》——1.3 理解Web内容交付

1.3 理解Web内容交付 在许多不同的地方发生了多个过程,最终产生了你看到的Web内容.这些过程发生得很快--在几毫秒之内--而且是在幕后发生的.换句话说,当我们认为所作的一切是打开一个Web浏览器,输入Web地址,并且立即看到请求的内容时,幕后的技术正在为我们辛勤地工作.图1.1展示了浏览器和服务器之间的基本交互. 但是,这个过程中有许多步骤,在你看到整个请求网站的内容之前,可能在浏览器和服务器中有多次往返. 假定你想要进行一次Google搜索,所以你认真地在地址栏输入 http://www

《HTML与CSS入门经典(第8版)》——2.6 总结

2.6 总结 你以创建一个非常简单的HTML文件开始了本章,将其用作传送文件到Web服务器的过程的测试文件.你学习了文件传送过程的工作方式以及进行这些传送所需要的软件类型(FTP客户端).你还学习了一些关于Web服务器目录结构和文件管理,以及给定的Web服务器目录中index.html文件的重要作用的知识.你还学到,可以在可移动媒体上分发内容,以及着手构造文件和目录,以达到不使用远程Web服务器查看内容的目标的方法.最后,你学习到了在向公众发布你的网站之前,测试文件的方法.