《精通CSS:高级Web标准解决方案》学习笔记之二：可视化格式模型

1.CSS中最重要的概念是浮动、定位和框模型。 2.margin是透明的，一般用它来控制元素之间的间隔。 3.在CSS中，width和height指的是内容区域的宽度和高度。增加填充、边框和空白不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有10元素的空白边和5元素的填充，如果希望这个框达到100像素宽，就需要将内容宽度设置为70像素。 4.填充、边框和空白边可以应用于一个元素的所有边，也可以应用于单独的边。空白边可以是负值，并且在多种技术中都需要使用负值的空白边。 5.不幸的是，IE5.X和IE6在怪异模式中使用自己的非标准框模型。这些浏览器的width属性不是内容的宽度按，而是内容、填充和边框宽度的综合。 这会造成严重的问题。目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的填充，而是尝试将填充或空白边添加到元素的父元素或子元 素。 6.空白边叠加的含义是：当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度等于两个发生了叠加的空白边的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加。 7.当一个元素包含在另一个元素中时（假设没有填充或边框将空白边隔开），它们的顶和/或底空白边也发生叠加。 8.假设有一个空元素，它有空白边，但是没有边框或填充。在这种情况下，顶空白边与底空白边就碰到了一起，它们发生叠加。 9.p,h1或div等元素常常被称为块级元素。这意味着这些元素显示为一块内容；与之相反，strong和span等元素成为行内元素，因为它们的内容显示在行中。 10.可以使用display属性改变生成的框的类型。这意味着，通过将display属性设置为block,可以让行内元素（比如锚）表现得想块级元素 一样。还可以通过将display属性设置为none，让生成的元素根本没有框。这样，这个框及其所有内容不再显示，不占用文档中的空间。 11.CSS中有三种基本的定位机制：普通流、浮动定位和决定定位。除非特别指定，否则所有框都在普通流中定位。 12.块级框从上到下一个接一个地排列；框之间的垂直元素由框的垂直空白边计算出来。行内框在一行中水平放置。可以使用水平天空、边框和空白边调整他们的 水平间距。但是，垂直填充、边框和空白边不影响行内框的高度。行内框的高度总是足以容纳它所包含的所有行内框。但是，设置行高可以增加这个框的高度。 13.大多数框由显式定义的元素形成。但是，在一种情况下，及时没有进行显示定义，也会创建块级元素。这种情况发生在将一些文本添加到一个块级元素(比如 div)的开头时。即使没把这些文本定义为段落，它也会被当成段落对待。在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。 14.如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将top 设置为20像素，那么框将出现在原位置顶部下面20像素的地方。如果将left设置为20像素，那么会在元素左边创建20像素的空间，也就是将元素向右移 动。 15.使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此移动元素会导致它覆盖其他框。 16.相对定位实际被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。 17.对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位的祖先元素，如果 不存在已定位的祖先元素，那么是最初的包含块。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制 这些框的堆放次序。z-index值越高，框在堆中的位置就越高。 18.最后一种定位模型是浮动模型。浮动的框可以左右移动，知道它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不再文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 19.浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。实际上，创建浮动框使文本可以围绕图片。