web前端常见问题（默认值设置）

最新推荐文章于 2024-04-25 14:21:48 发布
最新推荐文章于 2024-04-25 14:21:48 发布
阅读量804 收藏 2
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64584631/article/details/125692244
版权

初学者在编写html代码并进行调试的过程中，可能会困惑于这种情况：

<!DOCTYPE html>
<head>
   <style>
        div {
            width: 100%;
            margin: 0px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        我是div
    </div>
</body>
</html>

我们在给特定的元素设置样式时，即使设置的宽度为100%，外边距设置为0 ，这个元素的宽度也依然无法填充整个页面，并且与网页的顶部也有一定间隙。

这是因为，body元素的margin属性的默认值为8px，即外边距为8个像素。

这就导致了body下的所有子元素即使宽度、高度都设置成100%，都无法填充整个网页。

为了解决这一问题，我们通常要创建一个reset.css文件，对元素的默认值进行重新设置：

 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

然后在往后编写的每一个html代码时，都使用link标签与reset.css进行关联。

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./reset.css" type="text/css">
   <style>
        div {
            width: 100%;
            margin: 0px;
            padding: 0px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        我是div
    </div>
</body>
</html>

这样一来，就可以实现默认值的重置了。

 

握似绿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS中常用的 reset.css文件
05-05
CSS中常用的 reset.css文件，用于重置html默认样式
VUE组件传值案例讲解
红岸基地
07-28 1200
写在前面 好吧我承认我疏忽了，我一直以为我的博客是将vue的一些常见操作全部写完了的，但是直到我写组件的时候突然想起来看一下自己写的博客是不是有问题的才发现，组件之间的传值竟然一直没动过，好吧，我承认我自卑，我真的很怕黑，每当夜晚来临的时候我都很狼狈…咳咳，放错了，不好意思，我承认我忘了，我真的很劳累，每当粉丝问问题的时候我都慌的一批(以为哪里又又又又误人子弟了)…吓得我赶紧写个例子给你们，开整… 搞明白谁是“父”谁是“子” 没写之前呢先搞明白一个问题，组件引用的时候到底谁是老子，谁是儿子，被打的是儿子，
数据绑定
chenhua_hqkj的专栏
06-09 878
<br />第二十六章 数据存取与绑定 <br />　　　　　　　　　　　　　　　　　　　　 　　　　　 第五部分 数据绑定 <br /> <br /> <br />　　本章将描述将XML数据结构连接到LZX应用程序中的各种方法。见25章　数据，XML和XPath　对在OpenFace 应用中的数据绑定与修改进行简单的讨论，以这些基本概念来跟深入的学习。 目录1数据绑定概述1.1数据对象的类型1.2数据交互的两种方法1.2.1LzDataNodes 和DOM API1.2.2数据指针 和数据路径2OpenF
vue报错[Vue warn]: The data property "record" is already declared as a prop. Use prop default value in...
weixin_30542079的博客
08-12 1517
当我写了一个子组件，点击打开子组件那个方法时报了一个错 这句话说明意思呢？谷歌翻译一下↓ 数据属性“record”已声明为prop。 请改用prop默认值。 感觉翻译的有点怪，通过最后修改代码后大概意思就是，子组件接收父组件值得时候已经用了record这个key，但是在子组件的data里又定义了record所以报错 转载于:https://www.cnblogs.c...
The data property “xxx” is already declared as a prop. Use prop default value instead.
m0_61667253的博客
10-31 1万+
今天写组件时报了个错：The data property “xxx” is already declared as a prop. Use prop default value instead. 翻译一下：数据属性“xxx”已声明为prop。改为使用属性默认值。 原来是在组件传值时，传过来了一个属性，但是在我的项目data中也定义了一个属性 大致思路就是：访问data 和methods中的数据之外，还访问了props组件传递过来的值，如果发现data数据字段中的key值已经被定义，那么props传
浏览器---reset.css浏览器默认样式表重置（user agent stylesheet）
COCOLI_BK的博客
12-02 5614
当你在浏览器控制台查看对应元素的样式的时候，会发现一些样式标有(user agent stylesheet),同时不能修改，那就表明该样式是浏览器自身对元素的设置样式，即浏览器默认样式表；当然不同浏览器之间的默认样式会有出入，同时相同浏览器的不同版本之间也会有细微差别！一般推荐使用normalize.css，不会初始化掉基础的元素样式！这里附上PC和APP端的相应reset.css样式表。APP端初始化样式表。
CSS常用的reset文件:reset.css
热门推荐
qq_42834220的博客
05-17 5万+
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a...
CSS重置样式表
雷爷的博客
09-03 2324
CSS重置样式表 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre...
目前比较全的CSS重设(reset)方法总结
weixin_34194359的博客
10-04 237
在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。 　　当今流行的浏览器(如:Firefox、Ope...
css reset_浏览器样式重置
chen__cheng的博客
02-03 3517
css reset出现原因 因不同浏览器对css的解析效果存在差异，为了减少各种浏览器下默认样式的差异，采用此方法重置元素在不同浏览器下的默认值。 最开始的reset css 方式 * { padding: 0; margin: 0; } 此方法的学名为：Global White Space Reset，最开始css reset的方式，但是这种方式存在一定的弊端： * 导致css渲染引擎在渲染css的时候，使用 * 遍历整个DOM树，影响渲染性能 * 由于是对所有标签元素的重置样式，因此
django前端页面下拉选择框默认值设置方式
09-16
主要介绍了django前端页面下拉选择框默认值设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
mysql中datetime类型设置默认值方法
09-09
下面小编就为大家分享一篇mysql中datetime类型设置默认值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Mysql select语句设置默认值的方法
09-10
主要介绍了Mysql select语句设置默认值的方法,需要的朋友可以参考下
angular select 默认值设置方法
08-30
下面小编就为大家带来一篇angular select 默认值设置方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML中的文档声明
小卡酷谋的博客
04-22 1179
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
HTML中meta标签属性详解
最新发布
猫老板的豆
04-25 878
meta>标签是一种用于在 HTML 文档头部提供元数据的标签。它通常位于标签内，用于向浏览器和搜索引擎提供关于网页的信息，而不是直接展示给用户是HTML标记head区的一个关键标签，用于描述一个HTML网页文档的属性，提供有关页面的元信息。它并不会显示在页面上，但对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面）、搜索引擎（SEO）或其他web服务。
HTML随机点名程序
m0_65992344的博客
04-22 485
HTML随机点名程序
前端三剑客 HTML+CSS+JavaScript ⑤ HTML文本标签
m0_73983707的博客
04-24 474
1.这些不常用的文本标签，编码时不必过于纠结(酌情而定，不用也行)2.blockquote和address是块级元素，其他的文本标签，都是行内元素3.有些语义感不强的标签，很少使用，例如：重要的、语义感强的标签即可；
用html写一个旋转菜单
liulang68的博客
04-24 761
【代码】用html写一个旋转菜单。
在web里 script怎么设置默认值
06-12
在 Web 开发中，可以使用 JavaScript 来设置表单元素的默认值。具体来说，可以在 HTML 中使用 `value` 属性来设置表单元素的默认值，如下所示： ```html <form> <input type="text" name="username" value="default_username"> <input type="password" name="password" value="default_password"> <input type="submit" value="Submit"> </form> ``` 在这个例子中，我们设置了一个文本框和一个密码框，它们的默认值分别为 `default_username` 和 `default_password`。当用户打开这个表单时，这些默认值会显示在文本框和密码框中。 除了使用 `value` 属性，还可以使用 JavaScript 来动态设置表单元素的默认值。具体来说，可以在页面加载时使用 JavaScript 来获取表单元素，并设置它们的值，如下所示： ```html <form> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <input type="submit" value="Submit"> </form> <script> document.getElementById("username").value = "default_username"; document.getElementById("password").value = "default_password"; </script> ``` 在这个例子中，我们使用了 `getElementById` 方法来获取文本框和密码框的 DOM 元素，然后使用 `value` 属性来设置它们的值。当页面加载时，JavaScript 会自动执行这些代码，从而设置表单元素的默认值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值