小编dip*_*pas的帖子
为什么有些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;
}推荐指数
解决办法
查看次数
如何删除 <address> 标签的所有自动格式？
我正在使用 normalize.css 但在使用<address>标签指定文章作者时仍然遇到问题：
<address rel="author">My Name</address>
至少在 Firefox 中，它似乎把它变成了块级元素，并添加italic到font-style.
我不知道它对它还有什么作用。
如何删除<address>浏览器可能添加的标签的所有自动样式？
推荐指数
解决办法
查看次数
匹配包含部分URL和特定类的链接
此页面上有一个包含不同链接的网页.我的目标是找到包含以下内容的链接:/dir/flowers/并拥有类:flower big
并以不同的方式设置它们(即使这些链接成为红色).
以下是应匹配的示例链接:
<a class="flower big" href="http://example.net/dir/flowers/spring.php">Spring</a>
<a class="flower big" href="http://example.net/dir/flowers/winter.php">Winter</a>
<a class="flower big" href="http://example.net/dir/flowers/fall.php">Fall</a>
等等
因此,如果链接包含:/dir/flowers/{*} 并且具有类:"flower big"那么它应该匹配.
我尝试了类似下面的东西,但它不起作用:
(a[class="flower big"] AND a[href~="/dir/flowers/"] ) {color:red}
推荐指数
解决办法
查看次数
Flexbox行在flexbox列中
我有这样的布局:
<div class="flexbox">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
和它的css:
html,
body {
height: 100%;
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
height: 100%;
width: 100%;
}
.flexbox .main {
order: 0;
flex: 1 1 auto;
align-self: stretch;
}
.flexbox .header,
.flexbox .footer {
order: 0;
flex: 0 1 auto;
align-self: stretch;
}
在上面的.main列中拉伸100%height,这一切都很完美,现在添加.flexbox-row内部.main:
<div class="flexbox">
<div class="header"></div>
<div class="main">
<div class="flexbox-row">
<div …推荐指数
解决办法
查看次数
你可以在内置类的bootstrap中为表添加背景颜色吗？
在twitter-bootstrap-3中有什么办法可以使用内置的bootstrap配色方案吗？这段代码不起作用,我尝试使用"Active"和"Success"代替颜色background-color,但它们不起作用.
<table class="table table-bordered background-color: white">
<thead>
<tr>
<th>example table</th>
</tr>
</thead>
</table>
推荐指数
解决办法
查看次数
样式未应用于CSS中的H1元素
我面临一个奇怪的问题,风格没有应用于H1元素.
码:
p h1 {
color: red;
}<p>
<h1>This is a header</h1>
</p>推荐指数
解决办法
查看次数
我可以在CSS的Transform：Scale函数中使用Calc吗？
我正在尝试计算适用于父母内部的孩子的正确比例，但是我不能calc()在transform: scaleCSS函数内部使用。我已经使用javascript完成了此功能，但我对纯CSS解决方案感兴趣，以避免尽可能多地使用脚本来膨胀页面。
示例： CSS
.anyclass{
height:250px; /*this value can change dinamically */
transform:scale(calc(100% / 490 )); /*is using height value*/
}
此定义返回一个无效的属性值。其他用途，例如笔译：
.anyclass{
transform:translate(calc(100% - 50px ));
}
没问题。无论如何，我可以仅使用CSS使用calc来计算div的正确比例吗？
编辑：为了更好地说明它，因为findind的计算结果是0到1之间的值，所以这不是问题。如果使用百分比，我只会得到无效的属性值。
测试1，我尝试使用CSS3变量，但在Scale函数中没有结果
--height: calc(100% + 0px);
/* height: calc(var(--height) / 490); Calculates the right value: 0.5 */
--soom: calc(var(--height) / 490);
/* height: var(--soom); has the right value: 0.5 */
transform: scale(var(--soom)); /*Does not operate in the value stored in --soom*/
它似乎接受chrome中的值，但不操作比例尺。
ZOOM CSS属性似乎只能在chrome中正常工作。这很好。
zoom: calc(100% / …推荐指数
解决办法
查看次数
如何选择元素中的最后一个元素而不管CSS中的类型？
无论元素的类型如何,我都想选择最后一个嵌套元素.
例:
<section>
<div></div>
<p></p>
<div></div> <-- I want this element
</section>
<section>
<div></div>
<p></p>
<a></a> <-- I want this element
</section>
<section>
<div></div>
<p></p>
<ul> <-- I want this element
<li></li>
</ul>
</section>
我如何获得这些元素？:last-child似乎没有做到这:last-of.type一点,也没有用,因为我必须指定我想要的元素类型.
我想要元素的最后一个嵌套section元素.
推荐指数
解决办法
查看次数
如何选择css中的所有孩子？
可以说我有一个包含大量UI元素的包装器class="wrapper".
HTML就像:
<div class="wrapper">
/ a lot of other elements
</div>
现在我需要选择每个元素,我这样做:
.wrapper > .first_element_class{}
.wrapper > .second_element_class{}
...
有没有办法选择所有包装儿童一行？像这样的东西:
.wrapper{
.first_class{}
...
}
推荐指数
解决办法
查看次数
Bootstrap 4图像缩略图类
我使用bootstrap 3.3.7获得了以下HTML代码,使用缩略图类可以调整图像大小并完美地适应网格.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
<h2>Pictures of Coffee</h2>
<div class="row">
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
<div class="col-lg-4 col-xs-6 thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
</div>
</div>
</body>
</html>
但是,在引导程序4.0中似乎不存在缩略图类 https://getbootstrap.com/docs/4.0/layout/grid/ 要模拟问题,您可以尝试使用以下内容替换html链接rel
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
您可以看到图像将不在某些地方,我想知道在4.0中实现相同结果的类似类是什么.或者我必须使用bootstrap 3.3.7？
推荐指数
解决办法
查看次数
标签 统计
css ×9
html ×9
css3 ×4
bootstrap-4 ×1
css-calc ×1
flexbox ×1
html-heading ×1
scale ×1
transform ×1