当前位置: 首页 > news >正文

前端理论总结(css3)——页面布局方法

瀑布流

            优点:节省空间,外表美观,更有艺术性
                      对于触屏设备非常友好,通过向上滑动浏览
                      用户浏览时的观赏和思维不容易被打断,留存更容易
            缺点:用户无法了解内容总长度,对内容没有宏观掌控
                      用户无法了解现在所处的具体位置,不知道离终点还有多远
                      回溯时不容易定位到之前看到的内容
                      容易造成页面加载的负荷
                      容易造成用户浏览的疲劳,没有短暂的休息时间

盒模型

             在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border

弹性布局


             优点:应用恰当的弹性布局对用户十分友好。页面中所有的元素可以随着用户的偏好缩放
对于同时喜欢流动布局和固定宽度布局的设计师来说,弹性布局是完美的,因为在弹性布局中都能找到
             缺点:正式因为第一个优点,这种布局会产生很大额可用性问题。需要花更多时间理解和测试,让布局适应所有用户
             这种布局类型相对于其他两个(流动和固定宽度)更难设计

圣杯布局

        中间列为主内容区域,左右两列为侧边栏(父级div给 padding-left 和 padding-right 限制,让字不会被左边和右边挡住)

优点:优先展示center内容
缺点:center的最小宽度不能小于left的宽度,否则left会掉到下一行
           如果其中一列的内容高度比较长,其他两列的背景并不会自动填充

双飞翼

        中间列为主内容区域,左右两列为侧边栏(给中间的div添加一个小div,这个小div使用外边距)

优点:优先展示center内容
 缺点:center的最小宽度不能小于left的宽度,否则left会掉到下一行
            如果其中一列的内容高度比较长,其他两列的背景并不会自动填充

相关文章:

  • 野心、梦想与科幻——浅谈外星殖民与软件工程
  • canal: 连接kafka (docker)
  • 北京小蓝蜂科技有限公司 基本情况
  • SAP Fiori开发中的JavaScript基础知识9 - 代码注释,严格模式,JSON
  • Adobe Illustrator 2023 for Mac/Win:创意无限,设计无界
  • 【Qt】:坐标
  • 使用Docker Compose一键部署前后端分离项目(图文保姆级教程)
  • 基于Spring Boot的在线学习系统的设计与实现
  • 虚幻引擎资源加密方案解析
  • vue3+threejs新手从零开发卡牌游戏(十四):调整卡组位置,添加玩家生命值HP和法力值Mana信息
  • 在项目中缓存如何优化?SpringCache接口返回值的缓存【CachePut、CacheEvict、Cacheable】
  • 【Java八股面试系列】中间件-Redis
  • android 13 相册和拍照问题
  • css简单动画实现
  • 记录关于智能家居的路程的一个bug___Segmentation fault(段错误)
  • python3.6+scrapy+mysql 爬虫实战
  • canvas 高仿 Apple Watch 表盘
  • express如何解决request entity too large问题
  • HashMap ConcurrentHashMap
  • IE报vuex requires a Promise polyfill in this browser问题解决
  • js算法-归并排序(merge_sort)
  • Linux后台研发超实用命令总结
  • mongodb--安装和初步使用教程
  • PermissionScope Swift4 兼容问题
  • PHP的类修饰符与访问修饰符
  • redis学习笔记(三):列表、集合、有序集合
  • Sass 快速入门教程
  • tweak 支持第三方库
  • 从输入URL到页面加载发生了什么
  • 分布式熔断降级平台aegis
  • 高程读书笔记 第六章 面向对象程序设计
  • 技术胖1-4季视频复习— (看视频笔记)
  • 理清楚Vue的结构
  • 排序算法之--选择排序
  • 前端面试题总结
  • 新书推荐|Windows黑客编程技术详解
  • 鱼骨图 - 如何绘制?
  • ​用户画像从0到100的构建思路
  • #Spring-boot高级
  • #微信小程序:微信小程序常见的配置传值
  • (3)(3.5) 遥测无线电区域条例
  • (4)事件处理——(6)给.ready()回调函数传递一个参数(Passing an argument to the .ready() callback)...
  • (C语言)二分查找 超详细
  • (day6) 319. 灯泡开关
  • (react踩过的坑)antd 如何同时获取一个select 的value和 label值
  • (非本人原创)史记·柴静列传(r4笔记第65天)
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (七)Java对象在Hibernate持久化层的状态
  • (十)T检验-第一部分
  • (四)docker:为mysql和java jar运行环境创建同一网络,容器互联
  • (四)库存超卖案例实战——优化redis分布式锁
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • (转)关于pipe()的详细解析
  • (转)关于多人操作数据的处理策略