我知道在 HTML 中设置不透明度的两种不同方法:
<div opacity="0.5"></div> 和
<div style="opacity: 0.5;"></div>
我也知道如何在 JavaScript 中设置这两个:
div.setAttribute("opacity", 0.5); 和
div.style.opacity = 0.5
这两种方法之间有什么主要区别吗?我应该更喜欢一个吗?(我想我至少应该保持一致)
假设我有一个简单的Flex容器,其中包含2个flex项目,其中flex项目的大小超过容器大小 - 将使用flex-shrink.如下所示:
.container {
width: 600px;
outline: 5px solid;
display: flex;
}
section {
flex: 0 1 600px;
background: salmon;
}
aside {
flex: 0 1 200px;
background: aqua;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<section>
<h2>Main content here</h2>
</section>
<aside>
<h2>Some side content</h2>
</aside>
</div>Run Code Online (Sandbox Code Playgroud)
在上面的例子中:容器是600px,部分flex-item的flex基础是600px,而旁边的flex-basis是200px - 所以负空间是200px.
因此,两个flex项目具有相同的flex-shrink因子1 - 我预计两个flex项目将缩小100px,section宽度为600px - 100px = 500px,aside得到200px - 100px = 100px
但结果实际上是section缩小了150px到450px,aside缩小了50px到150px
那么我查看了规范,我发现了这个:
注意:在分配负空间时,flex shrink factor乘以flex base size.这使得负空间与物品能够收缩的程度成比例地分配,从而例如在较大的物品明显减少之前,小物品不会缩小到零.
所以我现在明白,在Flex项目上计算flex-shrink时,不仅要考虑flex缩减因子,还要考虑flex基本大小(这里,由flex-basis属性定义)
问题是我似乎无法计算flex-shrink.
所以继续上面的例子:说我把收缩因子section …
我有一个固定高度的容器.
容器有2个段落.
我希望第一个p具有动态高度(具有最小高度和最大高度),具体取决于它的内容,第二个p用于占用剩余的垂直空间.
例如,在这个小提琴中:我希望粉红色的p填充剩余的黄色空间,并在第一个p元素生长时相应地缩小.
我已经看到了如何让一个div填补水平空间(即用bfc-块格式化上下文中),但我似乎无法找到一个垂直填料的CSS的解决方案.
如果用css无法做到这一点我想知道如何用jquery做到这一点.
谢谢.
我审查了以人为中心的数据。
我想用结构化数据来表示这些评论。
像这样的东西:(来自这里)

这是我尝试过的:(这是 Google 图书示例的变体)
<div itemscope itemtype="http://schema.org/Person">
<h2>
<span itemprop="honorificPrefix">Dr</span>
<span itemprop="name">Joe Smith</span>
</h2>
<h3 itemprop="jobTitle">Doctor</h3>
<div itemprop="description">Extra super Doctor</div>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div>Doctor rating:
<span itemprop="ratingValue">88</span> out of
<span itemprop="bestRating">100</span> with
<span itemprop="ratingCount">20</span> ratings
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
现在,当我在谷歌的测试工具中测试这段代码时,我收到错误:
对于 Person 类型的对象,Google 无法识别属性aggregateRating。
那么这是否意味着没有办法利用结构化数据对人进行评分呢?
var a = "foo";
var c = Array.prototype.join.call( a, "-" ); // 'f-o-o'
Run Code Online (Sandbox Code Playgroud)
第二行代码如何工作?我没有看到任何字符串转换为数组然后再转换回来,这是在后台发生的吗?我遇到过这种代码,这很奇怪,一个接受字符串的数组方法.
我正在使用bootstrap和angularjs构建Web应用程序.在HTML中我有元标记:
<meta charset="utf-8">
Run Code Online (Sandbox Code Playgroud)
用希伯来语写的导航栏项目,没关系.当我在conatiner div中写希伯来语内容时,它也没关系.
但是当我在部分中写下希伯来语(在ng-view中显示)时,我得到了问号.
谷歌没有帮助.
有任何想法吗?
当我在十进制数字文字上调用toFixed()方法时,如下所示:
var a = 67.678.toFixed(2);
console.log(a);
Run Code Online (Sandbox Code Playgroud)
结果有效并返回67.68
但是,如果我在整数上调用该方法 - 我会收到错误
var b = 67.toFixed(2);
console.log(b); // causes ERROR
Run Code Online (Sandbox Code Playgroud)
为什么会这样?
注意:
如果我将整数保存到变量 - toFixed()方法确实有效.
var c = 67;
c = c.toFixed(2);
console.log(c); // returns 67.00
Run Code Online (Sandbox Code Playgroud)
看到这个jsBin
引擎盖下发生了什么?
line-height浏览器在flex显示时没有文本时忽略该样式.line-height即使有其他组件,如inputs或,仍然被忽略text areas.
为什么会line-height被忽视?
请参阅此处运行演示.
<html>
<head>
</head>
<body>
<h1 style="line-height: 200px; background: blue; display: flex"><input value="expected large line-height - success." style="width: 250px"/>ALIK</h1>
<h1 style="line-height: 200px; background: red; display: flex"><input value="expected large line-height - FAILURE!!!" style="width: 250px"/></h1>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我有一个简单的列表 list-style-type: lower-latin;
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
ul
{
list-style-type: lower-latin;
}
Run Code Online (Sandbox Code Playgroud)
问题是默认情况下,列表样式类型是右对齐的:

如何使字母与 css 左对齐?
我在页面上有一个按钮,根据选定的值重新加载页面.按钮的onclick事件调用load_newurl(param).
function load_newurl(param) {
var url = window.location.href;
var index = url.indexOf("&test=");
if (index>=0) {
url = url.substring(0, index);
}
url = url + "&testrun=" + param;
window.location.href = url;
window.location.reload();
}
Run Code Online (Sandbox Code Playgroud)
以上是我重新加载页面的功能.但是,window.location.href永远不会更改.有谁知道为什么?难道我做错了什么...?
先感谢您.
我有一个固定宽度的区域,根据具体情况,我需要放置四个div或两个div.
如果我有两个div,它应该是这样的:

如果我有四个div,它应该是这样的,

目前我正在放置四个宽度为的div 25%.我如何管理,CSS设置条件:如果我只有两个div,将div大小增加到每个50%,以完全覆盖预期区域,因为四个div.
编辑
有时我不想显示橙色区域或225%区域.在这些情况下,我需要拉伸黄色区域和200%区域.
基本上我正在尝试创建这个:

这就是我到目前为止:jsFiddle.
基本上我已经尝试设置标签和输入display:block;并使输入具有width:100%;.但这当然会使输入突破新的界限.然后我尝试添加white-space:nowrap;到p标签,几乎得到我需要的效果,但输入然后超出容器边界.
知道如何做这样的事吗?
html ×8
css ×7
javascript ×4
flexbox ×2
jquery ×2
alt ×1
angularjs ×1
forms ×1
html-lists ×1
microdata ×1
schema.org ×1
tofixed ×1
url ×1