精通CSS：第2章 可视化格式模型

第2章 为样式找到应用目标

 

选择器

常用选择器

1 类选择器

2 后代选择器

 

 

第三章 可视化格式模型

3个最重要的CSS概念是浮动、定位、盒模型,这些概念控制在页面上安排和显示元素的方式

 

3.1 盒模型概述

  

外边距叠加

    外边距：当二个或更多垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于二个发生叠加的外边距的高度中的较大者。

 

 

3.2定位

 

可视化格式模型

p h1 div 等元素常被称为块级元素,strong span 等元素称为行内元素。

 

css有3种基本定位机制：普通流、浮动、绝对定位

 

相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素相对于它的起点移动。

 

3.2.3 绝对定位

绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素，

那么它的位置是相对于初始包含块的。初始包含块可能是画布或html元素。

 

对于定位的主要问题是要记住每种定位的意义。相对定位是”相对于”元素在文档流中的初始位置，而绝对定位是相对于距离它最近的已定位祖先元素，如果不存在已定位的祖先元素，那么相对于初始包含块。

 

固定定位

 

 

3.2.4 浮动

 浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动的边缘。

 

 行框和清理

 浮云会让元素脱离文档流，不再影响不浮动的元素。实际上，并不完全如此。

 如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存一样。

 行框被缩短，给浮动图像留出空间。