第三章： 可视化格式模型
要掌握的三个重要的CSS概念： 浮动 定位和盒模型。
本章，学习以下内容：
▼和模型的复杂性和特点
▼如何，为什么使用外边距叠加
▼绝对定位和相对定位的差异
▼浮动和清理是如何工作的
3.1盒模型概述
盒模型在以前CSS学习过，只是在这本书里面把补白属性padding叫做内边距
注意的一点： CSS2.1还包括outline属性。与border属性不同，轮廓绘制在元素框之上，所以他们不影响元素的大小和定位。 因此轮廓有助于修复bug。 大多数现代的浏览器（包括IE8）都支持轮廓，但是IE7和更低的版本不支持轮廓。
1.1IE和盒模型
早期的IE版本，IE6 ,在混杂模式中使用自己的非标准盒模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度总和。 所以添加的内边距越多，留下内容的空间就越小。 它把内边距padding认为是内容宽度的一部分，而不是在宽度以外添加的。 /*目前最好的方案就是回避此问题*/
1.2外边距的叠加
说的和原来看过的CSS书本上的一样，基本上属于重复内容，不在赘述。
但是有组要注意的一点： 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框、绝对定位框之间的外边距不会发生叠加。
外边距叠加的意义：
3.2定位概述
理解可视化格式模型和定位模型的细微差异。
2.1可视化格式模型
p,h1,div等元素常常称为块元素。 相反的strong和span称为行内元素。 应为它们的内容显示在行中，即行内框。
利用display属性设置为block或者是none可以行内元素表现的像块级元素一样， 也可以使它没有框，其内容不显示，不占用空间。
CSS有三种基本的定位机制： 普通流，浮动，和绝对定位。
顾名思义，普通六中的元素框位置由html中的位置决定。
块级框是从上到下一个一个的垂直排列，之间的距离是有垂直外边距计算出来的。
行内框在一行中水平排列。 可以用水平内边距，边框和外边距调整他们之间的水平距离。但是垂直内边距，边框和外边距不影响行内框的高度。 修改行内框尺寸的唯一办法就是行高或者水平边框，内边距或外边框。
CSS2.1中有个很重要的属性， display的属性值可以设置为inline-block，这个声明就是要元素像行内元素一样水平的依次排列。 但是框的内容依然符合块级框的行为。 过去浏览器对这个属性支持的很差，所以很少人使用它，现在好多浏览器都支持这个属性：inline-block相信几年后会出现用inline-block创建的有意思的布局。
框可以按照HTML元素的嵌套方式包含其他框。大多数有显式定义的元素形成。但一种情况下，既没有进行显式定义，也会创建块级元素。 比如把一些文本添加到块级元素DIV的开头。 没有把这些文本定义为块级元素，也会按照块级元素对待。
<div>
some text
<p>some more text</p>
</div>
在这种情况下，这个框称为匿名框，因为他不与专门定义的元素相关联。
2.2相对定位
相对定位是非常容易掌握的概念，只是在元素所在的位置上使它相对于这个元素的“起点”（普通流中元素的位置）移动。left right top bottom 控制移动方位和距离。
#mybox{position:relative;
left:20px;
top:20px;}
在使用相对定位的时候，无论元素是否移动，元素任然占据原来的空间。因此移动元素会导致它覆盖其他框。
2.3绝对定位
元素位置与文档流无关，因此不占据空间。 普通文档流中其它元素的布局就像绝对定位的元素不存在一样。
绝对元素的定位是相对于距离它最近的那个已定位的祖先元素确定的。如果没有已定位的祖先元素，那么他的位置是相对于初始包含块的。
因为绝对定位的框与文档流无关，所以可以覆盖页面上的其他元素。 可以通过z-index来控制这些元素的叠放次序。z-index的值越高，框在栈中的位置就越高。
人说的非常有意思的效果：
如若希望一个文本对准一个大框的右下角。
只需对包含框进行相对定位，在对相对于这个框对段落进行绝对定位：
#branding{
width:70em;
height:10em;
position:relative;
}
#branding.tel{
position:absolute;
right:1em;
bottom:1em;
text-align:right;}
<div id="branding">
<p class="tel">Tel:0845 838 6145</p>
</div>
相对于已相对定位的祖先元素对框进行绝对定位，在现代的大多数浏览器中实现的很好。
进行页面布局时，绝对定位是非常有效的， 尤其是在使用相对定位的祖先元素的情况下。 你完全只是用绝对定位创建出整个设计， 为此这些元素需要有固定的尺寸，将他们定位在任何地方都不会有重叠的风险。
绝对定位的框与文档流无关，不会影响普通流中的框。 但是尺寸的任何改变都会是绝对定位的框产生重叠。
固定定位：
固定定位是绝对定位的一种。 固定元素的包快是视口（viewport）。
不过IE6和更低的版本不支持固定定位。 IE7部分支持这个属性， 但实现中有许多bug。Jonathan Snook用javascript实现了这个效果。
2.4浮动
浮动框不在文档的普通流之中，所以文档中普通流的快框表现的就像浮动框不存在一样。浮动，之前自学过，所以不再赘述。
关于浮动几种状况：
这里把 行框和清理作为重点内容。
前面说了，浮动会脱离文档流，不在影响不浮动的元素。 实际的情况并不完全如此。
如果浮动元素后面有一个文档流中的元素，那么这个元素框会表现得这个浮动根本不存在一样。 但是框内的文本会受到浮动元素的影响，会移动以留出空间，围绕浮动框。 实际上创建浮动框使文本可以围绕图像。
想要阻止行框围绕在浮动框外面，要对行框的元素应用clear属性。 clear的属性值可以是left，right，both，或none。 表示那些边不应该挨着浮动框。
使用clear属性后的段落：
对元素的清理实际上为上面的额浮动元素流出了垂直空间。
这是一个有用的布局工具，让周围元素为浮动元素留出空间。 解决了上面的绝对定位的问题， 垂直高度的改变不会影响周围的元素，从而破坏了设计。
下面是一个图文混排的例子：
.news {
backgroung-color:grey;
border: solid 1px black;
}
.news img{
folat:left;
}
.mews p{
folat:right;
}
.clear{/*添加的清除浮动*/
clear:both;
}
<div class="news">
<img src="..." alt="my pic"/>
<p>some text</p>
<br class="clear"/>/*空元素 清理浮动*/
</div> /*没有清除浮动*/
清除浮动前后的效果图
还可以不对浮动的文本和图像进行处理，而是选择浮动div容器：
.news {
backgroung-color:grey;
border: solid 1px black;
folat:left;/*选择浮动div容器*/
}
.news img{
folat:left;
}
.mews p{
folat:right;
}
<div class="news">
<img src="..." alt="my pic"/>
<p>some text</p>
</div>
（这也会产生我们想要的效果，但是下一个元素会受到这个元素的影响）
overflow属性定义：默认情况下内容会溢出到框外，进入相邻空间。 用hidden或auto的话有一个有副作用， 会自动的清理包含的任何浮动元素。 这是个有用的元素清理方法，不会添加额外的标记， 但是此方法不适用于任何情况。 因为overflow的使用会影响他的表现， 会产生滚动条或者是截断内容。
还有两种方法是使用CSS和JAVASCCRIPT。
使用CSS： 综合使用：after伪类和内容声明，在指定的现有内容后面添加新的内容。 并且不让它占据空间或者显示。 所以将height的只设置为0，将visibility设置为hidden;因为被清理元素它们顶外编剧上添加了空间，所以生成的内容需要将她的display属性设置为block. 这样设置后，就可以对生成的内容进行清理：
.clear:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
这种方法在现代的大多数浏览器中是有效的但是IE6和更低版本的浏览器不起作用。 有各种解决方案，其中许多方案记录在www.positioniseverything.net/easyclearing.html中。
3.3小结
要掌握的三个重要的CSS概念： 浮动 定位和盒模型。
本章，学习以下内容：
▼和模型的复杂性和特点
▼如何，为什么使用外边距叠加
▼绝对定位和相对定位的差异
▼浮动和清理是如何工作的
3.1盒模型概述
盒模型在以前CSS学习过，只是在这本书里面把补白属性padding叫做内边距
注意的一点： CSS2.1还包括outline属性。与border属性不同，轮廓绘制在元素框之上，所以他们不影响元素的大小和定位。 因此轮廓有助于修复bug。 大多数现代的浏览器（包括IE8）都支持轮廓，但是IE7和更低的版本不支持轮廓。
1.1IE和盒模型
早期的IE版本，IE6 ,在混杂模式中使用自己的非标准盒模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度总和。 所以添加的内边距越多，留下内容的空间就越小。 它把内边距padding认为是内容宽度的一部分，而不是在宽度以外添加的。 /*目前最好的方案就是回避此问题*/
1.2外边距的叠加
说的和原来看过的CSS书本上的一样，基本上属于重复内容，不在赘述。
但是有组要注意的一点： 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框、绝对定位框之间的外边距不会发生叠加。
外边距叠加的意义：
3.2定位概述
理解可视化格式模型和定位模型的细微差异。
2.1可视化格式模型
p,h1,div等元素常常称为块元素。 相反的strong和span称为行内元素。 应为它们的内容显示在行中，即行内框。
利用display属性设置为block或者是none可以行内元素表现的像块级元素一样， 也可以使它没有框，其内容不显示，不占用空间。
CSS有三种基本的定位机制： 普通流，浮动，和绝对定位。
顾名思义，普通六中的元素框位置由html中的位置决定。
块级框是从上到下一个一个的垂直排列，之间的距离是有垂直外边距计算出来的。
行内框在一行中水平排列。 可以用水平内边距，边框和外边距调整他们之间的水平距离。但是垂直内边距，边框和外边距不影响行内框的高度。 修改行内框尺寸的唯一办法就是行高或者水平边框，内边距或外边框。
CSS2.1中有个很重要的属性， display的属性值可以设置为inline-block，这个声明就是要元素像行内元素一样水平的依次排列。 但是框的内容依然符合块级框的行为。 过去浏览器对这个属性支持的很差，所以很少人使用它，现在好多浏览器都支持这个属性：inline-block相信几年后会出现用inline-block创建的有意思的布局。
框可以按照HTML元素的嵌套方式包含其他框。大多数有显式定义的元素形成。但一种情况下，既没有进行显式定义，也会创建块级元素。 比如把一些文本添加到块级元素DIV的开头。 没有把这些文本定义为块级元素，也会按照块级元素对待。
<div>
some text
<p>some more text</p>
</div>
在这种情况下，这个框称为匿名框，因为他不与专门定义的元素相关联。
2.2相对定位
相对定位是非常容易掌握的概念，只是在元素所在的位置上使它相对于这个元素的“起点”（普通流中元素的位置）移动。left right top bottom 控制移动方位和距离。
#mybox{position:relative;
left:20px;
top:20px;}
在使用相对定位的时候，无论元素是否移动，元素任然占据原来的空间。因此移动元素会导致它覆盖其他框。
2.3绝对定位
元素位置与文档流无关，因此不占据空间。 普通文档流中其它元素的布局就像绝对定位的元素不存在一样。
绝对元素的定位是相对于距离它最近的那个已定位的祖先元素确定的。如果没有已定位的祖先元素，那么他的位置是相对于初始包含块的。
因为绝对定位的框与文档流无关，所以可以覆盖页面上的其他元素。 可以通过z-index来控制这些元素的叠放次序。z-index的值越高，框在栈中的位置就越高。
人说的非常有意思的效果：
如若希望一个文本对准一个大框的右下角。
只需对包含框进行相对定位，在对相对于这个框对段落进行绝对定位：
#branding{
width:70em;
height:10em;
position:relative;
}
#branding.tel{
position:absolute;
right:1em;
bottom:1em;
text-align:right;}
<div id="branding">
<p class="tel">Tel:0845 838 6145</p>
</div>
相对于已相对定位的祖先元素对框进行绝对定位，在现代的大多数浏览器中实现的很好。
进行页面布局时，绝对定位是非常有效的， 尤其是在使用相对定位的祖先元素的情况下。 你完全只是用绝对定位创建出整个设计， 为此这些元素需要有固定的尺寸，将他们定位在任何地方都不会有重叠的风险。
绝对定位的框与文档流无关，不会影响普通流中的框。 但是尺寸的任何改变都会是绝对定位的框产生重叠。
固定定位：
固定定位是绝对定位的一种。 固定元素的包快是视口（viewport）。
不过IE6和更低的版本不支持固定定位。 IE7部分支持这个属性， 但实现中有许多bug。Jonathan Snook用javascript实现了这个效果。
2.4浮动
浮动框不在文档的普通流之中，所以文档中普通流的快框表现的就像浮动框不存在一样。浮动，之前自学过，所以不再赘述。
关于浮动几种状况：
这里把 行框和清理作为重点内容。
前面说了，浮动会脱离文档流，不在影响不浮动的元素。 实际的情况并不完全如此。
如果浮动元素后面有一个文档流中的元素，那么这个元素框会表现得这个浮动根本不存在一样。 但是框内的文本会受到浮动元素的影响，会移动以留出空间，围绕浮动框。 实际上创建浮动框使文本可以围绕图像。
想要阻止行框围绕在浮动框外面，要对行框的元素应用clear属性。 clear的属性值可以是left，right，both，或none。 表示那些边不应该挨着浮动框。
使用clear属性后的段落：
对元素的清理实际上为上面的额浮动元素流出了垂直空间。
这是一个有用的布局工具，让周围元素为浮动元素留出空间。 解决了上面的绝对定位的问题， 垂直高度的改变不会影响周围的元素，从而破坏了设计。
下面是一个图文混排的例子：
.news {
backgroung-color:grey;
border: solid 1px black;
}
.news img{
folat:left;
}
.mews p{
folat:right;
}
.clear{/*添加的清除浮动*/
clear:both;
}
<div class="news">
<img src="..." alt="my pic"/>
<p>some text</p>
<br class="clear"/>/*空元素 清理浮动*/
</div> /*没有清除浮动*/
清除浮动前后的效果图
还可以不对浮动的文本和图像进行处理，而是选择浮动div容器：
.news {
backgroung-color:grey;
border: solid 1px black;
folat:left;/*选择浮动div容器*/
}
.news img{
folat:left;
}
.mews p{
folat:right;
}
<div class="news">
<img src="..." alt="my pic"/>
<p>some text</p>
</div>
（这也会产生我们想要的效果，但是下一个元素会受到这个元素的影响）
overflow属性定义：默认情况下内容会溢出到框外，进入相邻空间。 用hidden或auto的话有一个有副作用， 会自动的清理包含的任何浮动元素。 这是个有用的元素清理方法，不会添加额外的标记， 但是此方法不适用于任何情况。 因为overflow的使用会影响他的表现， 会产生滚动条或者是截断内容。
还有两种方法是使用CSS和JAVASCCRIPT。
使用CSS： 综合使用：after伪类和内容声明，在指定的现有内容后面添加新的内容。 并且不让它占据空间或者显示。 所以将height的只设置为0，将visibility设置为hidden;因为被清理元素它们顶外编剧上添加了空间，所以生成的内容需要将她的display属性设置为block. 这样设置后，就可以对生成的内容进行清理：
.clear:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
这种方法在现代的大多数浏览器中是有效的但是IE6和更低版本的浏览器不起作用。 有各种解决方案，其中许多方案记录在www.positioniseverything.net/easyclearing.html中。
3.3小结
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
