布局方式
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
响应式设计 和 自适应设计