前端
放肆青春的博客
www
展开
-
flex布局
如果用了浮动布局,子元素不需要浮动设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。盒子模型:box-sizing: content-box|border-box|inherit;content-box:普通盒子模型 包括border和paddingborder-box : 不包括border和padding父元素属性:...转载 2019-05-04 10:28:03 · 225 阅读 · 0 评论 -
JPG?GIF?PNG?前端如何选择图片格式?
最近准备给团队传授图片格式的知识,于是开了谷歌,欲找些 PPT 素材,却发现似乎没有人好好写过与图片相关的知识,要么只是照搬一些百科的内容,要么写得太多 CRC、Gamma 之类的专(zhuang)业(B)术语,要么花了大量篇幅介绍它们的全称和历史(知道了全称和历史也不能把图片用得更好啊)。于是我果断自己写一篇。其实,对于 JPG、GIF、PNG 这3种格式的选择,其套路非常简单粗暴——照片用 J...转载 2018-03-23 16:45:40 · 802 阅读 · 0 评论 -
css阻塞与js阻塞
js的阻塞特性:所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。嵌入JS会阻塞所有...转载 2018-03-09 08:24:04 · 889 阅读 · 0 评论 -
localStorage使用总结
一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。 二、local转载 2018-01-10 16:01:53 · 260 阅读 · 0 评论 -
HTML5 页面跳转和参数传递
页面跳转:方法一:[html] view plain copyscript language="javascript"> window.location = "http://www.baidu.com"; script> 方法二:[html] view plain转载 2018-01-06 22:16:19 · 3496 阅读 · 0 评论 -
css 浮动 相对定位 绝对定位区别
今天下班在地铁上看了一个样式教学视频,因为最近在学习前端。以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然还得找人去做;不同的是,后台的就可以放心找人做,只要测试得没问题,效率还过得去就可以了,所以最近打算学好点前端,自己接一些单子来做。废话不多说,入正题: html是按照文件流(普通流)的方式加载的,...转载 2017-12-19 17:51:37 · 485 阅读 · 0 评论 -
margin auto 实现居中,与text-align:center的区别
本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定。这些值中,只有width和margin-left,margin-right可以设为auto,text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置。一、margin:0 auto;的意思上下边界为0,左右根据宽度自适应!这就是水平居中的意思,使用...转载 2017-11-12 20:28:40 · 2847 阅读 · 0 评论 -
img图片居中和div居中遇到的坑
1.我们设置图片标签img {margin:0 auto;} ,我们就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果你一定想要设置,那么首先要将它的属性转变为块元素,如下面的代码:img {display:block; margin:0 auto;}2.div居中必须有宽和高...原创 2017-11-12 20:25:04 · 1046 阅读 · 0 评论 -
HTML怎么让table表格中的td单元格内容过长显示为固定长度,多余部分用省略号代替?
直接上方法,不喜欢废话。[html] view plain copyth class="wrap">商品名th> td class="wrap">商品名td> 在要控制宽度的td和th加上以下样式:td里面的内容放在div里面,在div身上也加上这个样式,如果想要鼠标滑过时显示全文本,可以给div加上title转载 2017-09-21 17:29:38 · 3482 阅读 · 0 评论 -
前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。 思路:将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的da...转载 2018-03-31 18:39:10 · 3750 阅读 · 0 评论 -
Web前端面试指导(十二):::before 和:before有什么区别?
题目点评这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和不同点,以及他们的作用,及注意事项上去回答。解答要点 相同点都可以用来表示伪类对象,用来设置对象前的内容:befor和::before写法是等效的 不同点:befor是Css2的写法,::before是C...转载 2018-03-21 22:51:12 · 1454 阅读 · 0 评论 -
Web前端面试指导(五十):CSS样式书写有哪些规范?
一、CSS书写顺序1.位置属性(position, top, right,z-index, display, float等)2.大小(width, height, padding,margin)3.文字系列(font, line-height,letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, tr...转载 2018-03-21 22:58:32 · 153 阅读 · 0 评论 -
开发中遇到的常用的布局样式及问题
常用样式:a标签去掉下划线:text-decoration:none;li去掉点:list-style-type:none;字体粗细:font-weight: bold;字体间距:letter-spacing:1px;单行字体超出用省略号: overflow:hidden; text-overflow:ellipsis; white-space:...原创 2018-12-18 16:47:04 · 352 阅读 · 0 评论 -
网站优化--图片的预加载与懒加载(上)
1、延迟加载即懒加载,主要目的是作为服务器前端的优化,减少请求数或延迟请求数,在一些图片非常多的网站中非常有用,当图片位置进入到可视区的时候才会被加载,这样对于含有很多 图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽最常用的方式是:监控滚动条的高度,当滚动条高度和可视区高度之和小于图片位置距离页面的高度时会被加载2、预加载:在查看前面张图片的时候加载后面的图片,在提升用户体验的同时...转载 2018-04-19 20:04:51 · 2099 阅读 · 0 评论 -
前端小教程及好博客大全
1.深入理解javascript原型和闭包系列18章:http://www.cnblogs.com/wangfupeng1988/p/4001284.htmlJavaScript开发者应懂的33个概念:https://github.com/stephentian/33-js-concepts/blob/master/README.md#24-objectcreate-%E5%92%8C-o...原创 2018-04-16 14:52:54 · 380 阅读 · 0 评论 -
原生js获取left值和top值
在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值。比如做一个碰撞广告,就要不停的获取元素的top和left属性值。需要注意的事:取值的元素必须要设置position:absolute绝对定位属性,才能取的到left值。第一种方法,比较简单,就是直接通过obj.style.left和obj.style.top,但是有局限性,这种获取的方法只能获取到行内样式的left和top的...转载 2018-04-19 10:36:28 · 1923 阅读 · 0 评论 -
写HTML,CSS,JS注意事项
1.id,class,name等值不要使用关键字如hide2.整个页面的id必须唯一3.JS如有重定义,后定义函数将覆盖前定义函数。,CSS中有重定义样式将覆盖前定义样式。4.Javascript中只能在 HTML 输出流中使用 document.write,在文档已加载后使用它(比如在函数中),会覆盖整个文档。html输出流:当前数据形式是HTML格式的数据,这部分数据正被导出、传输或显示,所以...原创 2018-04-19 08:40:44 · 444 阅读 · 0 评论 -
JS中变量名和函数名重名
今天骚凯问了一道变量名冲突的题目,感觉很有意思,顺便也复习一下预解析的一些知识,有不对的地方忘前辈大神指正,题目是这样的:var a=100;function a(){ console.log(a);}a();这个串代码执行完会报错 : a is not a function问题来了,为什么会报这个错误呢? 这里涉及到函数和变量的预解析:1)函数声明会置顶2)变量声明也会置顶3)函数声明比变量...转载 2018-04-17 21:25:46 · 388 阅读 · 0 评论 -
css之去除html标签默认的外边距margin和内边距padding,通用工具类 base.css
@charset "utf-8";/*! * @名称:base.css * @功能:1、重设浏览器默认样式 * 2、设置通用原子类 *//* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */html { background:white; color:black;}/* 内外边距通常让各个浏览器样式的表现位置不同 */body,di...转载 2018-04-17 17:52:19 · 9698 阅读 · 0 评论 -
class命名(及前端命名)
常见class关键词:布局类:header, footer, container, main, content, aside, page, section包裹类:wrap, inner区块类:region, block, box结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span列表类:list, item, ...转载 2018-04-17 10:54:37 · 26899 阅读 · 0 评论 -
css 字体样式设置大全
css样式大全(整理版) 字体属性:(font)大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高 {line-height: normal;}(正常) 单位:PX、PD、E转载 2017-09-22 20:30:10 · 6764 阅读 · 0 评论 -
meta(刷新功能)
[xhtml] view plain copymeta http-equiv="refresh" content="1.0;url=/basic/mainservlet?actionType=INIT_V_B_ZA_WXWP_SYWP&isView=no&main_table_systemid=&cllx="> meta是html语言head区的一转载 2017-08-23 17:15:04 · 1037 阅读 · 0 评论 -
<meta http-equiv="" content="">详解
http-equiv,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。一、meta标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;其中http-equiv属性主要有以下几种参转载 2017-08-23 17:13:44 · 436 阅读 · 0 评论 -
前端开发的30类CSS选择器
文章来源 开源中国社区 [http://www.oschina.net]https://www.oschina.net/news/57107/30-css-selector-you-should-remeber大概大家读知道`id`,`class`以及`descendant`选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大转载 2017-05-24 11:11:14 · 326 阅读 · 0 评论 -
HTML5 5大存储方式总结
总体情况h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。主要应用:购物车、客户登录对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器1.本地存转载 2017-05-24 11:08:33 · 431 阅读 · 0 评论 -
HTML的元素嵌套规则
一、HTML 标签包括 块级元素(block)、内嵌元素(inline) 1、块级元素 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签: address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul转载 2017-05-24 11:07:31 · 524 阅读 · 0 评论 -
10个顶级的CSS3代码生成器
新出来的在线工具和 web 应用允许开发人员快速创建网站,而无需手动一行一行地编写代码。当前,不断有新的框架和代码库涌现在前端开发这个领域里。但是,这也让许多开发人员忘记了代码生成器以及它们在构建网站时的作用。以下资源是完全免费的 web 应用,可用于生成图案、渐变、甚至浏览器前缀属性的 CSS3 代码。如果你写的是前端代码,然后这些资源可以为你节省大量的时间,并为今后的项目工作提供可转载 2017-05-24 11:06:31 · 620 阅读 · 0 评论 -
11个让你HTML代码整洁的原则
写Web页面就像我们建设房子一样,地基牢固,房子才不会倒。同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗?我们一起来看一张图片:上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他转载 2017-05-24 11:00:41 · 1486 阅读 · 0 评论 -
HTML5贪吃蛇
贪吃蛇 *{margin:0;padding: 0;font-family: "Microsoft YaHei";}#page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; }#yard{ width: 800px;border: 1px solid gray;b翻译 2017-04-18 14:52:04 · 526 阅读 · 0 评论 -
改变CSS世界纵横规则的writing-mode属性
一、冉冉升起的writing-modewriting-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing...转载 2017-04-18 08:32:05 · 2612 阅读 · 0 评论 -
form表单的onsubmit() return问题
以前在项目中为一个表单(from)编写onsubmit()脚本的时候,经常需要验证表单中数据的合法性,所以常会写道:,试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单 还是会提交。后来发现 onsubmit="return validateForm()"就没有问题了,当时也没有多想就继续做其它事情了。 直转载 2017-04-17 20:11:00 · 17639 阅读 · 2 评论 -
12条鲜有人知的css事实(续集)
此文为译文,作者在这篇文章中提到了12条我们前端人员在日常工作中不是特别熟悉而又确实可以使用或者浏览器是可以很好支持的CSS技巧,熟知这些点,对我们深入研究CSS有很好的帮助。 鉴于本人英语水平有限,有些地方的翻译可能不是特别准确,或者不是很容易理解,在译文中,我也用括号的方式加了一些简单的算是注释的个人理解。各位读者也可以结合着原文去阅读,以便更好地理解作者所表达的意思!转载 2017-05-16 12:21:45 · 321 阅读 · 0 评论 -
html、css、js文件加载顺序及执行情况
今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下:HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件。 2. 浏览器开始载入html代码,发现标签内有一个标签引用外部CSS文件。 3.转载 2017-05-18 16:26:03 · 1305 阅读 · 0 评论 -
用CSS开启硬件加速来提高网站性能(转)
翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css。你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,转载 2017-05-20 08:21:04 · 332 阅读 · 0 评论 -
DIV+CSS(网页遮罩效果)
> html xmlns="http://www.w3.org/1999/xhtml"> head> title>title> style type="text/css"> #poplayer { position:absolute; top:100px; left转载 2017-08-15 09:56:32 · 1854 阅读 · 0 评论 -
css,js互相引入问题
在css中导入css文件:@import url("public.css");js中引入js document.write(" src='other.js'>");原创 2017-06-08 10:20:09 · 519 阅读 · 0 评论 -
移动web前端小结(一)
这段时间做了几个移动项目的前端页面,姑且称之webapp。做这几个项目之前根本没接触过移动端的相关知识,以为和PC端页面没啥区别无非就是尺寸小一点罢了。上手以后发现问题颇多。下面从框架、相关知识点、遇到的问题、解决办法,以及依旧存在的困惑进行总结。因为刚接触1个多月时间,多处不足,希望各位大神能为我解惑,拜谢~~一、框架框架:Bootstrap+HTML5 Boilerplat转载 2017-06-08 10:15:25 · 528 阅读 · 0 评论 -
RGBA与RGB和区别与转换
R:红色值。正整数 | 百分数G:绿色值。正整数 | 百分数B:蓝色值。正整数 | 百分数A:Alpha透明度。取值0~1之间。(颜色的透明度)此色彩模式与RGB相同,RGB定义了颜色的红绿蓝值,在RGB模式上新增了Alpha透明度.alpha通道一般用作不透明度参数。如果一个像素的alpha通道数值为0%,那它就是完全透明的(也就是看不见的),而数值为100%转载 2017-05-22 13:12:11 · 40194 阅读 · 0 评论 -
css精灵(雪碧图)
css sprites是指把网页中的很多的小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。优点:a.提高页面的下载速度:页面中的图片文件等外部文件都要单独下载,图片文件时另外进程来下载的,并且不同的浏览器会对一次下载图片的数量有所限制,要是页转载 2017-05-21 22:23:38 · 732 阅读 · 1 评论 -
深入理解CSS变形transform(3d)
前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility 坐标轴 在了解透视之前,首先要先了解坐标轴。3D变形与2D变形最大的不同就在于...转载 2017-05-20 18:33:41 · 497 阅读 · 0 评论