盒子模型

盒子

盒子关系（标准文档流）

  • 行内元素。 只可以设置左右外边距。 上下内边距会影响相邻的圆

  • 块状元素呢 垂直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 显示优先级。 只能设置给已经定位的元素