共享博客 - 简单搜索

浏览器标准模式和怪异模式之间的区别是什么

2024年04月12日这是个历史遗留问题，W3C标准推出前，旧的页面都是根据旧的渲染方式对页面进行渲染的，因此在W3C标准推出后为了保证旧页面的正常显示，保持浏览器的兼容性，这样浏览器上就产生了能够兼容W3C标准渲染的严格模式和保证旧页面显示的怪异模式的标准兼容模式。具体表现： 1. 在严格模式中：width是内容宽度，元素真正的宽度 = margin一left + border一left一width + padding一left + width + padding一right

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

React.js Reactjs的相关知识？ Reactjs的缺点？

2024年04月11日 React.js 只是一个视图库（1）声明式设计（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。（3）灵活：可以与已知的框架或库很好的配合。（4）JSX：是js语法的扩展，不一定使用，但建议用。（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。Reactjs的缺点？ 1．一个组件所需要的数

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

react生命周期函数

2024年04月11日一、初始化阶段： getDefaultProps:获取实例的默认属性 getInitialState:获取每个实例的初始化状态 componentWillMount:组件即将被装载、渲染到页面上 render:组件在这里生成虚拟的DOM节点 componentDidMount:组件真正在被装载之后二、运行中状态： componentWillReceiveProps:组件将要接收到属性的时候调用 shouldComponen

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

vue与react的对比，如何选型？从性能，生态圈，数据量，数据的传递上，作比较

2024年04月11日 1) React和Vue有许多相似之处，它们都有：使用 Virtual DOM 提供了响应式（Reactive)和组件化（Composable)的视图组件。将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。2) 性能：到目前为止，针对现实情况的测试中，Vue的性能是优于React的。3) 生态圈 Vue.js: ES6+Webpack+unit/e2e+Vue+vue一router+单文件组件+vuex+iVew

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

谈谈你对webpack的看法？

2024年04月11日 WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。webpack的两大特色： 1.code splitting（可以自动完成）

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

精灵图和base64如何选择？

2024年04月11日 css精灵图，用于一些小的图标不是特别多，一个的体积也稍大，比如大于10K (这个没有严格的界定）。base64,用于小图标体积较小（相对于css精灵），多少都无所谓。字体图标，用于一些别人做好的图标库（也有少数自己去做的）用起来比较方便，他的图标只能用于单色，图标用只能于一种颜色。

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

div 标签的用法以及定义

2024年04月11日 div（无语义标签）作用：主要用于划分板块语法：<div class="名" style="样式"></div>定义和用法 <div> 可定义文档中的分区或节（division/section）。 <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

iframe框架的作用及语法

2024年04月11日主要作用：用来引入一些外部的公共部分内容。语法：<iframe src="引入文件路径" width="数值" height="数值" frameborder="1|0" scrolling="yes|no|auto"></iframe>注意：如何隐藏（去掉）iframe的滚动条： scrolling="no"

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css基础 css语法 Css样式表的创建样式表的优先级

2024年04月11日一、Css概念及特点 css——层叠样式表特点：实现了结构与表现相分离二、css语法 css由选择符和声明两大部分组成，声明又由属性和属性值两部分组成选择器 {属性:属性值;} eg： p{ color: red; } 注：①Css样式中所有的标点符号都必须是英文状态下的 ②Css属性和属性值用冒号连接，每条声明结束都要加分号三、样式表的创建 1.内联样式（行间样式，行内样式）

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css选择器 id class 标签群组后代通用伪类选择器详细介绍

2024年04月11日 1.id选择器语法：<标记 id="id名"></标记>#id名{ 属性: 属性值; } eg:<h1 id="box">懒猪</h1>#box{ color: red; } 注：①id选择器的优先级最高，id名是唯一的，不能出现同名id； ②id名的命名要语义化，常用的命名方法：驼峰命名法（#subNavTi

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

JS实现支付密码输入框常用支付效果

2024年04月11日最近上班做项目，需要用到一个类似支付宝/微信支付时候的密码输入框，这种输入框需要判断很多，只能输入数字，并且从第一位输入，如果输入字母会不显示（也就是没输入，为空，直到输入数字才可以），第一位输入完成之后光标进入第二位，以此类推，并且删除又要从输入的最后一位开始删除，不能指定某个位置来进行删除...具体效果如上方，大家可利用下方代码来查看... 本次代码特别感谢温柔、善良、可爱、漂亮的小姐姐“小母”的帮助，下方是完整代码，大家可自行使用。

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

CSS的权重选择器的权重 CSS层叠的含义

2024年04月11日当我们给同一个元素多次设置样式时，会出现权重问题，优先使用权重较高的样式，我们将权重分为四个等级：第一等：内联样式 <h1 style="..."></h1> 权重 1000 第二等：id选择器权重 100 第三等：class选择器，伪类选择器，属性选择器权重 10 第四等：标签选择器，伪元素选择器权重 1群组选择器权重：每个选择器自身的权重后代选择器权重：所有选择器权重之和CSS层叠的含义层

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

前端开发字体类属性语法详细介绍

2024年04月10日 1.字体类型：语法：font-family: 字体1,字体2,字体3; eg：body{ font-family: "微软雅黑","Microsft YaHei","Arial"; } 注：①浏览器会优先识别字体1，如果找不到，识别字体2，如果所有列出的字体都找不到，显示浏览器默认字体 ②多个字体之间用逗号分隔 ③中文字体要加双引号，英文字

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

HTML中 input标签中的type的属性有哪些具体功能介绍

2024年04月10日更新这篇文章，是因为前几天上班中遇到了 type="hidden" 不是很常用，突然碰到还真没怎么注意，差点忽略；下面这次给大家详细介绍下 type 中的一些属性值：定义和用法： type 属性规定 input 元素的类型。button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。checkbox 定义复选框。file 定义输入字段和 "浏览"按钮，供文件上传。image 定义图

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

HTML 中文本类属性语法详细介绍

2024年04月10日 1.水平对齐方式语法：text-align: left|center|right|justify; left 左对齐； center 居中； right 右对齐； justify 两端对齐（只对英文起作用）；注：要让文本或图片等元素居中对齐，要给所在父元素设置 text-align 属性；2.行高语法：line-height: 数值+单位; eg:line-height: 36px; 注：①line-height不允许设置负值

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS