盒子+定位+布局

盒子模型

盒子

盒子关系（标准文档流）

• 行内元素。 只可以设置左右外边距。 上下内边距会影响相邻的圆
• 块状元素呢 垂直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 显示优先级。 只能设置给已经定位的元素