CSS布局方式-静态布局

菜园前端
• 阅读 201

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


什么是静态布局?

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

优点

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

缺点

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

场景

传统的 Web 网站。

基础案例

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

容器尺寸 640px * 320px

CSS布局方式-静态布局

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

容器尺寸 150px * 320px

CSS布局方式-静态布局

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

点赞
收藏
评论区
推荐文章
九路 九路
3年前
啥是前端开发工程师必会的5种网页布局方法?
一、静态布局(staticlayout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特点不管浏览器尺寸具体是多少,网页布
菜园前端 菜园前端
1年前
CSS布局方式-自适应布局
原文链接:什么是自适应布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸可能会改变,但是原有的展示方式不会改变。通常使用%单位来实现自适应布局。优点页面能够兼容不同分辨率的屏幕。缺点因为开发的时候需要考虑多种分辨率下的情况,会额外增加一些工
菜园前端 菜园前端
1年前
CSS布局方式-响应式布局
原文链接:什么是响应式布局?在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸以及展示方式可能会改变。通常使用@media多媒体查询来实现响应式布局。优点页面能够兼容不同分辨率的屏幕。缺点工作量大,UI需要设计多个平台的版本。场景一套代码兼容we
菜园前端 菜园前端
1年前
想学会flex布局,我强烈推荐你来看看这篇文章!!
原文链接:为什么要使用flex布局?flex布局是目前比较流行的一种布局,因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其float、display、position这些属性的困扰。使用flex属性就可以写
菜园前端 菜园前端
1年前
绝对定位、相对定位、固定定位的区别有哪些?
原文链接:正常布局文档流布局方式,按照顺序一个个排列好,效果如下图:html.box1width:100px;height:100px;backgroundcolor:ff8077;.box2width:100px;height:100px;backgro
Wesley13 Wesley13
2年前
CSS瀑布流布局
瀑布流布局是什么瀑布流布局是一种常见的网页布局方式,视觉上给人一种参差不齐的多栏的效果,常用于图片为主的版块,如下图。!(https://timgsa.baidu.com/timg?image&quality80&sizeb9999_10000&sec1589721778046&dib34a014e7481f1a5685
Stella981 Stella981
2年前
HTML前端开发之路——弹性盒模型
弹性盒模型(FlexibleBox)是一个CSS3新增布局模块,用于实现容器里项目的对齐、方向、排序;弹性盒模型最大的特效在于,能够动态的修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局;下面是弹性盒模型的元素基本概念:!(http://static.oschina.net/uploads/space/2016/0212/210
Stella981 Stella981
2年前
Flutter布局4
Row简介mainAxisAlignment:主轴布局方式,row主轴方向是水平方向crossAxisAlignment:交叉轴的布局方式,对于row来说就是垂直方向的布局方式
Stella981 Stella981
2年前
Grid布局和Flex布局
Flex布局(弹性布局)Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。采用Flex布局的元素,称为Flex容器。flexitem项目是Flex布局的元素,简称项目。容器:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis),单个项目占据的主轴空间叫做m
Stella981 Stella981
2年前
ConstraintLayout 约束布局
  约束布局ConstraintLayout  这种布局方式出现已经有一段时间了,刚出现的时候一直以为这种布局只是针对拖拽使用的布局,最近在新项目里看到了这种布局,又重新学习了这种布局,才发现以前真的是图样图森破啊,这种新的布局方式真的太好用了!1.引入使用之前需要添加这种布局的依赖implementation'com.an