页面布局需要牢记的常识

定位问题中的display

display 为 block 时，默认宽度是100%，一旦我们将它设置为 inline-block 那么它的宽度将由内部的内容来决定或者我们也可以手动来为其设置宽度。
同样，当我们让一个元素 浮动起来 的时候，其宽度也会由内部的内容来决定（也可以进行手动设置），由于元素浮动，必然会导致父元素高度宽度为 0，我们这时候就需要给父元素加上 overflow:hidden 了，但是加上去之后，浮出来的部分如果超出父元素，就会被隐藏，我们经常会看到网页当中的一些 hover 效果就是鼠标放上去之后里面的内容是溢出父元素的，如果想实现这种效果，那么我们肯定就不能再使用 overflow:hidden 了，也就是不能使用浮动布局了，只能由 position 定位来进行实现。

组件化问题

当有两个或两个以上的元素构成一个组件时，我们最好给这个组件外部套上一个 包裹层，方便以后对组件进行定位。

关于定位中的absolute

将一个元素的 position 属性设置为 absolute 后，仅仅是是该元素脱离了标准文档流，但是对该元素的进一步定位我们还需要使用 top left 等坐标，并且对于该元素来说虽然脱离标准文档流，但是它仍然在其父元素内部，如果父元素有 overflow:hidden 那么该元素相对于父元素的 溢出部分 还是会隐藏的。