我知道什么是CSS Reset,但最近我听说过这个名为Normalize.css的新东西
Normalize.css和Reset CSS有什么区别?
规范化CSS和重置CSS有什么区别?
它只是CSS重置的新热门词吗?
我有一个简单的html页面,其中有一些风格,我不明白为什么增加一些上边距?
这是来源:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #ffffcc;
}
#content {
width: 900px;
margin-left: auto;
margin-right: auto;
border: 0;
background-color: #ccccff;
}
</style>
</head>
<body>
<div id="content">
<div>
<ul>
<li><a href="./xxx.html">xxx</a>
</li>
<li><a href="./yyy.html">yyy</a>
</li>
<li><a href="./zzzz.html">zzz</a>
</li>
</ul>
</div>
</div>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
这是"烦人"的空间.

如果我添加"margin-top:0;" 这个空间已经消失了......但是在我明白为什么之前,我并不开心.
我在 Chrome 开发人员工具中发现了很多关于灰色样式的问题,但没有一个能描述我的奇怪行为。我在 CSS 文件中有简单的类样式。出于某种原因,我可以编辑其中一个,但不能编辑另一个:
CSS文件:
.result {
background-color: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
}
.result_image {
height: 80%;
overflow: hidden;
}
.result_text {
font-size: 13.6px;
margin-left: 5px;
font-weight: bold;
height: 20%;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="result">
<div class="result_image"><img src="..."></div>
<div class="result_text">Some text</div>
</div>
Run Code Online (Sandbox Code Playgroud)
正如您在屏幕截图中看到的,我可以编辑 div class="result_image",但不能编辑 div class="result_text"。我认为这个问题与 Chrome 声称灰色样式来自样式标签有关,但两种样式都在文件“qb1.core.css”中。
图像
在反应应用程序顶部遇到空白
检查图像
反应应用程序顶部出现奇怪的空白。我开发的应用程序甚至不是一个大的反应应用程序,但有一些东西占据了那里的空间并在那里创建了一个空白空间。我已经删除了旧项目并做了这个新项目,认为它会消除我的错误,但结果相同。我正在使用路由包来通过我的应用程序react-route-dom进行路由。我尝试了所有可能的方法,但找不到错误或触发反应应用程序顶部空白的代码行。请任何人帮助我必须提交我的项目!
应用程序.js
import React from 'react'
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}export default App
Run Code Online (Sandbox Code Playgroud)
应用程序.css
.App {
text-align: center;
background: red;
height: 30%;
}
Run Code Online (Sandbox Code Playgroud)
索引.js
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'
const app = <BrowserRouter><App/></BrowserRouter>
ReactDOM.render(
<React.StrictMode>
{app}
</React.StrictMode>,
document.getElementById('root') );
reportWebVitals()
**index.css**
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', …Run Code Online (Sandbox Code Playgroud)