小编Ori*_*iol的帖子

我尝试fieldset用display: flex和设置元素的样式display: inline-flex.

但是,它不起作用:flex表现得像block,inline-flex表现得像inline-block.

这在Firefox和Chrome上都会发生,但奇怪的是它适用于IE.

这是一个错误吗？我无法fieldset在HTML5和CSS Flexible Box Layout规范中找到任何特殊行为.

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

CSS中"Cascading"一词的确切含义是什么？我得到了不同的看法,所以我在这里问.一个例子会有所帮助.

我想知道是否event.preventDefault()和return false是一样的.

我做了一些测试,似乎

• 例如,如果使用旧模型添加事件处理程序

  elem.onclick = function(){
      return false;
  };
  

  Run Code Online (Sandbox Code Playgroud)

  然后,return false防止默认操作,如event.preventDefault().

• 如果事件处理程序使用添加addEventListener,例如

  elem.addEventListener(
      'click',
      function(e){
          return false;
      },
      false
  );
  

  Run Code Online (Sandbox Code Playgroud)

  然后,return false不会阻止默认操作.

所有浏览器的行为都是这样的吗？

event.preventDefault()和之间有更多的区别return false吗？

我在哪里可以找到一些文档(我不能在MDN中)关于在某些情况下的return false行为event.preventDefault()？

我的问题只是简单的javascript,而不是jQuery,所以请不要将它标记为event.preventDefault()与return false的重复,即使两个问题的标题几乎相同.

例如,这些之间的区别是:

<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>

演示

而且,如果它们完全相同,为什么HTML5会添加srcdoc属性？

编辑

也许我不够清楚.我不是比较src有srcdoc,但src使用text/html的数据URI用srcdoc.

然后,如果功能图是这样的

                   |  src attribute       |  srcdoc attribute
 --------------------------------------------------------------------
  URL              |  Yes                 |  No without using src (*)
  HTML content     |  Yes, using data URI |  Yes

为什么srcdoc需要？

(*)注意:

它似乎srcdoc可以用来通过URL(Demo)加载页面,使用带有src属性的子图:

<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>

我有一个带有两个弹性物品的弹性容器.我想在第二个上设置一个margin-top,但只有当它被包裹而不是在第一个flex线时.

如果可能,我想避免使用媒体查询.

我认为第一个元素的边缘底部可能是一个解决方案.但是,当元素没有被包裹时,它会在底部增加空间,所以同样的问题.

这是我的代码:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

我已经阅读了如何使用asm.js测试和开发的问题？,接受的答案提供了http://kripken.github.com/mloc_emscripten_talk/#/的链接.

该幻灯片的结论是" 静态类型语言,特别是C/C++可以有效地编译成JavaScript ",因此我们可以" 期望编译的C/C++的速度比本机代码慢2倍,或更好,今年晚些时候 ".

但是非静态类型的语言呢,比如常规的JavaScript本身呢？可以编译为asm.js吗？

CSS Scoping说

阴影主机的后代不得在格式化树中生成框.相反,活动阴影树的内容 生成框,就好像它们是元素的内容一样.

CSS Pseudo-Elements描述::before和::afteras

这些伪元素生成框,好像它们是它们的原始元素的直接子元素

那么这些是真的呢？

• 首先,影子主机的所有内容(不包括::before和::after)都被活动阴影树的内容替换.然后,::before和::after产生的阴影主机盒.
• 首先,::before和::after产生的阴影主机盒.然后,影子主机(包括::before和::after)的所有内容都被活动阴影树的内容替换.

Firefox和Chrome做前者,但规范是否描述了这种行为？

var root = document.querySelector('div').createShadowRoot();
root.innerHTML = "<p>Shadow content</p>";

div::before, div::after {
  content: 'Generated content';
}

<div>Content</div>

见http://jsfiddle.net/mpx7os95/14/

行为是所需的行为,它允许3列布局中的中心列占用所有可用空间,并且当收缩到足够远时仍然允许其内部的文本溢出为省略号.这似乎是有效的max-width: 0,但为什么会产生这种效果呢？

max-width: 0在这种情况下有什么特别之处？

.row {
  width: 100%;
  display: table;
}
.col {
  position: relative;
  min-height: 1px;
  border: 1px #000 solid;
  display: table-cell;
}
.x {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
  max-width: 0;
}

<div class="row">
  <div class="col">abc</div>
  <div class="col x">test blah blah blah blah blah zzzzz.</div>
  <div class="col">def</div>
</div>

我感到困惑line-height的inline元素.我一直在寻找:

• http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
• http://www.w3.org/wiki/CSS/Properties/line-height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

但我不确定我是否理解.我知道如果我使用display:inline-block转换为块,我可以使高度准确.但我试图理解的是行高内联元素的工作原理.以下是问题:

• 我有一个文本,font-size: 15px但如果我看到浏览器的开发人员工具,它会18px.为什么？在font-size刚刚aproximate？或者它不衡量跌宕起伏？

• 为什么背景色inline元素不具有相同的height比line-height？的line-height在inline元件测量线箱的空间,即空间的上方和下方的线,而不是inline元素本身.这是解释吗？

这是一个可以玩的例子.

CSS:

#block-element {
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: grey;
}
#inline-element {
  -webkit-box-sizing: border-box;
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: green;
}

<div id="block-element">
  <a id="inline-element" href="#">
    inline element font-size:15px but height:18px …

我有我的第一,第二和第三项,然后我想要第四项进入下一行,无论空间有多宽.

.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.it {
  max-width: 420px;
}

<div class="box">
  <div class="it">1</div>
  <div class="it">2</div>
  <div class="it">3</div>
  <div class="it">4</div>
</div>