css
Buddha_ITXiong
这个作者很懒,什么都没留下…
展开
-
块状元素和行内元素的margin,padding的区别
我们知道在做网页布局的时候一般是采用div+css的方式来做页面布局的,div+css布局最重要的是要理解块状元素和行内元素,我们把块状元素,行内元素通过float浮动的方式来把相应的元素摆放到正确的位置上去,那么什么是块状元素?什么是行内元素呢?以及块状元素和行内元素分别有哪些?什么是块状元素?我用自己觉得最通俗易懂的语言来解释的话就是:块状元素的默认的宽度就是100%,也就是占据了整行,不允许...原创 2018-03-12 16:16:04 · 2292 阅读 · 0 评论 -
超链接a的伪类书写顺序详解
我们知道a标签有四个伪类分别为:link 超链接的默认样式 visited 访问过的(已经看过的)链接样式 hover 鼠标处于鼠标悬停状态的链接样式 active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。一般我们书写它们样式的时候都是按照上面序号的顺序来写的,那我们思考一下为什么呢?这个知识点虽然比较简单,但其中涉及的css基础知识还是挺多的,接下来我便为大家讲解一下其中所...原创 2018-03-16 11:26:27 · 2992 阅读 · 0 评论 -
网页前端性能优化
加载优化(最耗时)减少 HTTP 请求:浏览器一般同时响应请求为4个请求(PC 一般为4个,Android 支持4个,IOS 5后可支持6个),所以尽量减少页面的请求数,首次加载同时请求数不能超过4个。(Webpack打包等)合并 CSS、 JavaScript;合并小图片、 使用 CSS sprite,base-64;缓存:使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服...转载 2018-03-22 10:19:06 · 295 阅读 · 0 评论 -
关于css浮动问题
浮动产生的原因一般在给父级盒子下面的子元素设置了浮动属性的情况下,会导致父元素盒子没有被撑开。如下代码中分别给left,right设置了浮动属性,高度,背景色。父元素也同样设置了背景色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2018-03-27 18:06:24 · 564 阅读 · 0 评论 -
CSS重绘与重排
浏览器渲染页面过程要理解重绘与重排就要先明白浏览器是怎样渲染一个页面的:浏览器从上往下解析html源码并构建一个由dom节点组成的dom树dom树构建完成后开始解析css样式并计算出最终的样式数据构建一个渲染树并将页面绘制到屏幕上,此时就是用户最终看到的页面效果了重绘与重排的概念当一个页面被初次渲染完成以后,用户往往户执行一些操作,而这些操作必定会对页面产生影响。重排:当页面上的改变影响了文档内容...原创 2018-03-29 14:33:32 · 399 阅读 · 0 评论 -
用jqrid插件写的一个demo
网上关于jqrid插件的用法和文档一大堆,在这里我就不提了,写这篇博客的主要目的就是记录一下自己在用jqrid作项目的过程中遇到的一些小问题拿出来给大家分享一下,当然大佬可以直接无视。。。。。要解决的问题:初次渲染表格数据与切换搜索条件更新表格数据表格字段中默认只显示text文本,如果想在某个td中显示图片或按钮(例如表格中最后一列一般会有操作按钮)该如何展示?某个td中要显示的内容不能直接使用后...原创 2018-05-04 14:05:11 · 516 阅读 · 0 评论 -
用javascript实现用户头像上传并压缩demo
无聊写的一个用户头像上传的demo原理:把用户头像img标签和input选择文件标签重叠(大小相等,位置相同),通过设置input inzex的值把input覆盖在图片的上面并且透明度设置为0,即隐藏input;调用h5的fileReader接口拿到图片的base64地址用canvas实现图片压缩上传接口函数uploadImg为模拟的,根据自己项目自定义index.html:<!DOCT...原创 2018-05-11 15:52:29 · 2134 阅读 · 2 评论 -
css实现网页底部固定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum原创 2018-06-08 14:14:14 · 1005 阅读 · 0 评论 -
移动端垂直居中字体偏上解决方案
做项目的时候发现给盒子设置垂直居中,在PC端是没有问题的但是在移动端上面字体会有明显的偏上 ,设置的line-height和flex布局 align-item:center均无效,在网上找了很多方法最后总结为:在移动端有很多手机不支持line-height,会有自己默认的22px的行高,但是我没有去考究。我是通过以下设置解决的,亲测有效。padding随自己设定 ...原创 2019-02-15 10:25:01 · 3726 阅读 · 0 评论