随笔分类 - 前端
摘要：前期准备 打开Chrome的匿名模式。匿名模式可以保证Chrome在一个相对干净的环境下运行。比如说，你安装了许多chrome插件，这些插件可能会影响我们分析性能表现。 模拟移动设备的CPU 在DevTools中，点击 Performance 的 tab。 确保 Screenshots checkb
阅读全文
摘要：基本的概念 一个网站可以兼容多个终端，针对不同终端设置不同的样式。 优点： 面对不同分辨率设备灵活性强； 能够快捷解决多设备显示适用问题； 缺点： 兼容各种设备，效率低下； 代码累赘； 实现响应式布局的三种方式 1. CSS3-Media Query（最简单的方式，但是无法满足很多需求） 2. 借助
阅读全文
摘要：当我们希望每次新建.vue文件后，vscode能够根据配置，自动生成我们想要的内容。 打开vscode编辑器，依次选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，我们输入vue，将代码ctrl+c 到vue-html.json { "Print to console": {
阅读全文
摘要：zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，但这作用几乎用不到。 可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半，那么就在body中加入style="zoom:0.5" 设置zoom:1可以在IE6下清除浮动、解决margin
阅读全文
摘要：一、Emmet简述 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Em
阅读全文
摘要：meta 标签的作用 搜索引擎（SEO）优化； 定义页面使用语言； 自动刷新页面； 控制页面缓存； 网页定级评价； 控制页面显示的窗口； 等等... meta 使用 <meta>标签总共有 4 个属性，不同的属性和值组成了网页不同的功能： charset（HTML5新增） name http-equ
阅读全文
摘要：在这张图中，我们发现我们设置的300*400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框） margin(外边距) - 清除边框外的区域，外边距是透明的。border(边框
阅读全文
摘要：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 在父级容器有上下外边距的情况下，子元素如果添加外边距，父元素和子元素的垂直方向上的外边距会合并，相邻元素也会合并。在用margin给子元素和父元素之间留空白的时候通常会发生这
阅读全文
摘要：1.当document文档就绪时执行JavaScript代码。 我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。 2.使用route。 3.使用JavaScript中的AND技巧。 使用&&操作符的特点是如果操作符左边的表达式
阅读全文
摘要：HTML代码规范 通过学习基本的HTML和CSS就能在浏览器上看到实际的效果，可是要写好的HTML，就不是那么容易了。这里将和大家分享HTML规范，希望大家读完之后都能够有所收获。本文将主要以下面三个部分展开： HTML整体结构 HTML代码格式 HTML内容语义 http://bootstrap.
阅读全文
摘要：a标签点击事件方法汇总 <a> 标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。 这里的href="javascript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来
阅读全文
摘要：一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条
阅读全文
摘要：什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-f
阅读全文
摘要：CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来。 水平居中 1.1内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素
阅读全文
摘要：弹性盒布局(Flex Box) 一、概念 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中
阅读全文
摘要：CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 选择器语法 CSS 选择符： 1，基本选择器语法 2，层次选择器语法 3，动态伪类选择器语法 4，目标伪类选择器 5，语言伪类选择器，在多语言版本的网站用起来是特别的方便 用来匹配使用指定语言的元素。 E: l
阅读全文
摘要：1. tab键用（必须）四个空格代替 因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你自己设定了tab键所占的位置长度）。 2. 每个样式属性后（必须）加 ";" 方便压缩工具"断句"。 3. Class命名中（
阅读全文
摘要：html中的容器级标签和文本级标签，css中的块级元素和行内元素是我们常常拿来比较的四个名词（行内块级暂时先不考虑）。注：如果标签嵌套错误，可能会发生浏览器解析错误的情况，只是针对嵌套做的这个。 容器标签 文本标签 块级元素 行内元素 块级元素与行内元素 1.块级元素独占一行，行内元素不独占。 2.
阅读全文
摘要：行内元素 块级元素 行内块元素 行内元素，块级元素，行内块元素之间的转换 行内元素 a - 锚点abbr - 缩写acronym - 首字b - 粗体(不推荐)bdo - bidi overridebig - 大字体br - 换行cite - 引用code - 计算机代码(在引用源码的时候需要)df
阅读全文
摘要：HTML语义化HTML的语义化总结为： 用最恰当的标签来标记内容。 该如何理解呢？比如需要加入一个标题，这个标题的字体比正文的要大写，还要加粗。能够实现这种效果的方法有很多，比如用CSS样式进行渲染。这样的效果看起来像是一个标题，但是他对浏览器来说，只是一个被渲染过的文本，无法知道他是一个标题。若要
阅读全文
浙公网安备 33010602011771号