小编leo*_*ess的帖子

你如何让浮动元素的父母崩溃?

尽管像<div>s 这样的元素通常会增长以适应其内容,但使用该float属性可能会给 CSS新手带来惊人的问题:如果浮动元素具有非浮动父元素,则父元素将崩溃.

例如:

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>
Run Code Online (Sandbox Code Playgroud)

此示例中的父div 不会展开以包含其浮动的子项 - 它似乎具有height: 0.

你怎么解决这个问题?

我想在这里创建一个详尽的解决方案列表.如果您了解跨浏览器兼容性问题,请指出它们.

解决方案1

浮动父母.

<div style="float: left;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>
Run Code Online (Sandbox Code Playgroud)

优点:语义代码.
缺点:您可能并不总是希望父级浮动.即使你这样做,你是否漂浮了父母的父母,等等?你必须浮动每个祖先元素吗?

解决方案2

给父母一个明确的高度.

<div style="height: 300px;">
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
</div>
Run Code Online (Sandbox Code Playgroud)

优点:语义代码.
缺点:不灵活 - 如果内容更改或浏览器调整大小,布局将中断.

解决方案3

在父元素中添加"spacer"元素,如下所示:

<div>
  <div style="float: left;">Div 1</div>
  <div style="float: left;">Div 2</div>
  <div …
Run Code Online (Sandbox Code Playgroud)

html css layout css-float clearfix

988
推荐指数
10
解决办法
29万
查看次数

类型错误 [ERR_INVALID_ARG_TYPE]:“路径”参数必须是字符串类型。启动反应应用程序时引发的接收类型未定义

我正在 React 中处理一个项目,但遇到了一个让我难倒的问题。

每当我运行时,yarn start我都会收到此错误:

类型错误 [ERR_INVALID_ARG_TYPE]:“路径”参数必须是字符串类型。接收类型未定义

我不知道为什么会发生这种情况,如果有人遇到过这种情况,我将不胜感激。

javascript reactjs visual-studio-code redux yarnpkg

242
推荐指数
7
解决办法
17万
查看次数

获取数组中的第一个元素

你如何从数组中获得第一个元素:

var ary = ['first', 'second', 'third', 'fourth', 'fifth'];
Run Code Online (Sandbox Code Playgroud)

我试过这个:

alert($(ary).first());
Run Code Online (Sandbox Code Playgroud)

但它会回来[object Object].

所以我需要从数组中获取应该是元素的第一个元素'first'.

javascript arrays jquery

201
推荐指数
19
解决办法
65万
查看次数

JavaScript表单提交 - 确认或取消提交对话框

对于一个带有警告的简单表单,询问字段是否填写正确,我需要一个执行此操作的函数:

  • 单击按钮时显示警告框,有两个选项:

    • 如果单击"确定",则提交表单
    • 如果单击取消,则会关闭警报框,并可以调整并重新提交表单

我认为JavaScript确认可行,但我似乎无法弄清楚如何.

我现在的代码是:

function show_alert() {
  alert("xxxxxx");
}
Run Code Online (Sandbox Code Playgroud)

html javascript forms confirm submit

168
推荐指数
4
解决办法
36万
查看次数

我应该什么时候使用??(无效合并)vs || (逻辑或)?

相关的是有一个“空合并”运营商在JavaScript中?- JavaScript 现在有一个??运算符,我发现它使用得更频繁。以前大多数 JavaScript 代码使用||.

let userAge = null

// These values will be the same. 
let age1 = userAge || 21
let age2 = userAge ?? 21
Run Code Online (Sandbox Code Playgroud)

在什么情况下会??||行为不同?

javascript logical-or

60
推荐指数
7
解决办法
1万
查看次数

我患有"神经炎"吗?(需要CSS专家)

我读过很多文章,谴责过度使用div.我有一种感觉,我可能会在以下标记中这样做:

HTML:

.container {
  margin: 0 auto;
  overflow: hidden;
  width: 960px;
}

