摘要：
https://blog.csdn.net/yehaocheng520/article/details/105611762 阅读全文
posted @ 2020-08-08 23:59
大牛半路出家
阅读(588)
评论(0)
推荐(0)
摘要：
margin: 需要在border外侧添加空白时； 空白处不需要背景（色）时； 上下相连的两个盒子之间的空白，需要相互抵消时。 padding： 需要在border内测添加空白时； 空白处需要背景（色）时； 上下相连的两个盒子之间的空白，希望等于两者之和时 阅读全文
posted @ 2020-08-08 23:53
大牛半路出家
阅读(849)
评论(0)
推荐(0)
摘要：
偶数字号相对更容易和 web 设计的其他部分构成比例关系 阅读全文
posted @ 2020-08-08 23:52
大牛半路出家
阅读(593)
评论(0)
推荐(0)
摘要：
浏览器会『从右往左』解析CSS选择器。我们知道DOM Tree与Style Rules合成为 Render Tree，实际上是需要将Style Rules附着到DOM Tree上，因此需要根据选择器提供的信息对DOM Tree进行遍历，才能将样式附着到对应的DOM元素上。以下这段css为例<styl 阅读全文
posted @ 2020-08-08 23:50
大牛半路出家
阅读(625)
评论(0)
推荐(0)
摘要：
CSS优化，提高性能的方法有哪些？ 1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。 2，减少css嵌套，最好不要套三层以上。 3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。 4，建立公 阅读全文
posted @ 2020-08-08 23:48
大牛半路出家
阅读(353)
评论(0)
推荐(0)
摘要：
现在HTML5前端不仅仅局限于PC端，HTML5前端还可以实现移动端，实现微信等等，传统的布局单位px，不能是达到自适应的学校过，那么移动端布局有哪些方式呢? 媒体查询 + rem单位布局 说道这个布局，，那么我们首先得了解什么是媒体查询，rem是什么？ 媒体查询：媒体查询可以让我们根据设备显示器的 阅读全文
posted @ 2020-08-08 23:47
大牛半路出家
阅读(377)
评论(0)
推荐(0)
摘要：
1.为什么关注此问题？ 行内元素设置为浮动后，可以设置宽高了，为什么？ 我们知道Html元素分三种 块级元素（display:block）--> 可以设置元素的宽高 行内元素（display:inline）--> 默认不换行,设置width/height无效(可以设置line-height)，mar 阅读全文
posted @ 2020-08-08 23:44
大牛半路出家
阅读(2018)
评论(0)
推荐(0)
摘要：
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况： 1、水平边距永远不会重合。 阅读全文
posted @ 2020-08-08 23:43
大牛半路出家
阅读(875)
评论(0)
推荐(0)
摘要：
(1)为什么需要浮动据网上资料显示，以前提出浮动的概念主要是为了解决左边图片，右边文字的需求，后来浮动在网页的布局中应用比较广泛。我之前在学习网页设计时，针对于一个花店的导航页，存在许多的图片显示，而有效并且美观的布局样式极为重要，这时float属性就显得尤为重要。(2)什么时候需要清除浮动浮动的属 阅读全文
posted @ 2020-08-08 23:41
大牛半路出家
阅读(410)
评论(0)
推荐(0)
摘要：
一道面试题的分析总结： display属性规定元素应该生成的框的类型； position属性规定元素的定位类型； float属性是一种布局方式，定义元素在哪个方向浮动。 类似于优先级机制： position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要 阅读全文
posted @ 2020-08-08 23:38
大牛半路出家
阅读(466)
评论(0)
推荐(0)
摘要：
董雅真好看 前端面试题总结 前端面试题总结 Vue面试题生命周期函数面试题 1.什么是 vue 生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具体适合哪些场景5.created和mounted的区别6.vue获取数据在哪个周期函数7.请详细说下你对vue生命 阅读全文
posted @ 2020-08-08 23:32
大牛半路出家
阅读(309)
评论(0)
推荐(0)
摘要：
display: none与visibility: hidden的区别很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简 阅读全文
posted @ 2020-08-08 23:31
大牛半路出家
阅读(231)
评论(0)
推荐(0)
摘要：
1.浏览器差异 不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异 2.提高编码质量 如果不初始化，整个页面做完会很糟糕，重复的css样式很多 阅读全文
posted @ 2020-08-08 23:28
大牛半路出家
阅读(236)
评论(0)
推荐(0)
摘要：
采用的是均分原理,把矩形分为4等份,这4等份其实都是边框 image.png 实现方式, 核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色; image.png 使用场景 使用场景一般都是做一些小图标,比如之前做的京东二维码 上面这种做法就是用两个大小一样的三角形重叠在一起 阅读全文
posted @ 2020-08-08 23:27
大牛半路出家
阅读(805)
评论(0)
推荐(0)
摘要：
弹性盒模型是c3规范的新的布局方式，该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。在传统的布局中，block布局是把块级元素在垂直方向从上向下一次排列的，而inline布局则是在水平方向来排列。弹性盒布局没有这样的内在限制，操作比较自由。 适用于移动端，在Andro 阅读全文
posted @ 2020-08-08 23:24
大牛半路出家
阅读(476)
评论(0)
推荐(0)
摘要：
一，css选择器： 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "exter 阅读全文
posted @ 2020-08-08 23:23
大牛半路出家
阅读(300)
评论(0)
推荐(0)
摘要：
⒈localStorage长期存储数据，浏览器关闭数据后不丢失； ⒉sessionStorage数据在浏览器关闭后自动删除； ⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览 阅读全文
posted @ 2020-08-08 23:21
大牛半路出家
阅读(268)
评论(0)
推荐(0)
摘要：
区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试 阅读全文
posted @ 2020-08-08 23:20
大牛半路出家
阅读(769)
评论(0)
推荐(0)
摘要：
canvas与svg都是可以在浏览器上创建图形，因此，在html5中感觉canvas和svg很相似，但是实际上canvas与svg有着根本的区别。下面php中文网通过比较canvas和svg之间的不同来给大家总结了关于canvas与svg的区别。一起来看一看吧。 在说canvas与svg的区别之前， 阅读全文
posted @ 2020-08-08 23:19
大牛半路出家
阅读(458)
评论(0)
推荐(0)
摘要：
一、Doctype作用是什么？<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。二、严格模式与混杂模式如何区分？它们有何意义？严格 阅读全文
posted @ 2020-08-08 23:17
大牛半路出家
阅读(363)
评论(0)
推荐(0)
摘要：
iframe的优点： 1.iframe能够原封不动的把嵌入的网页展现出来。 2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。 3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码 阅读全文
posted @ 2020-08-08 23:14
大牛半路出家
阅读(311)
评论(0)
推荐(0)
摘要：
在离线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储，如果已近访问过app并且资源已经立宪存储了，那么浏览器就会使用立宪的资源存储了，然后浏览器会对比新的mani 阅读全文
posted @ 2020-08-08 23:13
大牛半路出家
阅读(385)
评论(0)
推荐(0)
摘要：
HTML5的离线存储怎么使用，工作原理能不能解释一下？ 1.在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件 原理： HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资 阅读全文
posted @ 2020-08-08 23:11
大牛半路出家
阅读(949)
评论(0)
推荐(0)
摘要：
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 作者：李轻舟链接：https://w 阅读全文
posted @ 2020-08-08 23:07
大牛半路出家
阅读(324)
评论(0)
推荐(0)
摘要：
1、Content方面 减少HTTP请求：合并文件、CSS精灵、inline image 减少DNS查询： DNS查询完之前浏览器不能从这个主机下载任何文件、方法：DNS缓存、讲资源分布到恰当的数量的主机名，平衡并行下载和DNS查询 避免重定向 ： 多余的中间访问 使用AJAX缓存 非必须组件延迟加 阅读全文
posted @ 2020-08-08 19:34
大牛半路出家
阅读(253)
评论(0)
推荐(0)
摘要：
基础版本（面试笔试） 浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求； 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）； 浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内 阅读全文
posted @ 2020-08-08 19:33
大牛半路出家
阅读(264)
评论(0)
推荐(0)
摘要：
alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值,而title是在图片正常加载鼠标划上去显示的值 阅读全文
posted @ 2020-08-08 19:31
大牛半路出家
阅读(223)
评论(0)
推荐(0)
摘要：
1.合理的title，description，keywords：搜索对三个的权重逐个减小，title值强调重点即可，重点词出现不要超过两次，而且要靠前，不同页面的title要有所不同。description把页面内容高度概括，长度合适，不要过分堆砌关键词，不同页面description有所不同，ke 阅读全文
posted @ 2020-08-08 19:30
大牛半路出家
阅读(215)
评论(0)
推荐(0)
摘要：
8 种请求方法 OPTIONS：返回服务器针对特定资源所支持的 HTTP 请求方法，也可以利用其向 web 服务器发送 * 的请求来测试服务器的功能性。 HEAD：向服务器索与 GET 请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应小消息 阅读全文
posted @ 2020-08-08 19:29
大牛半路出家
阅读(707)
评论(0)
推荐(1)
摘要：
伪类和伪元素的具体概念如下： 伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。 例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所 阅读全文
posted @ 2020-08-08 19:27
大牛半路出家
阅读(246)
评论(0)
推荐(0)
摘要：
解决办法为： （1） 用HTML标签设置HTTP头信息 <HEAD> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV 阅读全文
posted @ 2020-08-08 19:20
大牛半路出家
阅读(746)
评论(0)
推荐(0)
摘要：
CSS预处理器 1. 基于CSS的另一种语言 2. 通过工具编译成CSS 3. 添加了很多CSS不具备的特性 4. 能提升CSS文件的组织方式 CSS预处理器的作用 1. 帮助更好的组织CSS代码 2. 提高代码复用率 3. 提升可维护性 CSS预处理种类 1. Less 文件后缀名：.less a 阅读全文
posted @ 2020-08-08 19:18
大牛半路出家
阅读(546)
评论(0)
推荐(0)
摘要：
一、前言 偶尔在面试过程中遇到过重汇与回流reflow的问题，毕竟页面优化也是考核一个开发者能力的关键之一，上篇文章聊了下documentfragment也是为了减轻回流问题，那么本篇文章好好介绍下重绘和回流。 二、重绘和回流是什么 怎么去理解这两个概念呢？从字面上理解，重绘，重新绘画，重新上色，较 阅读全文
posted @ 2020-08-08 19:15
大牛半路出家
阅读(5230)
评论(0)
推荐(2)
摘要：
在这一年的工作中，我发现很多问题你利用自己的「聪明才智」绕过去了，总有一天它会和你不期而遇，今天我们就来直面一个字体兼容性的小问题：Chrome谷歌浏览器下不支持css字体小于12px。 我们先来看个效果图（chrome下）： 给你看个栗子.png 从上面的图可以很明显地看出Chrome下css设置 阅读全文
posted @ 2020-08-08 19:11
大牛半路出家
阅读(1314)
评论(0)
推荐(0)
摘要：
data-用于存储页面或应用程序的私有自定义数据，赋予我们在所有HTML元素上嵌入自定义data属性的能力，存储的数据能被页面的JS利用，以创建更好的用户体验。 1 <div id="box" data-user-name="lily"></div> 2 var box = document.get 阅读全文
posted @ 2020-08-08 19:09
大牛半路出家
阅读(359)
评论(0)
推荐(0)
摘要：
1.文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 ，可以通过相关工具在线合并，也可以在ps中合并。 2.使用CDN（内容分发网络 阅读全文
posted @ 2020-08-08 18:47
大牛半路出家
阅读(339)
评论(0)
推荐(0)
摘要：
DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。 CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队） 浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。 服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中， 阅读全文
posted @ 2020-08-08 18:44
大牛半路出家
阅读(465)
评论(0)
推荐(0)
摘要：
HTTP协议 什么是HTTP HTTP协议规定了浏览器怎样向万维网服务请求万维网文档，以及服务器怎样把文档传送给浏览器。在服务器和浏览器之间的请求和响应的交互，必须按照规定的格式和遵循一定的规则。这些格式和规则就是超文本传送协议HTTP。 HTTP规定在HTTP客户和HTTP服务器之间的每次交互，都 阅读全文
posted @ 2020-08-08 18:43
大牛半路出家
阅读(679)
评论(0)
推荐(0)
摘要：
浮动对页面的影响： 如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0， 下面的元素会自动补位，所以这个时候要进行浮动的清除。 关于清除浮动的方式: 方式一:使用overflow属性来清除浮动 .ovh{ overflow: 阅读全文
posted @ 2020-08-08 18:42
大牛半路出家
阅读(263)
评论(0)
推荐(0)
摘要：
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。 flex布局 当使用flex布局的时候涉及到两个东西 阅读全文
posted @ 2020-08-08 18:41
大牛半路出家
阅读(577)
评论(0)
推荐(0)
摘要：
一、盒子没有固定的宽和高 方案1、Transforms 变形 这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上 top: 50%; left: 50%; 优点： 1. 内容可变高度 2. 代 阅读全文
posted @ 2020-08-08 18:30
大牛半路出家
阅读(770)
评论(0)
推荐(0)
摘要：
CSS布局的四种定位方式 1、static（静态定位）： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。 2、relative（相对定位）： 定位为relative的元素脱离正常的文档流，但其在文档流中的位 阅读全文
posted @ 2020-08-08 18:26
大牛半路出家
阅读(228)
评论(0)
推荐(0)
摘要：
常见的浏览器端的存储技术有哪些？ 浏览器端: cookie webStorage(localStorage、sessionStorage) userData indexedDB 服务器端： session 阅读全文
posted @ 2020-08-08 18:19
大牛半路出家
阅读(262)
评论(0)
推荐(0)
摘要：
第一种——调用localStorage在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值，实现不同标签页之间的通信。 标签页1： <input id="n 阅读全文
posted @ 2020-08-08 18:18
大牛半路出家
阅读(444)
评论(0)
推荐(0)
摘要：
从三个方面就前端性能进行总结：网络方面、DOM操作及渲染方面、数据方面。 1、网络方面 减少http请求：合并js文件/合并css文件/雪碧图的使用(css sprite)/使用base64表示简单的图片 减小资源体积：gzip压缩/js混淆/css压缩/图片压缩 缓存：DNS缓存 /CDN部署与缓 阅读全文
posted @ 2020-08-08 18:16
大牛半路出家
阅读(858)
评论(0)
推荐(0)
摘要：
CSS动画属性会触发整个页面的重排，重绘,box-shadow和gradients的性能杀手 在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。 阅读全文
posted @ 2020-08-08 18:14
大牛半路出家
阅读(716)
评论(0)
推荐(0)
摘要：
1、拖拽释放(Drap and drop) API ondrop 2、自定义属性data-id 3、语义化更好的内容标签(header,nav,footer ,aside, article, section) 4、地理(Geolocation) API 5、表单控件 calendar , date 阅读全文
posted @ 2020-08-08 18:09
大牛半路出家
阅读(655)
评论(0)
推荐(1)
摘要：
前端开发中，如何优化图像？图像格式的区别？ 1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。 2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG 阅读全文
posted @ 2020-08-08 18:05
大牛半路出家
阅读(424)
评论(0)
推荐(0)
摘要：
在html设计编写中，样式有四种方式作用于网页，分别是：内联样式，嵌套样式，链接样式 ( link )，导入样式(@import )。内联样式以及嵌套样式在这里我们就不做过多的介绍，我们都知道内联样式只对当前标签有用，嵌套样式只在当前页面起作用；我们接着说链接样式 link 与导入样式 @impor 阅读全文
posted @ 2020-08-08 18:03
大牛半路出家
阅读(384)
评论(0)
推荐(0)
摘要：
Trident 内核：IE，搜狗高速浏览器等 Gecko 内核：Mozilla Firefox（火狐浏览器），Netscape6及以上版本 Webkit 内核：Safari 、曾经的 Chrome Presto 内核：Opera 7到Opera12.17（欧朋浏览器）之间的版本采用的内核 Blink 阅读全文
posted @ 2020-08-08 18:01
大牛半路出家
阅读(299)
评论(0)
推荐(0)
摘要：
渲染的流程如下： 1.解析HTML文件，创建DOM树。 自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。 2.解析CSS。 优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式； 3.将CSS与DOM合并， 阅读全文
posted @ 2020-08-08 17:58
大牛半路出家
阅读(251)
评论(0)
推荐(0)
摘要：
总结：HTTPS就是使用SSL/TLS协议进行加密传输，让客户端拿到服务器的公钥，然后客户端随机生成一个对称加密的秘钥，使用公钥加密，传输给服务端，后续的所有信息都通过该对称秘钥进行加密解密，完成整个HTTPS的流程 详细链接https://www.cnblogs.com/TF511/article 阅读全文
posted @ 2020-08-08 17:55
大牛半路出家
阅读(914)
评论(0)
推荐(1)
浙公网安备 33010602011771号