小编Dan*_*eld的帖子

HTML 不透明度属性与 CSS 不透明度

我知道在 HTML 中设置不透明度的两种不同方法:

<div opacity="0.5"></div>

<div style="opacity: 0.5;"></div>

我也知道如何在 JavaScript 中设置这两个:

div.setAttribute("opacity", 0.5);

div.style.opacity = 0.5

这两种方法之间有什么主要区别吗?我应该更喜欢一个吗?(我想我至少应该保持一致)

html javascript css

4
推荐指数
1
解决办法
342
查看次数

如果弹性项具有不同的弹性基础,如何计算弹性收缩

假设我有一个简单的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)

Codepen演示

在上面的例子中:容器是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 …

flexbox

4
推荐指数
1
解决办法
1194
查看次数

填充剩余垂直空间的第二个元素

我有一个固定高度的容器.

容器有2个段落.

我希望第一个p具有动态高度(具有最小高度和最大高度),具体取决于它的内容,第二个p用于占用剩余的垂直空间.

例如,在这个小提琴中:我希望粉红色的p填充剩余的黄色空间,并在第一个p元素生长时相应地缩小.

我已经看到了如何让一个div填补水平空间(即用bfc-块格式化上下文中),但我似乎无法找到一个垂直填料的CSS的解决方案.

如果用css无法做到这一点我想知道如何用jquery做到这一点.

谢谢.

html css jquery

3
推荐指数
1
解决办法
2577
查看次数

可以用结构化数据来审查一个人吗?

我审查了以人为中心的数据。

我想用结构化数据来表示这些评论。

像这样的东西:(来自这里

在此输入图像描述

这是我尝试过的:(这是 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。

那么这是否意味着没有办法利用结构化数据对人进行评分呢?

microdata rich-snippets schema.org

3
推荐指数
1
解决办法
1868
查看次数

Array.prototype.join.call在后台为字符串做了什么?

var a = "foo";
var c = Array.prototype.join.call( a, "-" ); // 'f-o-o'
Run Code Online (Sandbox Code Playgroud)

第二行代码如何工作?我没有看到任何字符串转换为数组然后再转换回来,这是在后台发生的吗?我遇到过这种代码,这很奇怪,一个接受字符串的数组方法.

javascript

3
推荐指数
1
解决办法
1003
查看次数

alt文本向后显示

dir='rtl'在body元素上使用了从右到左的语言.

所以整个页面应该从右到左流动.

由于某种原因,图像中的替代文字向后显示.

这是一个jsFiddle.

有什么简单的解决

html css right-to-left alt

2
推荐指数
1
解决办法
1050
查看次数

希伯来语是html中的问号

我正在使用bootstrap和angularjs构建Web应用程序.在HTML中我有元标记:

<meta charset="utf-8">
Run Code Online (Sandbox Code Playgroud)

用希伯来语写的导航栏项目,没关系.当我在conatiner div中写希伯来语内容时,它也没关系.

但是当我在部分中写下希伯来语(在ng-view中显示)时,我得到了问号.

谷歌没有帮助.

有任何想法吗?

html twitter-bootstrap angularjs

2
推荐指数
1
解决办法
1779
查看次数

在数字文字上调用toFixed方法

当我在十进制数字文字上调用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

引擎盖下发生了什么?

javascript tofixed

2
推荐指数
1
解决办法
686
查看次数

为什么在没有文本的情况下使用flex显示时会忽略行高?

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)

结果: 在此输入图像描述

html css flexbox

2
推荐指数
1
解决办法
457
查看次数

左对齐列表样式类型

我有一个简单的列表 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)

CSS

ul
{
    list-style-type: lower-latin;
}
Run Code Online (Sandbox Code Playgroud)

问题是默认情况下,列表样式类型是右对齐的:

在此处输入图片说明

如何使字母与 css 左对齐?

html css html-lists

1
推荐指数
1
解决办法
2878
查看次数

如何设置window.location.href

我在页面上有一个按钮,根据选定的值重新加载页面.按钮的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永远不会更改.有谁知道为什么?难道我做错了什么...?

先感谢您.

javascript url jquery

1
推荐指数
1
解决办法
6846
查看次数

使用css为子元素分配相等的宽度

我有一个固定宽度的区域,根据具体情况,我需要放置四个div或两个div.

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

在此输入图像描述

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

在此输入图像描述

目前我正在放置四个宽度为的div 25%.我如何管理,CSS设置条件:如果我只有两个div,将div大小增加到每个50%,以完全覆盖预期区域,因为四个div.

编辑

有时我不想显示橙色区域或225%区域.在这些情况下,我需要拉伸黄色区域和200%区域.

html css

0
推荐指数
1
解决办法
1811
查看次数

使表单输入标签后剩余的100%宽度

基本上我正在尝试创建这个:

在此输入图像描述

这就是我到目前为止:jsFiddle.

基本上我已经尝试设置标签和输入display:block;并使输入具有width:100%;.但这当然会使输入突破新的界限.然后我尝试添加white-space:nowrap;到p标签,几乎得到我需要的效果,但输入然后超出容器边界.

知道如何做这样的事吗?

html css forms

0
推荐指数
1
解决办法
2194
查看次数