/* header */

#header {
  background: #EEE;
}

#header h1 {
  float: left;
}

#header h2,
#header a,
#header p {
  color: #999;
}

#header h1 a {
  background: url(../images/logo.png) no-repeat scroll 0 0;
  float: left;
  height: 30px;
  text-indent: -9999px;
  width: 500px;
}

#banner {
  border-bottom: 1px solid #DDD;
  padding: 0 0 15px 0;
  margin: 30px 0 30px 0;
  overflow: hidden;
  width: 960px;
}

#lang {
  float: right; …
Run Code Online (Sandbox Code Playgroud)

html css

54
推荐指数
3
解决办法
3664
查看次数

使用JavaScript删除某个类的所有元素

HTML:

var paras = document.getElementsByClassName('hi');

for (var i = 0; i < paras.length; i++) {
  paras[i].style.color = '#ff0011';
  // $('.hi').remove();
}
Run Code Online (Sandbox Code Playgroud)

我到目前为止的JS:

<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p>not class 'hi'</p>
Run Code Online (Sandbox Code Playgroud)

在jQuery中,这太简单了.($('.hi').remove();).我想学习JS,然后学习jQuery.

我被困了,谷歌没有提供.我不想成为复制/粘贴jQuery程序员.我刚开始学习JS.谢谢.

javascript

46
推荐指数
3
解决办法
5万
查看次数

我正在为我的团队编写一套编程思维规则:你的是什么?

我已经在列表上工作了一段时间,这有助于我分享编程方法和想法的原因以及如何做某事.

为此,我想建立一个包含以下内容的列表:

  • 最佳实践,
  • 最好的想法,
  • 最佳方法......

这有助于程序员以最有效的方式分析,思考,接近,解决和实施.

我在Stack Overflow的整个问题中看到过几十个非常有价值的评论,但是找不到我们将它们放在一起的地方.Stack Overflow上有最有争议的观点.但是,我只是在寻找可以分享并帮助我的团队的圣人见解,并通过更好的编程来更好地解决问题.

希望这可以是一个收集一两个简洁,深刻且易于分享,重复,审查的衬垫的地方.如果我们按照每个答案保留一个规则,那么最简单的投票可能是最容易的.

我将从第一个开始.

干 - 不要重复自己 - 在代码,评论或文档中.

rules

44
推荐指数
30
解决办法
3815
查看次数

为什么我在 Jest 中收到“TextEncoder 未定义”?

TextEncoder当测试使用 或的函数时,TextDecoder我得到:

ReferenceError: TextEncoder is not defined
ReferenceError: TextDecoder is not defined
Run Code Online (Sandbox Code Playgroud)

我正在使用jsdom,为什么这不起作用?

javascript jsdom jestjs

43
推荐指数
2
解决办法
4万
查看次数

开玩笑:TypeError:replaceAll 不是函数

String.prototype.replaceAll()是一种有用的方法,在构建和执行时一切正常。但是,所有 Jest 测试都失败并显示以下错误:

TypeError: replaceAll is not a function
Run Code Online (Sandbox Code Playgroud)

这些是我的依赖项:

"dependencies": {
  "core-js": "^3.6.5",
  "vue": "^2.6.11",
  "vue-class-component": "^7.2.3",
  "vue-i18n": "^8.22.0",
  "vue-property-decorator": "^8.4.2",
  "vue-router": "^3.3.4",
  "vuex": "^3.5.1"
},
"devDependencies": {
  "@vue/test-utils": "^1.1.0",
  "jest-junit": "^12.0.0",
  "ts-jest": "^26.4.1",
  "typescript": "~3.9.3",
  "vue-jest": "^3.0.7",
  "vue-template-compiler": "^2.6.10"
},
Run Code Online (Sandbox Code Playgroud)

我该如何解决这种行为?

javascript node.js jestjs

21
推荐指数
3
解决办法
9064
查看次数