文章目录
  1. 1. 一、盒子模型
  2. 2. 二、position定位
    1. 2.1. 基本概念
    2. 2.2. 相对定位
    3. 2.3. 绝对定位
    4. 2.4. 固定定位
  3. 3. 三、浮动定位和清理
    1. 3.1. 清除浮动

CSS最重要的概念是浮动、定位和盒子模型。这些基本概念控制元素在页面上安排和显示的方式,形成CSS的基本布局。

一、盒子模型

盒子模型是CSS的基石之一,它用来指定元素如何显示以及(在某种程度上)如何相互交互。页面上的每个元素都被看做一个矩形,这个矩形框由元素的内容、内边距、边框和外边距组成。

内边距出现在内容区域的周围。如果在元素上添加背景,那么背景用应用于内容和内边距组成的区域。因此,通常使用内边距在内容周围创建一个隔离带,使内容不会与背景混在一起。添加边框会在内边距的区域外边加一条线。这些线可以有多种样式,比如实现、虚线或点线。在边框外边的是外边距。外边距是透明的,一般使用它控制元素之间的间隔。

内边距、边框和外边距都是可选的,默认值为0. 但是许多元素由用于代理(如浏览器)样式表设置了默认的内边距和外边距。可以通过将元素的marginpadding设置为零来覆盖这些浏览器样式。

1
2
3
4
*{
margin: 0;
padding: 0;
}

在W3C标准下的CSS中,width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

令人遗憾的是,IE的早期版本(包括IE6)中的盒模型,在混杂模式(也叫怪异模式)中使用的是自己的非标准盒模型。这些浏览器的width属性不是内容的宽度,而是内容、内边距和边框的总和。这实际上很有道理,因为在现实世界中框具有固定尺寸,而且内边距是放在框里面的。添加的内边距越多,给内容留下的空间越少。尽管这符合逻辑,但是这些IE版本不合符规范,会造成严重的问题。

在CSS3中的box-sizing属性可以定义要使用哪种盒模型,但是除了一些特殊场合之外很少需要使用这个属性。

除此之外,外边距叠加也是一个很有意思的概念。简单的说:当两个或更多垂直的外边距相遇时,他们将形成一个外边距。这个外边距的高度等于这两个发生叠加的外边距的高度中的较大者

二、position定位

基本概念

p、h1、div等元素常常被称作块级元素,这意味这些元素显示为一块内容,即“block”。与之相反,strong、span、a、img等元素成为行内元素,因为他们的内容显示在行中,即“inline‘。

可以使用display属性改变生成的框的类型,也就是通过将display属性设置为block,可以让行内元素表现的像块级元素一样。还可以通过将display属性设置为none,让生成的元素根本没有框,这样,这个框机器所有的内容就不再显示,不占用文档中的空间。与之类似一个概念visibility: hidden则表示将元素隐藏,但是扔在网页中占据着位置。

CSS中有3种基本的定位机制:普通流浮动流绝对定位。除非专门指定,否则所有的框都在普通流中定位。顾名思义,普通流中的元素框的位置由元素在HTML中的位置决定。

块级框从上到下一个接一个地垂直排列,框之间的垂直距离由框的垂直外边距计算出来。

行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整他们的水平间距。但是,垂直内边距、边框和外边距不影响行内框的高度。同样,在行内框上设置显式的高度和宽度也没有影响。由一行形成的水平框称为“行框”,行框的高度总是足以容纳它包含的所有行内框。但是,设置行高可以增加这个框的高度。因此,修改行内框尺寸的唯一办法是修改行高或者水平框、内边距和外边距。

好在CSS2.1允许把元素的display属性设置为inline-block。顾名思义,这个声明让元素像行内元素一样水平的依次排列。但是,框的内容仍然符合块级框的行为,例如能够显式地设置宽度、高度、垂直内边距和外边距。

框可以按照HTML元素的嵌套方式包含其他框。大多数框由显式定义的元素形成。但是,在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在将一些文本添加到一个块级元素的开头时。即使没有把这些文本定义块级元素,它也会被当成块级元素对待:

1
2
3
4
<div>
some text
<p>Some more text</p>
</div>

相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让着个元素“相对于”它的起点移动。如果将top设置为20象素,那么框将出现在原位置顶部下面20象素的地方。如果将left设置为20象素,那么它将会在元素的左边创建20象素的空间,也就是元素像右移动。

看个例子:
http://codepen.io/FrankFan/pen/EabpZo

在使用相对定位时,无论是否移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框。

绝对定位

相对定位实际上被看做普通流定位模型的一部分,因为元素的位置是相对于它在普通流中的位置。与之相反,绝对定位使元素的位置与文档流无关,因此不占据空间。普通文档流中的其他元素的布局就像绝对定位的元素不存在时一样。

绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素,那么它的位置是相对于初始包含块的。根据用户代理的不同,初始包含块可能是画布或HTML。

用相对定位的框一样,绝对定位的框也可以从它的包含块向上、下、左、右移动。这提供了很大的灵活性,你可以直接将元素定位在页面上的任何位置。

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

因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的叠放次序。z-index的值越大,框在栈中的位置就越高。

固定定位

固定定位是绝对定位的一种。差异在于固定元素的包含块是视口(viewport)。这使我们能够创建总是出现在窗口中相同位置的浮动元素。例如携程的这个页面:http://campus.ctrip.com/右侧的报名框,无论页面怎么滚动, 它总是出现在固定的位置。

三、浮动定位和清理

浮动的框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在普通文档流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

可以使用float:left|right|both|none来设置框的浮动行为。

清除浮动

浮动会让元素脱离文档流,不再影响不浮动的元素。实际上并非完全如此。如果浮动的元素后面有一个文档流中的元素,那么这个元素的框会表现的像浮动根本不存在一样。但是,框的文本内容会受到浮动元素的影响,会移动以留出空间。

看个例子:http://codepen.io/FrankFan/pen/RNjBgO

方法一、添加一个多余的标记来清除浮动

方法二、overflow:hidden|auto, 副作用大,不推荐使用

方法三、使用:after伪类

1
2
3
4
<div class="news clear">
<img src='http://placehold.it/150x150' alt='my pic'>
<p>some text</p>
</div>
1
2
3
4
5
6
7
.clear:after{
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}

这个方法在大多数现代浏览器中是有效的,但是在IE6和更低版本中不起作用。

文章目录
  1. 1. 一、盒子模型
  2. 2. 二、position定位
    1. 2.1. 基本概念
    2. 2.2. 相对定位
    3. 2.3. 绝对定位
    4. 2.4. 固定定位
  3. 3. 三、浮动定位和清理
    1. 3.1. 清除浮动