WEB开发的那些基础知识(3)--CSS的布局

 

CSS布局很难。这是我初学布局的感受，

想要画画一样将hmtl的各种元素排列起来呈现给用户，没有捷径，只能够多次尝试，总结经验，形成风格。

一个人的风格一旦形成，就会达到一种事半功倍的效果，当你想要实现什么样式的时候，脑海中就会立即浮现出一套实现的方法，先不论这个方法是不是最好的，起码它能解决问题。

 

想要做到这个，对基础的掌握，必不可少。最近看到有人说自己不懂这个不懂那个，是因为以前没接触过，但是等到用的时候，只要百度一下，1分钟就能搞定，以此认定现在招聘程序员的方式有问题。我对此表示不以为然。

没有足够的知识积累，很多事情你是做不到的，现在给你提出一个你从来没有接触过的概念，你对此很茫然，什么都不知道，却又信誓旦旦的说：只要给我一星期的时间我保证精通此道。

看过《棋魂》吗？进藤光问塔矢亮，把所有的围棋头衔都拿到手有多少钱。塔矢说：1亿3千多万。进藤光很激动，说那我也成为职业棋手好了，随便玩玩就能挣那么多钱。

塔矢亮当时就火了，说：你侮辱了所有下围棋的人，你知道有多少人为了成为职业棋手，不停的努力努力，放弃了一切，经历多少苦痛，辛酸，最终还是没能成功的，那些成为大师的人物都是身经百战，付出比别人更多的努力才能享有今天的荣誉，而你竟然说随便玩玩？

 

那些说用百度一分钟解决问题的人，也是侮辱了所有的开发人员。

 

难道百度一下你就有了几十年的积累，百度一下你就省去别人多少年的努力学习，百度一下，你就能成为专家大师了?

 

扯远了，回头来看我们的CSS布局。

CSS布局有3个概念：框，定位，浮动，

框模型有2种，块框(div,p,ul)和行框(span) 块框占据一行或多行，行框只会是一行

 

1、框模型

 

框模型是CSS的基石之一，页面上每个元素被看做一个矩形框，元素包括：内容(width,height)，填充（padding），边框(border)，和空白边(margin)

其中，填充(padding)和空白边(margin)的语法差不多，后跟若干数字，顺序为 上，右，下，左，他们的不同 如果该元素设置了背景色，margin是不会显示此背景色的，padding区域才会。

margin|padding: 5px 10px 15px 20px;表示上>5px，右>10px,下>15px,左>30px,

margin|padding: 5px 10px;表示 上下>5px,左右>10px

margin|padding: 10px;表示 上下左右>10px

 

空白边叠加

当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加

只有普通文档流中块框的垂直空白边才会发生空白边叠加。行内框、浮动框或绝对定位框之间的空白边不会叠加。

 

2、定位

 

p、h1或div等元素常常称为块级元素。这意味着这些元素显示为一块内容，即“块框”

与之相反，strong和span等元素称为行内元素，因为它们的内容显示在行中，即“行内框”.

可以使用display属性改变生成的框的类型。这意味着，通过将display属性设置为block，可以让行内元素（比如锚）表现得像块级元素一样。还可以通过将display属性设置为none，让生成的元素根本没有框。这样，这个框及其所有内容就不再显示，不占用文档中的空间。

 

CSS的三种基本定位机制: 普通流，浮动，绝对定位，默认是普通流定位

普通流

普通流中的块级框从上到下一个接一个的排列，框之间的垂直距离由框的空白边(margin)计算出来(注意空白边叠加)

由一行形成的水平框称为行框，行框的高度总是足以容纳它，包含的所有行内框。设置行高可以增加(不能降低）这个框的高度。

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

<div>Some text<p>Some more text</p></div>

在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

 

相对定位

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

#myBox{

position:relative;

left: 20px;

top: 20px;

}

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

 

绝对定位 position:relative;

绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块

 

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

 

固定定位 position:fixed

固定定位是绝对定位的一个子类别。博客评论表单采用固定定位，这使它在页面滚动时一直出现在屏幕上的相同位置。这有助于改进易用性，用户不必为了发表评论而一直滚动到页面底部。

 

浮动 float

浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘,想想一个布局分为上下层，浮动就在上层，它对下层没有任何影响，只是以包含框架的起点为起点(或者终点为起点)，你可以设置浮动的位置，top,left,right,bottom.

 

清理 clear:left|right|both

clear能够清理，让本标签跟在浮动层后而不是在浮动层下被覆盖掉。

 

以上属性在我们设计布局的时候是最常用的属性，他们之间的组合可以满足大部分页面需求