写页面得来的体会

一、说点原则

阐述:浏览器在获得服务器发来的HTML文档的时候,会首先根据文档构建一个DOM树,然后根据DOM元素的样式计算规划DOM树,这期间浏览器会根据
:a.是否绝对定位划分布局空间产生定位层,b.是否浮动产生静态层/浮动层,(定位层凌驾于浮动层和静态层之上,且和二者没有关系)最后才会根据对它进行渲染,做成你看到的页面。用户浏览页面的时候,一些操作会调用JavaScript更改DOM样式,如果仅仅是外观的改变,会触发浏览器的repaint(重绘)事件,如果更改了DOM元素的布局,那么会触发reflow(回流)事件,回流需要重新计算规划DOM树,比重绘要复杂。所以我们可以总结以下一些原则:

1.能不用绝对定位就不用绝对定位。

2.能不让DOM元素浮动就不让DOM元素浮动。

3.如果绝对定位能解决问题,那么不要浮动。虽然二者都触发了回流事件,但是绝对定位带来的布局空间的堆叠产生定位层和其他层面无太多关系,仍可以被浏览器精确的计算并重新渲染。而浮动元素涉及到静态层和浮动层元素间的布局定位关系,是浏览器渲染引擎更难计算。

(未完待续)

时间: 2024-10-05 17:23:22

写页面得来的体会的相关文章

吐槽-----写页面时的工作笔记

最近一直在写页面我会告诉你?作为css高级菜鸟我就不吹嘘怎么写css的,bootstrap的规范非常好.在这里记录几点需要注意的事项 1.关于设计给我的图纸,只有一张PSD,像素不准,间距不统一,让我真没有办法,怒而下载神器MarkMan自己mark.我只想说我是程序猿,不是设计狮,你还能再不认真点吗?设计的不严谨,让很多程序员只能目测距离,很蛋痛.倒是有很多小工具可以测量,取色,比如FSC.不过没有MrakMan神奇,请看下图 顿时很轻松有木有 另外关于设计师吐槽程序员无法100%还原设计稿的

web前端入门:一小时学会写页面

一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1.什么是前端 简单来说,前端就是做网页(大神勿喷,本文一切从简) 2.前端技术 html,是首字母缩写,具体意义请百度,大家要记住“t”代表text,ok你们没有想错,text就是文本文件text,好了准备工作做好了,现在开始做网页 3.我们的第一个网页 请身边有电脑的小伙伴和我一起开始,在桌面鼠标

写页面的时候一些遇到的小坑

2019 年 11 月 13 日 刚结束双十一,最近刚好有时间,简单整理并记录一下最近遇到的问题 想要做一个鼠标悬停可以显示详情的效果,一开始想用mouseover和mouseleave事件,但是能力不足方法没写明白,后通过在标签里添加title属性实现,里面可以传参数,想要换行可以通过 或者 ,必须要有分号,不然页面会加载不出来. 想要做一个要显示的内容超出固定长度显示省略号的样式,通过百度找到解决方案,添加text-overflow: ellipsis, overflow: hidden,

在后台action中写页面。

StringBuffer sbstr=new StringBuffer("<table id='tabe>";); String tablehtml= "<tr><td>"+str1+"</td>" + "<td>"+str2+"</td>"+"<td>"+str3+"</td>&l

代理Delegate在写页面逻辑的使用

block使用的场景是: 1.有关使用代码来写相应的View而不是xib或者storyboard的时候,我们经常需要用到按钮等控件,我们一般可以使用代理或者b'lock这两种方式来解决. 先看看代理的使用: //按钮的触发事件,相应的容器方法 reSetPassword [_serviceLeft addTarget:self action:@selector(reSetPassword) forControlEvents:UIControlEventTouchUpInside]; 下面是相应的

前端页面缓存心得体会

都有哪些缓存?缓存包括客户端缓存(浏览器缓存)和服务器缓存,一般我们说的都是浏览器缓存,缓存就是把访问后的动态文件生成一份静态文件的备份,当用户再次请求时,直接获取静态文件,极大减少服务器压力. 怎么控制缓存?通过在页面的head中添加no-cache和expiration等信息,即可控制浏览器不缓存页面,例如下面的代码 <meta http-equiv="pragma" content="no-cache"> <meta http-equiv=&

今天写页面,将.net也使用了语义法规来判断。做法来源是.net ado.net的类型判断 Infertype。一样的原理

做了一个封装,使页面更容易维护一些.主要是两个方法,如下所示: private void BindModule(Action<Repeater, string> bindSingRpt) {             BindControls(this, "List_", bindSingRpt);         }         private void BindControls(Page page, String prefix, Action<Repeater,

Android Studio自定义模板 写页面竟然可以如此轻松

本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/51635533: 本文出自:[张鸿洋的博客] 1.概述 上一篇文章,已经初步对Android Studio的模板有了初步的介绍与使用,以及一些开源模板的推荐: 神奇的Android Studio Template 本文将对如何编写Template,进行详细的介绍(以activity摸版为例)

在编写工程注册页面中的体会和遇到的问题

在用notepad++编写注册界面的过程中对于将标题与注册框之间的间距不要太大,将body和head的盒子模型的外边距和内边距均设为0,代码如下: <style type="text/css">head{margin:0px;padding:0px;}body{margin:0px;padding:0px;text-align:center;} </style> 但是在编写的过程中我遇到在编写注册界面的标签过程中文字不能够对齐,导致打开后的网页效果文字层次不齐,