前端随笔

学习前端的同学都知道,前端需要调试各种不同的浏览器以及浏览器的兼容性,以使ui展示的效果在浏览器中最大程度上接近活相似。但是我们常常遇到各种各样的bug.比如,明明设置了元素的高度,但是设置下一个元素的位置的时候,元素的位置就是错乱的。
       时下比较流行的,瀑布流啊,响应式布局啊,第三方库啊(bootstrap,easyui)等等,不知道大家有没有发现,这些库以及这些库产生的原理,都跟float这个不起眼的属性息息相关,下面,我们来浅谈一下为什么float很重要的原因。

相信大家都知道,htm元素里面有块元素,和非块元素。当我们在设计网页布局的同时,我们首先要考虑的浏览器的差异性,所以就有了浏览器hack存在的作
用了。大家都用个*{margin:0;padding:0}类似这样的样式表。这就是为了解决浏览器自身携带的一些默认属性值差异,我们所做的同步操
作。做好了浏览器的差异同步,才能更好的书写html相关的代码。
     
拿瀑布流来说,最常见的就是百度图片这样的瀑布流形式。大家可以查看一下,每一个图片的样式(imgitem)都是带有float属性的。这样做有什么好
处呢?1.保证每一个li标签是宽度100%在每行出现的块元素;2.保证每个元素都是从左到右的展示顺序。这样,就可以撑起整个页面,也保证页面的高度
是饱和的,没有误差的。
     再拿响应式布局来说,bootstrap是做的很好地响应式布局第三方库。同样,不管用的盒子模型也好,不用也好,也是基本的大块的元素都用到了float属性。为什么?我们来分析一下响应式布局的特点。

响应式布局,说白了,就是让页面自适应所有的分辨率,而且随着分辨率的改变,浏览器大小的改变而改变。做到这一点,bootstrap是这样来做的,将页
面均等的分成12列,每一列占对应的百分比(当然,不能除尽的),但是要如何保证在浏览器大小改变,分辨率改变的情况下自动的折行,分配比例呢?出去js
脚本的功用不说,要保证页面不错乱,适应不容的屏幕,显然,无论从排版上来说,还是布局上来说,float都是一个很好地选择。当然,配合
position属性,能够更好地发挥布局的相关作用。
      pc端如此,移动端也是如此。当然,原生的layout布局就是另外一回事了。

我曾经,看过一篇文章,上面说移动端最好不要用float属性,我不敢苟同。其实,针对手机浏览器界面的开发,我反而觉得跟pc端没有那么大的区分,只不
过我们需要判断设备的类型,根据不同的设备,来调用不同的样式,图片,js等等来最大限度的节约资源,减少流量的消耗,提升浏览器的反应速度,这才是王
道。
      以上,仅为自己观点,欢迎发表意见,一起讨论。

时间: 2024-10-06 01:09:56

前端随笔的相关文章

前端随笔一——浏览器的历史回退自我实现

这是我第一次写随笔,不足的地方还望见谅. 首先说说我这次代码的由来,之前为了实现一个页面的前进和后退,一般会想到使用 history 的 back 函数,但有时候并不能完美的后退.有时会出现 A 后退到 B ,B 后退到 C ,然后 C 后退又回到了 B ,之后就是死循环了.查阅网上的资料后发现,可能是 B 页面有 Ajax 等影响 B 页面,使得从历史栈中加载出的 B 页面向后退请求并刷新了页面,使得 B 入栈了.对于这种情况,我看到有人说使用 sessionStorage 来解决.我尝试的写

[Javascript] 前端随笔

做一个小功能时使用到的一点技术点记录下来: 1.在js中使用定时器: 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方 法 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTime

前端随笔(1)

一:Offset 距离计算 offset距离计算只计算position+margin 两者距离,只计算元素到DOM边上的距离,不考虑一个嵌套一个 链接 二:计算获取页面宽高度 链接 未完待续!

