CSS布局方式-静态布局

原文链接:https://note.noxussj.top/?source=helloworld


什么是静态布局?

静态布局是平时开发中最常见的一种布局。就是给布局的元素设置固定的宽度和高度,无论你的屏幕分辨率是多大,它永远都是固定大小。通常使用 px 单位来实现静态布局。

优点

它的优点也比较明显,是一种最简单的布局方式,开发者只需要按照设计图 1:1 还原出来即可,无需考虑任何兼容性问题,所以工作量大大减少。

缺点

因为是固定的尺寸,所以在分辨率太低时会展示出滚动条,并且使得部分元素不在屏幕范围内,可读性比较差。

场景

传统的 Web 网站。

基础案例

以下简单模拟一个固定尺寸的元素,在不同设备/分辨率下展示的效果。

容器尺寸 640px * 320px

image

能够发现当前分辨率可以容下这个盒子,布局是正常的。

容器尺寸 150px * 320px

image

当分辨率过小就会发生问题了,例如盒子超出了该容器范围,在复杂的布局情况下还会导致布局错乱。

点赞
收藏

评论区

加载中...

相关推荐

啥是前端开发工程师必会的5种网页布局方法?

一、静态布局(staticlayout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特点不管浏览器尺寸具体是多少,网页布

CSS布局方式-自适应布局

原文链接:什么是自适应布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸可能会改变,但是原有的展示方式不会改变。通常使用%单位来实现自适应布局。优点页面能够兼容不同分辨率的屏幕。缺点因为开发的时候需要考虑多种分辨率下的情况,会额外增加一些工

想学会flex布局,我强烈推荐你来看看这篇文章!!

原文链接:为什么要使用flex布局?flex布局是目前比较流行的一种布局,因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其float、display、position这些属性的困扰。使用flex属性就可以写

绝对定位、相对定位、固定定位的区别有哪些?

原文链接:正常布局文档流布局方式,按照顺序一个个排列好,效果如下图:html.box1width:100px;height:100px;backgroundcolor:ff8077;.box2width:100px;height:100px;backgro

CSS布局方式-响应式布局

原文链接:什么是响应式布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸以及展示方式可能会改变。通常使用@media多媒体查询来实现响应式布局。优点页面能够兼容不同分辨率的屏幕。缺点工作量大,UI需要设计多个平台的版本。场景一套代码兼容we

CSS瀑布流布局

瀑布流布局是什么瀑布流布局是一种常见的网页布局方式,视觉上给人一种参差不齐的多栏的效果,常用于图片为主的版块,如下图。!(https://timgsa.baidu.com/timg?image&quality80&sizeb9999_10000&sec1589721778046&dib34a014e7481f1a5685