前端初级教程里的小问题

liuganglove2018 · 发表于 2023-8-28 14:40

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexdiv</title>
<style>
#first-div{background-color:gray;width:440px;height:200px;margin:0

auto;display:flex;justify-content:space-around;flex-wrap:wrap;align-

content:flex-left;}
#first-div p{background-color:green;height:50px;width:70px;}
#first-p{background-color:red;}
#third-p{background-color:pink;}
</style>
</head>
<body>
<div id="first-div">
<p id="first-p" >first-p</p>
<p id="second-p">second-p</p>
<p id="third-p">third-p</p>
<p id="fourth-p">fourth-p</p>
<p id="fifth-p">fifth-p</p>
<p id="sixth-p">sixth</p>
<p id="seventh-p">seventh-p</p>
<p id="seventh-p">eighth-p</p>

</div><br />
<div id="seconddiv">
</div>
</body>
</html>

-----------------------
代码如上，想请教一下first-p，third-p为什么不执行ID名改色，百思不得解。第二，子盒子折叠第二行，怎么样才能不居中，而让盒子七放到盒子一的下面，盒子八放到盒子二的下面。
由于是初学期，这么简单的问题都不能解决，谢谢各位大佬解答一下我的问题。

yiqifeng · 发表于 2023-8-28 14:48

被替换了

MartinLee · 发表于 2023-8-28 15:28

css 顺序，!import 的使用，行内元素块级元素啥的都得看看，MDN不看的话菜鸟教程也得看看吧。多学点吧，遇到一个问一个，有时候连问题都问不出来。

计网四班 · 发表于 2023-8-28 17:20

第一个问题，一楼已经解释了。第二个问题，当一行元素超过3个的时候，你想使用flex弹性盒子均匀分配间隔，那么第二行就是会出现居中的情况。解决方法：注释掉justify-content: space-around;使用下面这种方式去间隔
/* 父元素的宽度减去4个子元素的宽度, 除以3. */
   li:not(:nth-child(4n)) {
      margin-right: calc((100% - 150rpx * 4) / 3);
   }

另外，你让我想起了我当时学前端的样子。哈哈，不要紧，这是很简单的css样式

计网四班 · 发表于 2023-8-28 17:24

计网四班发表于 2023-8-28 17:20
第一个问题，一楼已经解释了。第二个问题，当一行元素超过3个的时候，你想使用flex弹性盒子均匀分配间隔， ...

      p:not(:nth-child(6n)) {
         margin-right: calc((440px - 70px * 6) / 5);
      }

lynch22 · 发表于 2023-8-29 07:28

搞不定的，就别自动了，统统手工计算解决

yanjun202 · 发表于 2023-8-29 08:55

重新去看看css 优先级

Dropless · 发表于 2023-8-29 10:16

css 我觉得还是买本书系统地学习一下比较好. 不然以后你会遇到非常多百思不得其解的问题.

zhangdagen · 发表于 2023-8-29 11:04

第一个css选择器优先级问题#first-div p优先级大于#first-p所以被覆盖了，第二个弹性盒子布局，学一下优先级和flex布局吧

liuganglove2018 · 发表于 2023-8-29 15:44

Dropless 发表于 2023-8-29 10:16
css 我觉得还是买本书系统地学习一下比较好. 不然以后你会遇到非常多百思不得其解的问题.

学的视频教程，书没打算买，就是一个爱好。没想到学到这里就有些吃力了。百思不得姐，吾爱坛友很给力！

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 前端初级教程里的小问题