css网页布局方式有哪些?

css网页布局方式有哪些?下面本篇文章和大家谈谈几种常用的布局方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1、固定布局

宽度,高度固定,页面被一个固定网页包裹,容器不能移动,页面的宽高不随页面的变化而变化,这种布局大家比较熟悉,这种方式一度成为页面布局的主流方式,这样布局设计简单,更容易定义,但是由于屏幕尺寸的不同,特别是移动端各个设备的不同,这种布局在灵活性方式可用度不高。

1.jpg

2、流式布局

以百分比为主要形式,让屏幕自适应,这种布局方式定义灵活,能够根据屏幕的情况变化,但是这种方式设计的效果不太容易控制,一般移动端结合rem用的比较多,pc端用的不是非常多

1.png

3、弹性布局

浮动部分和清楚浮动部分主要是兼容添加的一些代码,重点看弹性布局的部分,弹性布局相对前两种出现的比较晚些,但是弹性布局功能还是很强大的,布局也非常方便,但是此布局形式在pc端并不推荐使用,ie9以下浏览器均不支持,另外火狐等一些浏览器也需要做兼容,移动端目前绝大部分浏览器都已经支持弹性布局,在移动端大家可以尝试使用。

3.webp.jpg

4、浮动布局

浮动布局关键词,float,可以设置left或者right,他使元素脱离文档流进而达到布局的目的,也是目前一个比较主流的布局方式,但是使用浮动的结束以后,别忘记清除浮动哦。

5、定位布局

定位布局也是目前比较常用的一种布局方式,关键词: position: fixed;固定布局,将元素固定在一个位置,不随页面移动而移动,position: relative;相对定位,相对于元素自身定位,不脱离文档流,相当于定义一个参照物,一般和绝对定位结合使用,position: absolute;绝对定位,脱离文档流,一般和相对定位结合使用,如果不定义相对定义,将会相对于整个浏览器定位,所以定位布局,一般情况下都是相对定位和绝对定位结合着来,相当定位相当于划定一个势力范围,制定一个封闭的容器块,然后绝对定位就行对于相对定位来定位,从而达到有效的布局。

4.webp.jpg

6.margin和padding

margin是外边距,padding内边距,外边距是盒子与盒子之间的距离,内边距是盒子的边和盒子内部元素的距离,因此在使用的时候应该有选择的使用,另外margin会出现吃边距的情况

ps:没有一成不变的布局方式,也没有任何一种方式能够满足各方面的需求,大家可以多积累些经验,根据自己的需要使用最有效布局方式做出最帅最美的页面。

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css网页布局方式有哪些?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