盒子模型

盒子

盒子关系（标准文档流）

  • 行内元素。 只可以设置左右外边距。 上下内边距会影响相邻的圆
  • 块状元素呢 垂直margin会合并(margin坍陷)
  • 元素嵌套的时候，设置子元素的上margin会被父元素抢走， 解决方案：设置父元素border或者父元素设置overflow

属性的继承问题

  • 文本类、字体、颜色 子元素会继承父元素的设置
  • 布局类，边距、大小、边框、背景 不会继承

定位

相对定位

  • 相对于自身原先的位置

绝对定位

  • 相对于第一个定位的祖先元素，知道HTML

固定定位

  • 相对于屏幕

布局相关属性

尺寸

  • width
  • max-width
  • min-width
  • height
  • max-hegiht
  • min-height

内边距 补白 内补白

  • padding
  • padding-left
  • padding-right
  • padding-top
  • padding-bottom

外边距 边距 外补白

  • margin
  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

布局相关属性

  • display none/block/inline/inline-block
  • visibility hidden/visible/collapse
  • overflow visible/hidden/auto/scroll
  • overflow-x
  • overflow-y
  • float: left/right
  • clear: 清除浮动对后面的元素的影响 both/left/right

定位属性

  • position static(默认值)/relative(相对定位)/absolute(绝对定位)/fixed(固定定位)
  • left
  • right
  • top
  • bottom
  • z-index 显示优先级。 只能设置给已经定位的元素