Ackerly-CSDN博客

原创 flex学习笔记

flex是弹性布局，使用flex布局需要注意浏览器兼容性问题，需要IE10以上的浏览器才支持这个属性。flex跟传统布局不一样，没有块级和内联的概念。flex由两部分组成，父容器flex container，子元素flex item。另外一个flex有主轴和侧重，里面元素的排列方式是基于主纵轴排列的。弹性布局下float不生效，相邻margin不重叠，column不起作用，clear属性...

2018-05-28 00:34:56 1134

浏览器内核分为渲染引擎和js引擎。渲染引擎主要负责结构与样式，即网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。js引擎则负责解析JavaScript，实现网页的动态效果。一开始渲染引擎与js引擎并没有区分的很明确，但是后来js引擎越来越独立，内核倾向于只指渲染引擎。内核可以分为Trident、Gecko、Blink、...

2018-04-28 00:21:15 3615

原创 HTML5应用程序缓存

HTML5引入了应用程序缓存，意味web应用可以进行缓存，在没有网络的情况下使用应用程序缓存为应用带来的三大优势：离线访问应用速度更快——已缓存资源加载的更快减少服务器负载——浏览器只从服务器下载更新过或更改过的资源浏览器支持情况：主流浏览器都支持，IE要10以上的版本HTML5通过在html文件添加manifest属性，启用应用程序缓存例子：<!DOCTYPE HTML><ht...

2018-04-20 16:15:26 320

原创回流与重绘

首先是HTML渲染过程解析HTML并构建DOM树和CSSOM树，浏览器对HTML标记转换成文档对象模型，CSS标记则转换成CSS对象模型（CSSOM），DOM 树包含了所有的 html 标签，包括不展示的 head 节点和 display:none 的节点，而 CSSOM 树则会去掉浏览器不能识别的样式，比如不支持的浏览器前缀（chrome不支持的-moz-前缀）和 hack（如firefox不支...

2018-04-09 15:02:39 1447

原创单页应用

什么是单页应用？单页应用是指在浏览器中运行的应用，使用期间不会重新加载页面。那么单页应用与传统网站的区别又是什么呢？传统网站用户的操作会重绘整张页面，浏览器从服务器获取数据时，页面会闪烁，然后重绘页面上所有的东西。当页面很大，服务器又繁忙时，这种闪烁会持续几秒钟甚至更长时间，造成用户糟糕的体验。那么单页面应用呢？单页面应用会尽可能把工作数据和处理过程从服务器端转移到浏览器端，将响应时间减少。单页面...

2018-04-07 17:00:22 706

原创 link和@import的区别

页面使用css样式方式有三种，分别是行内样式，内嵌调用，外部链接调用，外部链接调用有两种，分别是link和@import。不同的使用方式优先级也不同，行内样式>内联样式>外联样式>导入样式。同样是外链调用，link和@import有什么区别呢？1、link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。2、link引用...

2018-04-06 17:50:07 193

原创图片并排

图片并排遇到的问题本来想实现4张图片并排显示，于是将图片放置div里面，设置div宽度，然后设置图片宽度为25%，原以为会并排显示，但是出现了一点问题。下面是我的代码和效果：代码：效果：可以看到并没有排在一起，因为图片之间出现了空隙，于是我去查看盒子模型，看哪里出现问题但是盒子模型并没有多余的margin和pandding，百思不得其解，于是我去网上进行提问，然后给出的答案是内联元素出车会产生空格...

2018-03-31 12:24:34 2030

原创布局居中

水平居中，垂直居中，水平垂直居中常常会用到，实现方式不止一种，下面一一介绍1、水平居中第一种是使用text-align: center，但是只对内联元素和文字元素居中，块级元素无法居中代码：效果：可以看到div并没有居中，但是里面的文本居中，内联元素span则是居中那么块级元素如何实现居中呢？可以给块级元素设置宽度，然后margin-left和margin-top设置为auto代码：效果：可以看到...

2018-03-28 16:54:36 1320

原创关于浮动

浮动在前端布局经常用到，有时也会带来问题，所以需要弄清浮动会带来什么问题，然后就是如何清除浮动了。浮动元素脱离文档流，因此父级元素无法被撑开，出现“高度坍塌”示例：接下来就是清除浮动了，清除浮动的方法有多种第一种就是在最后面添加一个div，设置属性clear：both示例：效果：优点是简单，代码少，浏览器支持好，不容易出现怪问题缺点就是需要添加无意义的div标签第二种就是定义伪类:after和zo...

2018-03-28 12:23:00 212

原创实现关闭中文输入法

如何实现关闭中文输入法呢，通过查找资料发现在css中有一个属性，即ime-mode属性，这个属性有5个值，分别为：auto：不影响IME的状态。normal：正常的IME状态active：指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活imeinactive：指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活imedisabled：完全禁用ime。对于有焦点...

2018-03-19 14:49:05 4048

原创上传demo到github

第一步：首先新建github仓库第一个文本框为仓库名字，第二个文本框为仓库描述第二步：上传代码使用git并进入demo目录进入目录1.cd demo初始化2.git init3.添加文件git add * 4.此次提交的内容git commit –m “description”5.连接远程服务器git remote add origin <服务器地址> 6.上传到服务器git pu...

2018-02-28 19:49:35 532

原创 sass学习笔记

后缀名为sass与后缀名scss的区别sass不用区分大括号和分号，scss与css文件格式差不多例子：sass语法：$font-stack: Helvetica, sans-serif //定义变量$primary-color: #333 //定义变量 body font: 100% $font-stack color: $primary-c

2018-01-22 17:31:17 320

原创初识http之referer字段

首先了解http的referer字段的作用referer字段表示从哪里链接到当前网页，常用于对付伪造的跨网站请求，通过referer字段来实现防盗链。ps：关于盗链盗链指的是在自己的界面展示不在自己服务器上的内容，通过技术手段获得他人服务器的资源地址，绕过别人资源展示页面，在自己页面向用户提供此内容，从而减轻自己服务器的负担，因为真实的空间和流量来自别人服务器。对于使用apahce的服

2017-11-25 14:40:12 8524

原创 hexo+GitHub搭建个人博客总结

因为最近想往web发展，然后想搭建自己的博客，于是在Google上搜索怎样免费搭建个人博客，最后找Hexo+GitHub搭建个人博客，通过网上找别人搭建网站文章，慢慢搭建，期间遇到不少问题，花费了一整个晚上以及利用下午空余时间终于搭好个人网站，过程虽艰辛，最后成功还是有很大的成就感。首先准备git以及node.js环境（必须）git的下载地址有：http://pc.qq.com/detail/13...

2017-06-17 16:46:19 804

Ackerly的博客