display布局

block

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 blockinline 。一个 block 元素通常被叫做块级元素。一个inline 元素通常被叫做行内元素。
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 pform 和HTML5中的新元素: headerfootersection 等等。

inline

span 是一个标准的行内元素。一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素,它可以被用作链接。

none

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它,例如 scriptdisplay:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间,但是设置成 visibility: hidden; 还会占据空间。

其他display值:

  1. /* <display-outside> values */
  2. display: block;
  3. display: inline;
  4. display: run-in;
  5. /* <display-inside> values */
  6. display: flow;
  7. display: flow-root;
  8. display: table;
  9. display: flex;
  10. display: grid;
  11. display: ruby;
  12. /* <display-outside> plus <display-inside> values */
  13. display: block flow;
  14. display: inline table;
  15. display: flex run-in;
  16. /* <display-listitem> values */
  17. display: list-item;
  18. display: list-item block;
  19. display: list-item inline;
  20. display: list-item flow;
  21. display: list-item flow-root;
  22. display: list-item block flow;
  23. display: list-item block flow-root;
  24. display: flow list-item block;
  25. /* <display-internal> values */
  26. display: table-row-group;
  27. display: table-header-group;
  28. display: table-footer-group;
  29. display: table-row;
  30. display: table-cell;
  31. display: table-column-group;
  32. display: table-column;
  33. display: table-caption;
  34. display: ruby-base;
  35. display: ruby-text;
  36. display: ruby-base-container;
  37. display: ruby-text-container;
  38. /* <display-box> values */
  39. display: contents;
  40. display: none;
  41. /* <display-legacy> values */
  42. display: inline-block;
  43. display: inline-table;
  44. display: inline-flex;
  45. display: inline-grid;
  46. /* Global values */
  47. display: inherit;
  48. display: initial;
  49. display: unset;


position定位

http://zh.learnlayout.com/toc.html