1. inline、block和display:inline-block
- block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。
- block元素通常被现实为独立的一块，会单独换一行；
- inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）： - 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。
1.display:block：
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
2.display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
3.display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
经典用法
display:inline比较经典的用法是用在 <ul> 下的 <li> 中 内联 block一般一个块占一行，除非float inline是自动排为一行，就象段内的文字一样，可成为多行。
display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。
display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。
2. position的五种取值为：
-
static:静态位置，无特殊位置，对象遵循正常文档流，left right top bottom 无用。这个是默认值哦！
-
relative：相对定位，对象遵循正常文档流，以正常理应所在的位置为基础根据left right top bottom 值进行偏移。在没有设置属性为relative时，对象在文档中会有个位置，设置了此值后，在文档中的位置根据left right top bottom 值进行重新定位。相对定位，相对的是自己本身应该在的位置！
-
absolute：绝对定位，对象脱离正常文档流，以static之外的最近父元素为参考点进行left right top bottom 值进行偏移。若不存在此属性，则以body为参考点移动，即以窗口为参考点。
-
fixed：固定定位，对象脱离正常文档流，以窗口即body对象为参考点，参考left right top bottom 值进行偏移。
-
inherit：从父元素继承位置。
所以，static和relative的对象都遵循正常文档流，而absolute和fixed是脱离正常稳定流的，在正常文档流中不占位置，有漂浮在页面上的感觉。
relative和absolute和fixed这三种属性的对象，设置left right top bottom 是有效的。
网友评论