首页 > 其他分享 >前端页面布局方式有哪些?

前端页面布局方式有哪些?

时间:2022-08-30 00:33:43浏览次数:80  
标签:元素 页面 哪些 标签 前端 布局 font size

1、固定布局

(1)适用于局部元素固定位置(例如:返回顶部的按钮固定在页面底部)

(2)适用于h5页面整个页面尺寸、元素比例的控制

2、流式布局

依据文档流本身的特点,不做控制,自上往下排布

3、弹性布局

em:相对于父元素标签上设置的font-size值得倍数单位。比如父元素标签上设置了font-size:10px,则2em就代表20px

rem:相对于HTML标签上设置的font-size值的倍数单位。比如HTML标签上设置了font-size:10px,则2rem就代表20px

这种方式可以统一元素在不同屏幕上展示的比例

4、自适应布局(响应式布局)

使用百分比代替具体的尺寸值,来实现元素在页面中所占比例可动态自适应

检测不同机型(宽度),并在不同机型下写媒体查询对应样式语句

5、flex布局

参考:Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

标签:元素,页面,哪些,标签,前端,布局,font,size
From: https://www.cnblogs.com/zhaoyingzhen/p/16637912.html

相关文章

  • 前端页面框架
    目录jQuery框架操作jQuery事件动画效果Bootstrap框架jQuery框架操作1.筛选器方法1.1下一个元素:next、nextAll($("#id").)nextUntil($("#id").nextUntil("#i2")两个指定......
  • 【2022.8.26】前端开发(5)
    学习内容概要JS获取用户输入值JS事件绑定jQuery类库jQuery常见操作内容详细JS获取用户输入普通数据(输入、选择) 标签对象.value文件数据(上传) 标签对象.......
  • 【2022.8.29】前端开发(6)
    学习内容概要jQuery更多操作(属性、样式、数据值)jQuery绑定事件jQuery简易动画效果Bootstrap页面框架内容详细筛选器方法$("#id").next()$("#id").nextAll()......
  • Vue面试题之如何解决vue第一次加载的时候 页面上使用的数据会闪烁?
    引起数据闪烁的原因:界面加载的时候会把节点直接挂载到文档树中,导致{{msg+"666"}}这个字符串会显示一下,vue对象生成data数据时候回去刷新界面把{{msg+"666"}}字符串替换成......
  • 给vue单页面绑定快捷键
    created(){//添加快捷键document.addEventListener('keyup',this.handleKeyUp)},destroyed(){//删除快捷键document.removeEventListene......
  • 大巧不工Web前端设计修炼之道 pdf
    高清扫描版下载链接:https://pan.baidu.com/s/11d2J72Dga2PRQGgpyswM4w点击这里获取提取码大巧不工Web前端设计修炼之道以Web前端设计的流程为主线,以前端设计的方法和原则......
  • 前端Day11
    Flex布局:当为父元素设置flex布局后,子元素的float、clear、vertical-align属性将失效! flex常见父项属性:flex-direction设置主轴方向:justify-content设置子元素排......
  • elementui table表格使用fixed固定表格后,页面放大缩小,表格错位问题。
        //计算页面放大缩小表格高度计算有误问题window.onresize=()=>{setTimeout(()=>{consttableList=this.$refs.tableList;......
  • 在 HTML 和 CSS 中隐藏元素有哪些不同的方法?
    在HTML和CSS中隐藏元素有哪些不同的方法?这些是使用HTML或CSS在网页中隐藏内容的一些主要方法。这些是使用HTML或CSS在网页中隐藏内容的一些主要方法。安......
  • 前端CSS的简单学习
    1:什么是CSSCascadingstyleSheet:层叠级联样式表CSS:字体,颜色,边距,宽度,背景图片。。。2:CSS的快速入门语法(推荐引入css的样式)建议使用独立的css文件,方便项目的维......