盒子模型

盒子

盒子关系（标准文档流）

• 行内元素：只可以设置左右外边距，上下内边距会影响相邻的元素
• 块状元素：两个垂直的margin会合并，大的margin起作用（margin塌陷 ）
• 元素嵌套的时候，设置在子元素上的margin会被父元素抢走，解决方案：设置父元素border或者父元素overflow

属性的继承问题

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

定位

相对定位

• 相对于自身原先的位置

绝对定位

• 相对于前面一个定位的祖先元素，直到html

固定定位

• 相对于屏幕

布局的相关属性

尺寸

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

内边距（补白/内补白）

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

外边距（边距/外部白）

• margin
• ......

布局的相关属性

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

定位属性

• position:static(默认值)/relative(相对定位)/absolute(绝对定位)/fixed(固定定位)

• 三个定位的优先级一样

• left
• right
• top
• bottom
• z-index 显示优先级。只能设置给已经定位的元素

隐藏元素

• visibility：hidden；隐藏了元素，但位置还在
• display:none;位置和元素均隐藏了