快速掌握前端页面布局思维要点

最新推荐文章于 2022-09-01 11:06:48 发布
最新推荐文章于 2022-09-01 11:06:48 发布
阅读量1k 收藏 5
点赞数 2
分类专栏： css 思维 前端 文章标签： css 定位 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43510072/article/details/109566051
版权
本文旨在帮助读者快速掌握前端页面布局思维，强调布局的底层理解，即浏览器如何将HTML渲染成DOM树。文章提出了布局的几个关键步骤，包括整体结构分块和局部结构分块，推荐使用弹性盒子，并强调提前规划布局的重要性。此外，通过实际项目案例，展示了从产品经理的原型图开始，如何自顶向下逐步细化布局，并特别指出垂直水平居中是常用的布局技巧。
摘要由CSDN通过智能技术生成

快速掌握前端页面布局思维要点

所要达到的标准：

对于前端的布局能做到信手拈来的程度，就说明已经初见成效了。

（到了这种程度，自己会知道的）

底层：

浏览器会将HTML标签渲染成 dom 树，形成一种树形的结构，再由渲染引擎解析绘制。

对于布局指导视为归结为以下步骤

  • 整体结构分块，如弹性盒子

  • 局部结构分块，如弹性盒子

  • 自顶向下、逐步细化

    谨记：不要着急动手！！！越早规划好整体布局，后期修改的代码就越少，成本就越低。

实际项目

  • 产品经理和UI/UE设计好原型图

  • 划分好整体

  • 自顶向下，逐步细化

谨记：方案必须时时刻刻确认是确定的！！ 否者中途返工成本巨高。

diplay

