- 博客(23)
- 收藏
- 关注
原创 JS基础知识(一)
浏览器渲染机制解析HTML标签,构建DOM树解析CSS标签,构建CSSOM树把DOM和CSSOM组合成渲染树(render tree)在渲染树的基础上进行布局,计算每个节点的几何结构把每个节点绘制到屏幕上白屏问题如果把样式放在底部,对于IE浏览器,某些场景下,如打开新窗口,刷新等情况,页面会出现白屏,而不是内容逐步展现,如果使用@import标签,即使使用了外联样式,也就是...
2018-07-18 15:57:17 257
原创 box-sizing
box-sizing这个属性主要是为了更改CSS盒子模型。 主要有以下几个值:box-sizing: content-box|border-box|inherit;标准盒子模型和IE盒子模型首先,我们需要区分一下标准盒子模型和IE盒子模型,下面这张图能说明问题所在。 box-sizing: content-box;表示元素处于标准盒子模型 我们设定一个元素的宽度,...
2018-07-18 14:20:23 315
原创 伪类和伪元素傻傻分不清楚
伪类: 但已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。a标签主要有link,visited,hover,active,focus 当点击a标签的时候触发顺序同上面书写顺序一样伪元素 用于创建一些不在文档树中的元素,并为其添加样式。主要有单双冒号的区别单双冒号:::before/:before::after/:aft...
2018-07-17 20:12:16 307
原创 CSS编码规范
一、命名规范1、命名技巧语义化: 1. 语义化标签优先 2. 基于功能命名,基于内容命名,基于表现命名 3. 简略,明了,无后患2、命名范例使用英文小写用中横线连接命名体现功能,不设计表现样式,比如:<div class="text-blue">3、常见命名举例.wrap/.wrapper 用于外侧容器包裹.container/.ct...
2018-07-17 18:56:16 241
原创 浏览器兼容
一、什么是浏览器兼容问题原因: 1. 不支持:框架或者属性 2. 同一产品,版本越老,bug越多 3. 同一产品,版本越多,功能越多 4. 不同产品,不同标准,不同的实现方式二、常用网站浏览器市场份额统计查询是否支持某个css属性查询hack的写法三、处理兼容问题的思路是否需要兼容:兼容到IE几做到什么程度,支持哪些效果:一般PC兼容...
2018-07-17 13:49:28 597
原创 圣杯布局
为什么会出现圣杯布局?常见的三栏布局是:左右两栏宽度固定,中间一栏大小自适应。 在DOM中必须按照原顺序的方式下加载,这就要求在写三栏布局的时候,我们要先写左边,然后是中间,最后右边。 但是圣杯布局就是可以允许中间栏可以最先出现。圣杯布局代码如下:<!DOCTYPE html><html><head> <meta charse...
2018-07-16 19:38:24 373
原创 快速学习flex布局
flex布局可以实现空间自动分配,自动对齐,适用于简单的线性布局。flex的父容器叫做flex-container,子元素叫做flex-item 以下展示的html结构均为:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport"
2018-07-16 18:29:08 412
原创 CSS布局——两列和三列布局
两列布局一列固定宽度,另一列自适应宽度 如下图所示:第一列固定宽度200px,第二列自适应。代码效果三列布局边上两列固定宽度,中间自适应 注意html的写法,左右两列,也就是1,3列应该写在一起,中间列写在最后代码效果...
2018-07-14 16:05:28 3644
原创 CSS布局——单列布局
单列布局有以下两种形式:第一种:一栏布局实现方法:代码效果:第二种:一栏布局(通栏)实现方法:代码效果:其实单列布局是最为基础和简单的一种,实现方法并不局限于以上两种,大家可自由发挥,找到更多的方法来实现。...
2018-07-13 18:32:34 1983
原创 CSS布局——全屏居中
全屏显示并居中的方法:代码:<div id="parent">这是父元素 <div id="child">这是子元素</div></div>----------html, body { margin: 0; padding: 0; height: 100%;}#parent { height: 1...
2018-07-13 18:08:35 3753
原创 jQuery源码框架分析
jQuery的无new构造常规的通过构造函数创建实例的方法如下:var A = function(selector, context) {......}A.prototype = {name: function(){},age: function(){}}var a = new A();a.name();而使用jQuery的方法创建实例则是$().ready...
2018-06-21 23:40:10 418
原创 前言
关于毕业设计写在前面的话 最近在做毕业设计,到今天为止,已经算是告一段落了,基本框架和功能都差不多完成了,心里也算是有个数了,但是仍然有不少的bug,这个项目陆陆续续差不多做了一个月吧,也算学习到了很多,下个月就要答辩了。 之所以写这篇博客也算为了能够记录一下在做毕设中遇到的问题,以便答辩的时候能够胸有成竹吧。
2018-04-17 10:44:04 199
转载 排序算法小结
目录冒泡排序选择排序插入排序归并排序快速排序冒泡排序一句话描述就是较高的往后站。 步骤如下: 1. 从第一个数开始,如果第一个比第二个大,就交换两个,把大的数往后放。 2. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样轮完一遍之后,最大的数必定在最后一位。 3. 再次遍历,重复步骤1,2,但是只遍历到最后一个数的前一个。...
2018-03-19 21:44:29 315
原创 【js模板引擎】萌新也能看懂的模板引擎
目录从一个实际需求出发认识模板引擎实现一个模板引擎的思路及步骤从一个实际需求出发认识模板引擎当我们需要用js渲染一个歌曲列表的时候,由于数据需要向后端请求,所以实现不能在html中把数据写死。 如下所示,我们需要在页面上展示这样一个列表,但是却不能像下面一样把数据写死在li标签中。 这个时候有两种我们容易思考得到的方法来解决这个问题,一个是html字符串拼接,另一种是构建DOM对象。 第一种:
2018-03-19 12:22:29 609
原创 leetcode javaScript 204. Count Primes
leetcode javaScript 204. Count Primes Description: Count the number of prime numbers less than a non-negative number, n.
2018-01-10 09:29:19 975
原创 Web前端知识(二)——浏览器兼容
什么是 CSS hack谈一谈浏览器兼容的思路列举5种以上浏览器兼容的写法以下工具/名词是做什么的条件注释IE Hackjs 能力检测html5shiv.jsrespond.jscss resetnormalize.cssModernizrpostCSS一般在哪个网站查询属性兼容性?
2017-08-29 10:16:01 806
原创 Web前端基础知识(一)
HTML、XML、XHTML 有什么区别要分清三者的区别,首先我们要知道它们的概念。HTML的定义XML的定义XHTML的定义从概念上来看,我们大概能理解它们的区别,但是我们需要进一步的分析它们,就需要从代码方面来看了。 HTML的代码如下所示 XML的代码如下所示 XHTML的代码如下所示 总结: XHTML被发明出来
2017-08-07 20:51:01 906 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人