html&css布局与定位小结（headfirst html&css第11章）

流（flow）：浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。

块元素：自动换行，从上到下流

内联元素：水平方向上相互挨着，从左向右流直到没空间就换到下一行，总体上会从左上方流向右下方

注意：块元素的外边距在排列的时候会折叠，margin只保留有较大margin的那个块元素的值

 

浮动元素：浏览器会尽可能将其放在我们指定的位置（left or right），并从流中删除这个元素，好像它浮在这个页面上。

• 块元素会无视浮动元素（叠加排列），但是里面的内联元素会绕开浮动元素排列。因此浮动元素更像是水面上浮着一层油，水流绕开它排列。

• 要浮动一个元素，必须为这个元素设置一个宽度；而与其并排的块元素内容区，则不能直接设置宽度（否则页面无法正常扩展和收缩），需要设置外边距，规定自己到这个浮动元素有多远/要给这个浮动元素留下多少width

• 假如不想让块元素和浮动元素叠在一起，可以在块元素的样式里用clear：left/right/both规定这个块元素左边/右边/两边不准有浮动元素

• 一般只浮动块元素，很少浮动内联元素（除了图像）

• 一般有原则，右紧左松，就是把右边栏的宽度固定死，左边内容区随浏览器宽度变化而调整

 

流体布局（liquid layouts）：浏览器宽度调整时，布局扩展，填充可用空间；实现方法有很多，包括浮动布局，绝对布局

 

冻结布局（frozen layouts）：锁定元素，将其冻结在页面（浏览器变宽，右边会出现空白空间）

凝胶布局（Jello）：锁定页面中内容区的宽度，不过会将其居中；用auto属性扩展外边距

 

浮动布局（floating layout）：float元素很适合浮动图像，不过有个很大的缺点是，需要把浮动的div优先级在页面提高，移到页面主内容之上，但这个顺序不能反应元素的相对重要性；float也无法创造两个高度相同的列

绝对布局：用绝对定位得到流体布局，可以精确指定某个元素的位置；不过需要额外解决它和块元素重叠问题

 

绝对定位（absolute position）：在页面上精确定位元素

• 绝对定位完全从文档流中抽出，跟文档流不处于同一平面；

• 假如抽出多个绝对定位的元素浮在页面，它们彼此也不会在一个平面，通过其z-index属性进行判断（值越大，层级越高）

• Float虽然也能从流中抽出元素，但还是由浏览器决定其位置（我们传的指令只是靠左/靠右）；绝对定位则完全由coder决定该元素所在的位置

• 绝对定位跟别的块元素重叠，没有clear这种解决方案，所以还可以引入表格布局

 

position

static(默认)：元素正常放在文档流中

relative：元素正常流入页面，不过在页面上显示之前要进行偏移；元素还在页面流中，而且会按你指定的量偏移

fixed：元素放在相对于浏览器窗口的一个位置上（而不是相对于页面），即浏览器的大小/用户的缩放不影响fixed的位置；

 

表格布局（table-display layout）：缺点是增加div这种结构纯粹为了布局，没有为页面增加任何有意义的内容；滥用div是不对的

 

最外层的 div 样式为

div#tableContainer {

display:table;

}

每一行的div为

div#tableRow{

display:table-row;

}

这个是单行，只有一个div，div的id=“tablerow”时候的情况

多行的时候可以使用一个类

div.tableRow{}

 

对于行中各列

样式指定为

display:table-cell;

让大小不固定的元素垂直居中

 

表格布局调整边距用border-spacing，可以看成是常规元素的外边距

同时也不再需要div上的margin外边距