CSS 中的rese.css和normalize.css的区别

最新推荐文章于 2024-11-01 15:27:05 发布
原创 最新推荐文章于 2024-11-01 15:27:05 发布 · 178 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文探讨了两种解决浏览器默认样式差异的方法：CSS重置和Normalize.css。CSS重置通过覆盖所有浏览器样式实现统一，而Normalize.css保留有用的默认样式，修复浏览器bug并确保跨浏览器一致性。Normalize.css还提供了详细的注释和文档，优化了CSS的可用性。

Reset
重置浏览器的 css 默认属性 ，浏览器的品种不同，样式不同，然后重置，让他们统 一。（暴力的，强制的）。
Normalize
Normalize.css 是 css reset 的替代方案，保护有用的浏览器默认样式而不是完全去 掉它们（温和的，根据浏览器特性的）
一般化的样式：为大部分 HTML 元素提供
修复浏览器自身的 bug 并保证各浏览器的一致性
优化 CSS 可用性：用一些小技巧
解释代码：用注释和详细的文档来。

CSS Tools: Reset CSS（重置CSS）
weixin_53542481的博客
01-19 1036
HELLO 大家好！ 给大家分享一个网站，一种粗暴式的Reset CSS（重置CSS），本人一直在用，非常好用。 重置样式表的目标是减少浏览器在默认行高、边距和标题字体大小等内容中的不一致。 https://meyerweb.com/eric/tools/css/reset/ 这是Reset CSS代码，需要的可以直接粘贴复制用； /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public
精选资源
bus-reservation.zip_bus java_javabus8_javabus入口_javabus最新版本_rese
09-19
"rese" 可能是 "reservation" 的缩写，进一步确认了应用的核心功能。 【描述】"Application for bus reservation in java" 描述了这是一个基于Java的公交预订系统。它很可能提供了用户界面，允许乘客查询、预定和...
关于CSS Reset 那些事（一）之 历史演变与Normalize.css
weixin_33670713的博客
07-27 277
前言 近期在翻阅陈旧的历史资料，整理之前饱受争议的CSS Reset问题，不过好像十多年过去，现在大家统一了口径，纷纷推荐使用Normalize.css，包括Bootstrap都进行了内置使用，可见它的认可程度之高。 由于文章涉及内容较多，会分为章节进行介绍： 第一章， 整理CSS Reset历史的演变痕迹，从第一份CSS Rese...
Normalize.css简书
js_admin的博客
08-14 3272
简介 Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap，HTML5 Boilerplate，GOV.UK，Rdio，CSS Tricks以及许许多多其
Css reset 和Normalize.css
weixin_47175934的博客
01-04 805
Css reset 和Normalize.css
vue或者react的css样式初始(css样式重置)——reset.css与normalize.css
yiguoxiaohai的博客
05-17 8255
前言 为什么要样式重置即 css reset ？ 原因：不同的浏览器在实现w3c标准过程中，对各个元素的实现是不一致的。这就导致了同一个页面在不同的浏览器中比如ie和chrome中，表现有差异。为了解决这个问题，即不同浏览器中表现的一致性，需要使用css reset。 实现 初学 * { margin: 0; padding: 0; border:0; } 优缺点：简单粗暴，迅速实现，但是* 通配符需要将所有标签遍历，但标签数量和种类较多的时候，会增加客服端的负担，影响网页性能
前端三千问---第（6）问：reset.css与normalize.css ---css中的样式重置
斑码教育的博客
10-23 477
1，什么是css reset？ 顾名思义，css reset，样式重置。即重新设置界面的样式。 2，为什么要用css reset？ 不同的浏览器在实现w3c标准过程中，对各个元素的实现是不一致的。这就导致了同一个页面在不同的浏览器中比如ie和chrome中，表现有差异。为了解决这个问题，即不同浏览器中表现的一致性，需要使用css reset。 3，如何使用css reset？ 这个很简单，页面的头部引入css文件即可。 在早期，有一种简单粗暴的方法：在头部直接添加style 标签。 *{margin: 0;
精选资源
reset.css下载
03-14
亲测 可用 在HTML标签在浏览器里有默认的样式，例如 p 标签有... 但是不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的
信息安全_数据安全_The Value of Human Centered Rese.pdf
08-22
信息安全_数据安全_The Value of Human Centered Rese 法律法规 安全管理 信息安全 信息安全 解决方案
FAIR's_research_platform_for_object_detection_rese_Detectron.zip
08-24
FAIR's_research_platform_for_object_detection_rese_Detectron
reset.css文件
09-25
不同浏览器对相同标签的显示效果，有时候往往不同，那么在做项目的时候就需要对基本的样式进行设置，以达到在不同浏览器下显示效果是相同的
使用css reset 还是使用Normalize.css
轻风细雨_林木木
02-27 1021
Normalize.css 则是一种更加轻量级的方案，它保留了一些有用的默认样式，并且修复了一些浏览器之间的不一致性。Normalize.css 的目标是在保留有用的默认样式的同时，尽量减少不同浏览器之间的差异。相比之下，使用 Normalize.css 可以更快速地实现一致的样式，但是可能会有一些你不想要的默认样式。它会删除浏览器默认的样式，然后你需要自己重新定义所有元素的样式。使用 CSS Reset 可以给予你更大的自由度，但也需要你更多的工作来定义样式。如果你希望从一个更加“
Normalize.css和 reset.css 区别
wy_Blog的博客
03-03 1287
相同点：     1.重置样式     2.保持跨浏览器一致性    不同点：     reset:重置默认样式  目的也是浏览器表现一致性     Normalize：有一些默认的样式不会去做修改  （例如ul当中的li是不是每个浏览器都有点）
Normalize.css和Reset CSS有什么区别？
p15097962069的博客
01-10 898
我知道CSS重置是什么，但是最近我听说了这个叫做Normalize.css的新东西。 Normalize.css和Reset CSS有什么区别？ 标准化CSS和重置CSS有什么区别？
reset.css normalize.css,normalize与css reset的区别
weixin_39907157的博客
08-03 243
Normalize.css只是一个很小的css文件，相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。也就是说，Normalize.css是一种CSS reset的替代方案。Normalize.css 保护了有价值的默认值reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多磨人...
样式重置 Normalize.css 和 reset.css
yuroll的博客
03-13 334
reset.css的代码内容。
【CSS】CSS 样式重置 (normalize.css 和 reset.css) 和通用样式配置
小秀的博客
11-01 5028
一般来说，每一个项目初始化阶段都需要样式重置和样式定制化。样式重置最常用的就是 normalize.css 和 reset.css 这两个文件。所以我再项目中一般会安装 normalize.css。
重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？
tianxianghuiwei的博客
06-14 381
重置（resetting）CSS 和标准化（normalizing）CSS 是在网页开发中用于处理浏览器默认样式差异的两种不同方法。综上所述，选择重置还是标准化CSS取决于具体的项目需求和开发者的偏好，以及对浏览器默认样式的处理策略。
[css] Reset CSS和Normalize CSS的区别是什么？
歌谣的博客
02-19 615
[css] Reset CSS和Normalize CSS的区别是什么？ Reset：将所有浏览器的默认样式都统一化，注重的是跨浏览器统一样式，用户还要自行添加一些默认样式。 Normalize：会根据各个浏览器的不同保留有用的浏览器特色样式，修复浏览器的一些BUG，更注重易用性。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
if (inventory_records_id !== '') { $('#print').show(); async function axios_get_3() { const {data: rese} = await axios.get(BaseUrl + '/api/inventory_records/get_obj', { params: { inventory_records_id: inventory_records_id }, headers: { 'x-auth-token': token } }) let data = rese.result.obj Object.keys(form_data2).forEach((key) => { form_data2[key] = data[key]; $("#"+key).val(form_data2[key]) }); 这一段是什么意思
最新发布
06-04
<think>好的，我需要理解用户提供的代码中关于通过axios获取数据并填充表单的部分。首先，用户提到的代码片段涉及使用axios库从后端API获取特定inventory_records_id对应的数据，并将返回的数据填充到HTML表单字段中。我需要结合之前的代码分析，特别是关于数据回填的部分，来解释这一过程是如何实现的。首先，查看代码中的JavaScript部分，特别是处理表单初始化的函数。用户提到当存在inventory_records_id时，代码会发送GET请求到/api/inventory_records/get_obj接口，获取对应的数据。这部分可能使用了axios的get方法，参数中包含inventory_records_id。接下来，数据获取成功后，如何将返回的数据填充到表单字段中？代码中可能遍历了返回的数据对象，并将每个字段的值赋给对应的表单元素。例如，使用document.getElementById或jQuery选择器来找到特定的输入框，并设置其value属性。同时，对于下拉菜单（如employee_users），可能需要动态设置选中的option。此外，权限控制部分也很重要。代码中可能根据用户的权限（如管理员或普通员工）来决定哪些字段可以编辑。例如，某些字段在编辑模式下可能被禁用，或者在查看详情时不可修改。这部分逻辑可能通过检查sessionStorage中的用户组信息来实现。 在处理日期字段时，如inventory_date，代码可能使用了LayUI的日期选择器组件，将返回的日期字符串格式化为特定的显示格式。例如，后端返回的日期可能是ISO格式，前端需要转换为yyyy-MM-dd格式显示在输入框中。另外，需要注意错误处理。例如，如果axios请求失败，是否有相应的错误提示？代码中是否有try-catch块或.catch()方法来处理异常情况，防止页面崩溃？最后，用户可能希望了解整个流程的步骤，从发送请求到数据填充的每个环节，以及涉及的权限控制和数据格式化处理。需要将这些步骤分解并逐一解释，确保用户能够理解代码的逻辑和实现细节。</think>### 代码功能解析：通过axios获取数据并填充表单 --- #### **1. 数据获取流程** ```javascript if (inventory_records_id !== '') { async function axios_get_3() { const {data: rese} = await axios.get(BaseUrl + '/api/inventory_records/get_obj', { params: {inventory_records_id: inventory_records_id}, headers: {'x-auth-token': token} }); const data = rese.result.obj; // 数据填充逻辑 } axios_get_3(); } ``` - **步骤解析**： 1. **参数检查**：通过`location.search`获取URL中的`inventory_records_id`参数 2. **发送请求**：使用`axios.get`请求后端接口`/api/inventory_records/get_obj`，传递`inventory_records_id`作为查询参数[^3] 3. **认证处理**：请求头包含`x-auth-token`用于身份验证 4. **数据解析**：从响应结果`rese.result.obj`中提取目标数据 --- #### **2. 数据填充逻辑** ```javascript Object.keys(form_data2).forEach((key) => { form_data2[key] = data[key]; $("#"+key).val(form_data2[key]); }); ``` - **字段映射**： - 遍历预定义的`form_data2`对象，将后端返回的`data`字段值逐一赋值到表单输入框 - 使用`$("#"+key).val()`动态设置输入框的值，例如： ```javascript $("#warehouse_name").val(data.warehouse_name); // 填充仓库名称 $("#inventory_date").val(data.inventory_date); // 填充日期 ``` --- #### **3. 特殊字段处理** ##### **下拉菜单动态选中** ```javascript // 处理员工选择下拉框 for (let key in data) { if (key === 'employee_users') { const options = document.querySelector('#employee_users').options; for (let i = 0; i < options.length; i++) { if (options[i].value == data[key]) { options[i].selected = true; // 设置选中项 layui.form.render("select"); // 刷新LayUI下拉样式 } } } } ``` - **实现逻辑**： - 遍历所有`option`元素，匹配后端返回的`employee_users`值 - 通过`selected = true`设置选中状态 - 调用`layui.form.render()`刷新LayUI组件样式[^1] ##### **日期格式化** ```javascript laydate.render({ elem: '#inventory_date', format: 'yyyy-MM-dd', done: (value) => { form_data2.inventory_date = value + ' 00:00:00'; // 时间补全 } }); // 数据回填时格式化日期显示 $("#inventory_date").val(layui.util.toDateString(data.inventory_date, "yyyy-MM-dd")); ``` - **关键点**： - 使用LayUI的`laydate`组件将原始日期格式化为`yyyy-MM-dd`格式显示 - 存储时补充时间部分`00:00:00`以保证后端数据一致性[^1] --- #### **4. 权限控制逻辑** ```javascript if ((form_data2['inventory_records_id'] && $check_field('set', 'warehouse_name')) || (!form_data2['inventory_records_id'] && $check_field('add', 'warehouse_name'))) { // 允许编辑 } else { $("#warehouse_name").attr("disabled", true); // 禁用字段 } ``` - **权限验证**： - 通过`$check_field`函数检查用户对字段的`add/set`权限 - 若无权限则禁用输入框(`disabled = true`)[^3] --- ### 流程图解 ```mermaid graph TD A[检查URL中的inventory_records_id] -->|存在| B[发送GET请求获取数据] B --> C{请求成功?} C -->|是| D[遍历数据并填充表单字段] D --> E[处理特殊字段:下拉菜单/日期] E --> F[应用权限控制] C -->|否| G[显示错误提示] ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值