web前端学习随笔

好好算下来,学习web前端已有半个月了,这半个月来主要学习的是HTML和CSS部分,期间有困惑,也有解决困惑时的快感,所以想把这段时间感受到的一些东西记下来,因为内容比较杂,所以干脆叫随笔吧.这里面不会说前端的相关基础知识,只是说一些自己对前端的一些认识. html是用来控制页面结构的我曾经对这句话有过疑问,觉得html应该是控制页面内容的,为什么要说是控制页面结构的呢?在查看京东首页的代码时,我恍然大悟,html确实是定义页面内容的,但同时它也要控制页面的结构.举例来说,京东商品分类的div包

前端性能优化随笔

只有10%~20%的最终用户响应时间花在了下载HTML文档上,其余的80%~90%花在了下载页面中的所有组件上,有一部分时间花在解析HTML.脚本.样式表上面. 首先整页时间>3s ,延迟1秒的页面加载时间可能导致转换损失7%,减少11%的页面浏览量,并减少16%的客户满意度.如果3秒后,网页还未加载完毕,57%的用户会放弃,74%的用户登录某网站时间超过5秒后就不会再登录这个网站,下面说一下总结的性能优化方案. 1.减少HTTP请求 CSS Sprites 通过网上现成的CSS Sprites

游戏前端开发随笔【2】

1, 游戏开发经常遇到需要和后端调试的时候,也就是协议有问题的时候, 应该后端在协议发送处断点, 前端在编解码断点, 确保不是因为前端修改过的数据. 2, 尽量复用组件. 当游戏开发一段时间后,会有各种各样的组件.比如说倒计时. 作为后来者,用一个组件的代价是挺大的,因为要学习,因为会耦合. 不过为了方便同事检阅,还是尽量用公用的组件,尽量避免自己造轮子,即使自己的轮子更容易用. 3, public 的函数,尽量判断null,保证不报错. 自己写的函数大致分为,public/private/pr

一次自动化发现攻击脚本且调用前端页面快速下发配置项目的随笔

一次自动化发现攻击脚本且调用前端页面快速下发配置项目的个人笔记,服务器脚本部分主要是根据syslog来发现攻击特征然后格式化输出到网页,做各种判断后通知且通过php手动(自动)下发配置,都是一些判断循环啥的,就不贴了. 这里主要是记一些制作前端html网页和后端php页面交互的一些有用的代码 html部分: <!DOCTYPE html> 声明是html5网页 <html></html>   html格式 <body></body> 可视化主体

前端工程师入门随笔

从最初开始算,已经入行三年了,若再往前点,就是从09年第一个网站开始算了,特意送上小心得一份. 第一篇:初识网站 09年之际,看到某朋友做网站(现在看来也是半斤八两),特崇拜,感觉自己也能够拥有网站,遂烦之,扰之,求之,终有一日见到他做网站的一个庐山真面目(一个过程),然后开始意淫(并非开始投入学习,当时并无女朋友),将来追妹纸的时候,非得弄一个网站融化她,将来世界上所有人都能够看到我的网站,身边的朋友,老师,妹纸都将拜在我的网站下,我将是一代宗师,哈哈哈哈,哈哈哈哈. 第二篇:入门前端 后来真

从后端转前端的小随笔(1)

写后台两年的时间,说实话,没学的多精,技术也不咋滴,可能是太懒的缘故... 今年的6月份,正式加入前端的大军,不会ps,这是个硬伤,只能去使用阿里巴巴的矢量图代替所有的icon,但是,我发现,使用矢量图比普通的png,webp,gif更能灵活的去编排图标,唯一的遗憾就是,需要转换svg格式提交到阿里,当然,设计ai文件也不会. 也从ssm,ssh,mvc,mvvm等各种设计模式转换到统一的图形生动形象的界面去写代码,也是要一段适应的过程,发现这个过程是很大的激发了几度思维空间的神经,让空间的设计