值 作用 应
最低0.47元/天 解锁文章
流氓大哭
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发不会布局怎么办？
ysxjy2020的博客
11-10 516
作为前端开发工程师，布局方式有多种，针对不同的情况有不一样的处理，但是很多初学的同学都不知道这些情况，但是其实了解之后，就会发现布局方式还是很常见很好理解的。 一、静态布局（static layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于p
GR-011_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip
08-02
总的来说，"GR-011_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"是一个全面的资源集合，不仅涵盖了PSD模板设计的基本要素，还涉及到网页设计的流程和技术要点，对于提升设计师的技能和效率具有很大...
前端页面布局整体思路
m0_52861684的博客
09-01 372
布局思路。
前端工程师应该具备的三种思维
chenmoquan的专栏
09-16 1029
如果你是一个天才等级的工程师（马上可以离开），可以独立完成一个很多事情，你可以是一个怪咖，因为我相信没有一个人不会不佩服你。但现实归现实，多数人都不是天才，而我们在职场上也不是单打独斗，我们需要团队合作，需要协调和配合，需要考虑除了代码以外的更多事情。 　　前端工程师，也不仅仅只是负责接资料，捞数据，做个回应。当然只做这些也并没有不对，但我们需要和后端工程师沟通，我们也需要和设计沟通，也需要
关于前端布局的思考
github_38849342的博客
06-20 233
在刷百度前端技术学院题目时的思考1.两栏布局 a.通常情况下比较喜欢使用左浮动加右浮动，给两个浮动块都加上宽度，只要一行能够放下就可以，放不下就会跑到下一行中。这时候给右边的元素加margin，它是相对于左浮动元素来确定margin的距离的。因为这俩是在一个层级。 b.或者左浮动但是右面的元素不加浮动，但是右边的元素需要设置margin-left值，而这个值是相对于父级边框的，而不是相对于左边的元素
页面布局思维
u010865136的专栏
02-05 504
搭建页面时，使用div+css达不到自己想要的效果，那就果断使用table代替，当然，要去为自己的div+css充电~.~
BL-348_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip
最新发布
08-02
《PSD网页模板及其在前端页面设计中的应用》 在当今的互联网世界中，网站设计是企业形象...同时，对于学习网页设计和前端技术的人来说，这是一个很好的实践素材库，能够帮助他们理解和掌握网页设计的流程和技术要点。
GR-226_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip
08-02
本文将深入探讨“GR-226_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip”这一资源包，解析其中蕴含的设计理念和技术要点。 首先，我们要理解PSD模板的含义。PSD是Adobe Photoshop软件的默认文件格式...
web前端简历简历简历
09-20
4. **Bootstrap框架**：具备Bootstrap框架的实践经验，能利用其快速搭建响应式布局，提升用户体验。 5. **AJAX技术**：精通AJAX的应用，能够在不刷新页面的情况下与后端服务交互，实现动态数据更新。 6. **Angular...
前端学习，必须要注意的知识要点.docx
11-23
学习jQuery，可以快速掌握基本的DOM操作、事件绑定、动画效果和Ajax请求。虽然现在许多现代框架已经取代了jQuery的部分功能，但对于初学者，jQuery仍然是理解JavaScript和DOM操作的好工具。 五、Vue和React框架 Vue...
web页面布局思想
dianpi2993的博客
01-09 162
一、盒子模型 网页可以看成由一个个"盒子"组成，如图： 由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来，先将这些“盒子”的位置样式确定下来，然后在分别确定“盒子”内的样式，绝对不会跑 盒子模型的相关属性 margin（外...
快速理解页面布局中浮动和定位的概念
weixin_44291183的博客
03-16 307
浮动和定位 浮动 浮动标签：float； 其具有属性有：left/right/none float:left;左浮动 float:right;右浮动 float:none;没有任何效果 使用浮动后，页面会有两层：普通文档流和浮动层；当元素浮动后，元素大小不变， ...
前端布局总结
一头秃发丶的博客
04-08 285
目录1.1静态布局布局特点：设计方法：优点：缺点：1.2 弹性布局（Flexbox）优点：缺点：1.3 自适应布局（bootstrap）优点：缺点：1、布局特点2、设计方法1.4 流式布局（Fluid）1.缺点：2. 设计方法1.5 响应式布局布局特点：设计方法：优点：缺点：HTML代码：css代码： 1.1静态布局 静态布局就是传统的网站布局方式，也就是刚刚入门的小白使用的页面布局方式，...
前端布局的一些基本知识和思路
beck4855255的博客
02-26 385
[size=large]1.盒子模型[/size] 布局前我们首先了解盒子模型，这是布局的基石。 网上很多内容没有讲解清楚盒子模型，引起了不少误解。 一个DIV在布局的概念中自内到外包含五层含义。 1）文本元素本身的内容。 2）padding所占空间 3）border所占空间 4）margin所占空间 5）position中top,left所占空间。 图示： ...
页面布局有哪些技巧？前端页面怎么写？
a158559681的博客
04-02 1317
同学们在学习完HTML+CSS之后就摩拳擦掌的想要尝试写一个静态页面了，但真正上手的时候就不知道该怎么做了，今天小千就来教大家页面布局的技巧，帮助大家开发一个静态页面。 我们通过一个具体的案例来给大家说一下布局的一些技巧： 假设，这是我们要布局的一个首页： 第一步：看 拿到一个网页或一个整站的网页后，我们应该大致浏览一遍，做到心里有数（例如网页的复杂程度，交互效果等） 第二步：找出网页的版心部分 第三步：划分网页的版块 思路：运用我们最熟悉的div标签将最大的版块划分出来 第四步：在大板块里面划分小版
使用这种技巧，可以大大地提高前端布局效率——2020
JNPF快速开发平台的博客
09-04 389
在布局中，对于每块功能的 DOM 结构，我们一般使用一个带有wrapper类元素把它包裹起来，让代码或者网页内容更易于阅读。为此，我们一般使用wrapper或者container。在CSS 中使用wrapper可能有多种方式，这些方式中，有些会带来一些问题。 在本文中，将介绍 CSS中 的wrapper布局，它们如何工作，如何使用它们以及何时不使用它们。 请注意，在本文中，可能会提到wrapper和container这两个术语，它们的含义相同。 wrapper 简介 当我们说到wrap...
前端布局问题汇总
万少博-FE
01-04 733
在实际项目的开发过程中，经常会遇到很多很庞杂的问题需要实时处理，加上项目时间节点的控制，处理问题的效率和最优方案的选取是程序员需要不断提升的技能。因此，每一位程序员都需要建立自己的学习记录文档或知识点汇总文档，方便自我能力提升的循序渐进。 1.常见复选框的设计方案，HTML结构如下： 合并 2.判断复选框是否选中的jQuery代码如下： if ( elem.checked ){}else{
前端HTML常见学习要点总结
small_33的博客
04-08 269
前期学习前段的时候，珊妹儿师傅给列的清单，拿来给大家作参考，一起学习！！！！熟悉常用的HTML标签含义以及应用场合。HTML：页面整体标签，所有内容都写在HTML标签内部；head：头部标签，内含meta、link、style、title等样式、外部链接文件；body：主体标签，需要在页面显示出来的部分代码都写在这个标签里面；title：标题标签，页面被访问时上面的标题；link：链接文件的标签，...
【前端】前端的几大经典布局方案
井察的博客
05-19 1062
第一种：圣杯布局 具体效果是这样的： <!-- 圣杯布局 --> <div class="container"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div> 这种布局方式是基于浮动的， 首先，设置conta
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值