Codecademy - CSS笔记

• 位置属性：
  1. display: block —— 默认值。表示当前元素占用页面的所有宽度
  2. display: inline-block —— 允许其他元素共用同一行，但元素依旧是一个block，该元素宽度取决于设置的值。
  3. display: inline —— 允许其他元素共用同一行，但是该元素不再是一个block，该元素宽度取决于实际内容。若没内容，则可能会空。
  4. display: none —— 该元素及它的子元素都在页面上消失。
• margin, border, padding, content：
  1. margin：该元素与其他元素之间的距离
  2. border：元素的边缘
  3. padding：元素内容与边框间的距离
  4. content：实际内容
• Floating：如何页面上的元素都有float属性，那么他们会知道彼此的位置，所以他们会按顺序排列，不会覆盖其他的元素。
  • 当一些non-floating元素和大的floating元素在一起的时候，那些floating元素很可能就会覆盖掉那些non-floating元素。这个时候，我们就要用clear，来清除。clear: left，会去查找页面内所有包含float: left元素，然后将该元素会移动至float: left元素的最下方。clear: right同理；还有clear: both。
• 位置类型：Absolute, Relatvie, Fixed
  1. static是位置类型的默认值
  2. position: absolute ——
     • 如果它的父类设置了position属性（absolute或者relative）时，那么它就根据父类的位置定位。
     • 如果它的父类没有设置position属性，则以body为定位对象
  3. position: relative —— 根据本身的原本位置（没有设置任何position时的位置）进行定位。
  4. position: fixed —— 根据当前窗口位置定位