- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在学习 HTML 和 CSS,并且遇到了一个问题,即兄弟元素之间存在很大差距。
我在 stack overflow 和 web 上做了一些搜索,认为这是由 margin collapse 引起的。
我在 CSS 中添加了三行注释(两行在 .home-section 选择器中,一行在 .products-section 选择器) 并且这些中的每一个似乎都单独解决了问题但我不知道这些是否是最佳解决方案或者我没有在其他地方正确构建我的代码。我不想养成任何坏习惯。
非常感谢任何帮助,如果你能给我指出任何关于该主题的面向初学者的阅读 Material ,那也将是极好的。
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Montserrat:400,800|Sacramento" rel="stylesheet">
<title>Test banner</title>
</head>
<body>
<header class="banner">
<div class="logo">
<img src="../images/iconfinder_umbrella-rain-summer-sun-protection_2189569.svg" alt="Umbrella logo">
</div>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li class="collapsed-menu"><a href="#"><i class="fas fa-bars fa-lg"></i></a></li>
</ul>
</header>
<section id="home" class="home-section">
<div class="text-block">
<h6>What we do</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section id="products" class="products-section">
<div class="product1">
<h6>Product 1</h6>
</div>
</section>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
.banner {
height: 7vh;
width: 100vw;
background-color: #096386;
position: fixed;
z-index: 10;
top: 0;
}
.logo {
margin-left: 3vw;
height: 7vh;
line-height: 7vh;
display: inline-block;
}
.logo img {
height: 6vh;
vertical-align: middle;
}
.nav {
float: right;
list-style: none;
margin-right: 3vw;
line-height: 7vh;
}
.nav li {
display: inline-block;
font-size: 1.5em;
margin: auto;
}
.nav li a {
margin: 1vh;
color: #f0eec8;
text-decoration: none;
padding: 0.5vh 1vh;
}
.nav li a:hover {
background-color: #f0eec8;
padding: 0.5vh 1vh;
border-radius: 3px;
color: #096386;
}
.nav li a i {
color: #f0eec8;
}
.nav .collapsed-menu {
display: none;
}
.home-section {
height: 100vh;
width: 100vw;
//border: 1px red solid;
//margin-bottom: -15vh;
}
.home-section::after {
content: "";
height: 100vh;
background-color: lightblue;
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.home-section .text-block {
width: 40vw;
margin-top: 15vh;
margin-left: 10vh;
padding: 2vh;
position: relative;
max-height: 70vh;
overflow: hidden;
}
.home-section .text-block::after {
content: "";
background-color: #b3b3b3;
border-radius: 3vh;
opacity: 0.8;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.home-section .text-block h6 {
font-family: "Archivo Black", sans-serif;
font-size: 3em;
padding-bottom: 1vh;
}
.home-section .text-block p {
opacity: 1;
font-size: 1.3em;
text-align: justify;
}
.products-section {
height: 100vh;
width: 100vw;
background-color: #f0eec8;
z-index: 20;
//margin-top: -15vh;
}
/*# sourceMappingURL=main.css.map */
最佳答案
如果你在 position:absolute;
中使用 :before 或 :after 伪元素,那么你需要将 parent 设为 position:relative;
,根据标题高度和其他填充更改更改 margin-top:7vh;
可以引用自cssnewbie和来自 here 的 margin-padding
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
.banner {
height: 7vh;
width: 100vw;
background-color: #096386;
position: fixed;
z-index: 10;
top: 0;
}
.logo {
margin-left: 3vw;
height: 7vh;
line-height: 7vh;
display: inline-block;
}
.logo img {
height: 6vh;
vertical-align: middle;
}
.nav {
float: right;
list-style: none;
margin-right: 3vw;
line-height: 7vh;
}
.nav li {
display: inline-block;
font-size: 1.5em;
margin: auto;
}
.nav li a {
margin: 1vh;
color: #f0eec8;
text-decoration: none;
padding: 0.5vh 1vh;
}
.nav li a:hover {
background-color: #f0eec8;
padding: 0.5vh 1vh;
border-radius: 3px;
color: #096386;
}
.nav li a i {
color: #f0eec8;
}
.nav .collapsed-menu {
display: none;
}
.home-section {
height: 100vh;
width: 100vw;
position:relative;
padding: 2vh 0vh;
}
.home-section::after {
content: "";
height: 100vh;
background-color: lightblue;
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.home-section .text-block {
width: 40vw;
margin-top: 7vh;
padding-top:7vh;
margin-left: 10vh;
padding: 2vh;
position: relative;
max-height: 70vh;
overflow: hidden;
}
.home-section .text-block::after {
content: "";
background-color: #b3b3b3;
border-radius: 3vh;
opacity: 0.8;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.home-section .text-block h6 {
font-family: "Archivo Black", sans-serif;
font-size: 3em;
padding-bottom: 1vh;
}
.home-section .text-block p {
opacity: 1;
font-size: 1.3em;
text-align: justify;
}
.products-section {
height: 100vh;
width: 100vw;
background-color: #f0eec8;
z-index: 20;
//margin-top: -15vh;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Montserrat:400,800|Sacramento" rel="stylesheet">
<title>Test banner</title>
</head>
<body>
<header class="banner">
<div class="logo">
<img src="../images/iconfinder_umbrella-rain-summer-sun-protection_2189569.svg" alt="Umbrella logo">
</div>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li class="collapsed-menu"><a href="#"><i class="fas fa-bars fa-lg"></i></a></li>
</ul>
</header>
<section id="home" class="home-section">
<div class="text-block">
<h6>What we do</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section id="products" class="products-section">
<div class="product1">
<h6>Product 1</h6>
</div>
</section>
</body>
</html>
关于html - 这是 margin 崩溃的问题吗?其他人如何最佳地处理这个问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55760750/
当我设置 margin-right: 50px;我没有看到任何效果,但是当我替换 margin-right: 50px; 时左边距:50px;或 margin-top: 50px;我确实看到了效果。这
CSS .title{ margin-top: 200px; // does not work! margin-left: 20px; font-weight: bold;
我不知道,但是 li 元素的 margin-top 只有在它大于 h2 元素的 margin-bottom 时才会起作用,我想知道为什么? Test1 Test2 谢谢。 最佳答案 您所描述的听起
我有 2 个 div 的问题 - 两个呈现为 block 的边距均为 15px(顶部 div 有底部边距,底部有顶部),因此我预计两者之间的差距是 30px 而不是 15px,这是正确的假设还是我要疯
我一直以为我了解利润率和负利润率,但显然我不了解!我刚刚开始一个新的设计并且已经遇到了问题。 我有一个 div (hill3Cont) 和另一个嵌套在里面的 div (hill3Hill),这是它们的
我有一系列这样的元素: ... ....... ... ....... h1 上边距为 5px,p 上边距为 10px。但是产生的边距只有 10px。如果我将底部边距增加到 50px,将顶部边距增加
由于 margin-right: auto 和 margin-left: auto 水平居中元素,我希望它们的垂直对应物以相同的方式运行。 但我知道这不会发生,根据 CSS 规范: 10.6.2 In
我在让我的 div 将我的页面向下移动 30 像素/在我的 div 顶部添加边距 30 像素时遇到问题。我的 div 使用 margin auto 在页面中心对齐。 然而,当我尝试添加这行代码时:边距
这个问题在这里已经有了答案: CSS margin terror; Margin adds space outside parent element [duplicate] (7 个答案) 关闭
我有一个 div 在另一个之上。顶部的 div 有 margin-bottom: 10px,底部的 div 有 margin-top: 10px,但两个 div 之间只有 10px 的空间。 实例:h
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 2 年前。 我的 CSS 边距没有按照我想要或期望的方
在此website我正在尝试减少横幅和文本之间ON MOBILE 底部和顶部的边距。 如果您在智能手机和平板电脑上查看,横幅的顶部和底部似乎有一些边距。 这是我的 CSS: .page-id-996
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
这个问题在这里已经有了答案: Why does this CSS margin-top style not work? (14 个答案) 关闭 3 年前。
我是一名优秀的程序员,十分优秀!