CSS布局模型

CSS布局模型

流动模型

• 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。
• 内联元素都会在所处的包含元素内从左到右水平分布显示

浮动模型

• 将块状元素并排显示，需要将标签定义为浮动。可以在同一行两端显示元素需要对两个块状元素

层模型

• 有三种形式：绝对定位（absolute）相对定位（relative）固定定位（fixed）
• 绝对定位：这条语句的作用将元素从文档流中拖出来（原来的位置空出），然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
• 相对定位：它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置(原来的位置还有)。偏移前的位置保留不变。
• 固定定位：相对移动的坐标是视图（屏幕内的网页窗口）本身。类似网页两边的广告，一直在网页的固定位置。
• Relative与Absolute组合使用：父元素position属性设置为relative，子元素的position：设置为absolute。这样子元素就可以相对父元素偏移。