web前端学习

布局方式

1 float布局 

float:left/right  常用于左右布局

2 绝对布局

position:absolute , position:fixed

fixed:固定定位          absolute:绝对定位

区别很简单：

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动

可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化

3 流式布局

<meta name="viewport" content="width=device-width,initial-scale=1">  允许网页宽度自动调整

4 自适应布局

自适应布局是为了不同的屏幕分辨率分别定义不同的布局。

自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。

5 响应式布局

CSS MEDIA QUERY

响应式设计 和  自适应设计