css基础--浅谈几种常用的布局方式
1.固定布局
宽度,高度固定,页面被一个固定网页包裹,容器不能移动,页面的宽高不随页面的变化而变化,这种布局大家比较熟悉,这种方式一度成为页面布局的主流方式,这样布局设计简单,更容易定义,但是由于屏幕尺寸的不同,特别是移动端各个设备的不同,这种布局在灵活性方式可用度不高。
2.流式布局
以百分比为主要形式,让屏幕自适应,这种布局方式定义灵活,能够根据屏幕的情况变化,但是这种方式设计的效果不太容易控制,一般移动端结合rem用的比较多,pc端用的不是非常多
3.弹性布局
浮动部分和清楚浮动部分主要是兼容添加的一些代码,重点看弹性布局的部分,弹性布局相对前两种出现的比较晚些,但是弹性布局功能还是很强大的,布局也非常方便,但是此布局形式在pc端并不推荐使用,ie9以下浏览器均不支持,另外火狐等一些浏览器也需要做兼容,移动端目前绝大部分浏览器都已经支持弹性布局,在移动端大家可以尝试使用。
4.浮动布局
浮动布局关键词,float,可以设置left或者right,他使元素脱离文档流进而达到布局的目的,也是目前一个比较主流的布局方式,但是使用浮动的结束以后,别忘记清除浮动哦。
5.定位布局
定位布局也是目前比较常用的一种布局方式,关键词: position: fixed;固定布局,将元素固定在一个位置,不随页面移动而移动,position: relative;相对定位,相对于元素自身定位,不脱离文档流,相当于定义一个参照物,一般和绝对定位结合使用,position: absolute;绝对定位,脱离文档流,一般和相对定位结合使用,如果不定义相对定义,将会相对于整个浏览器定位,所以定位布局,一般情况下都是相对定位和绝对定位结合着来,相当定位相当于划定一个势力范围,制定一个封闭的容器块,然后绝对定位就行对于相对定位来定位,从而达到有效的布局。
6.margin和padding
margin是外边距,padding内边距,外边距是盒子与盒子之间的距离,内边距是盒子的边和盒子内部元素的距离,因此在使用的时候应该有选择的使用,另外margin会出现吃边距的情况
ps:没有一成不变的布局方式,也没有任何一种方式能够满足各方面的需求,大家可以多积累些经验,根据自己的需要使用最有效布局方式做出最帅最美的页面。