相关疑难解决方法(0)
如何解开保证金？
缩小CSS中的利润率:http://www.w3.org/TR/CSS21/box.html#collapsing-margins
我理解该功能的目的,但我正在尝试做布局,我无法弄清楚如何关闭它.
CSS教程中通常解释的方法是:
- 添加边框
- 添加填充
当您使用背景图像和固定填充处理像素完美布局时,所有这些都会产生明显的副作用.
有没有办法简单地禁用折叠而不必将额外的像素推入布局？我必须在视觉上影响文档以改变这样的行为,这对我没有任何意义.
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
为什么不顶部:0相对于身体的绝对定位元素？
您可以在下面的代码中看到,h1向下推动身体,绝对定位的块.absolute不会粘在顶部.但是你也可以看到同一个块粘在其父级的顶部.wrapper.为什么？
我不是在问这个伎俩; 我知道如何,例如填充而不是边缘到h1,或clearfix到父级等等.
我只对一件事情感兴趣:为什么h1保证金推低了body,但是没有推倒.wrapper？
body {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
background-color: silver;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: darkblue;
}
.wrapper {
position: relative;
overflow:hidden;
width: 50%;
height: 200px;
overflow: hidden;
background-color: yellow;
}
.wrapper > .absolute {
background-color: darkcyan;
}<div class="absolute"></div>
<h1>Some title</h1>
<div class="wrapper">
<div class="absolute"></div>
<h1>Some title</h1>
</div>好的,我会尽量更清楚.如果你点击下面的链接,你可以看到我的JSFiddle.有background-color: silver在 …
推荐指数
解决办法
查看次数
表粘性列滚动错误Chrome
我创建了一个表,其中有几个固定的列,其余的是滚动.这是使用包装div和固定列上的设置位置绝对和负左边距来完成的.
它是复杂数据表的一部分,因此我很难在jsfiddle中重新创建,但这里有一个链接:http://rateshopper.error404.ro/table.html
问题是当你只是玩弄滚动然后向左移动光标.固定列有时会跳出位置.取消选中并重新检查检查器中剩余的边距可以修复它.我不知道为什么会这样.
以下是Chrome中的视频:http://rateshopper.error404.ro/bug_chrome.mov
任何想法或帮助将不胜感激!
推荐指数
解决办法
查看次数
css:margin-top导致滚动条
该h1元素会导致滚动条出现.谁能解释我为什么？
html, body {
margin: 0;
padding: 0;
height: 100%;
}
header {
height:10%;
}
section {
height:90%;
}<header>
<h1>
Hello
</h1>
</header>
<section>
test
</section>推荐指数
解决办法
查看次数
为什么此导航栏上方有空格
我想制作一个固定的导航栏.但现在菜单上方有空间.我尝试了任何我知道的解决方法,但它没有用.我在整个代码中搜索了一些创建空间的东西,但我找不到它.
#nav {
position: fixed;
text-align: center;
font-size: 22px;
background-color: #222222;
margin: 0 auto;
width: 100%;
}
#nav ul li a {
color: #ccc;
display: block;
padding: 10px;
text-decoration: none;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background: #333333;
}
#nav ul li a:hover {
text-shadow: 3px 2px 3px #333333;
text-decoration: none;
position: relative;
bottom: 5px;
color: #fdde00;
}
html,
body {
height: …推荐指数
解决办法
查看次数
为什么有些html和body属性会出现这种行为？
我想了解一些事情.
第一个问题:
为什么有一个margin-top上body？
html {
height: 100%;
background-color: red;
}
body {
height: 100%;
margin: 0;
background-color: yellow;
}<h1>Hello Plunker!</h1>如果我在Chrome中查看开发工具检查器,它会向我显示h1上边距位于上边距之外body(图片显示h1突出显示):
第二个问题:
在下一个例子中,为什么黄色被绘制在body？之外？
我希望只在body元素中看到黄色,因为我设置了overflow属性:
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}第三个问题
如果我background-color在html元素上添加一个,它可以工作,黄色只填充body元素,为什么？
html {
background-color: red;
}
body {
height: 100px;
background-color: yellow;
margin: 0;
overflow: hidden;
}推荐指数
解决办法
查看次数
为什么我的孩子html元素的边距在父母之外
我在父div中有一个子元素(在我的例子中是h1).
为什么孩子的边缘似乎在父母之外.
以下示例:
这个孩子有一个30px的衬垫和一个红色边框,如预期的那样.div有黄色背景,但我预计它的高度为100 + 30 + h1 + 30 + 100.
div {
background-color: yellow;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}<div>
<h1>Child</h1>
</div>有趣的是,如果我在div中放置一个边框,如下例所示 - 它表现得像我预期的那样.我知道我可以解决这个问题,但我想知道发生了什么事？
div {
background-color: yellow;
border: 5px solid green;
}
h1 {
margin: 100px;
padding: 30px;
border: 5px solid red;
}<div>
<h1>Child</h1>
</div>推荐指数
解决办法
查看次数
添加padding-top使单独的元素粘在一起
header {
background-color: grey;
height: 118px;
text-align: center;
}
nav {
background-color: red;
height: 40px;
}
main {
background-color: blueviolet;
height: 400px;
text-align: center;
/*Why adding padding-top makes the white space disappear?*/
/*padding-top: 1px; */
}
footer {
background-color: green;
height: 100px;
}
.container {
width: 1024px;
margin: 0 auto;
}
h1 {
font-size: 84px;
color: white;
}
p {
font-size: 16px;
color: white;
}
/* * {
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
} */<!DOCTYPE html> …推荐指数
解决办法
查看次数