常见的css布局方式有:1.静态布局,传统布局方式;2.流式布局,可以进行适配调整;3.自适应布局,为不同屏幕分辨率设置不同布局;4.响应式布局,屏幕尺寸不同,页面显示的内容不同;5.弹性布局,确保元素拥有恰当行为;
常见的css布局方式有以下几种
1.静态布局
静态布局是传统的布局方式,网页中所有尺寸都是由px作为单位,设置了min-width,如果宽度小于就会出现滚动条,如果大于这个宽度则内容居中外加背景,静态布局具有布局简单、没有兼容性问题的特点。
2.流式布局
流式布局是指屏幕分辨率变化时,页面里元素的大小会变化而但布局不变,网页中主要的划分区域的尺寸使用百分数,分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,流式布局的特点是随着屏幕的改变,页面布局没有发生大的变化,可以进行适配调整。
3.自适应布局
自适应布局是为不同的屏幕分辨率分别定义不同的布局,自适应布局中可以通过改变屏幕分辨率可以切换不同的静态布局,且自适应布局中元素的位置会变化,可以解决空间利用率不高弊端。
4.响应式布局
响应式布局是指当屏幕尺寸不一样时,展示给用户的网页内容也不一样,可以使网站在手机或平板中有更好的浏览阅读体验,响应式布局中每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
5.弹性布局
弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当行为的布局方式,弹性布局中可以对一个容器中的子元素进行排列、对齐和分配空白空间,且支持所有的浏览器。