前端初级教程里的小问题
<!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名改色，百思不得解。第二，子盒子折叠第二行，怎么样才能不居中，而让盒子七放到盒子一的下面，盒子八放到盒子二的下面。
由于是初学期，这么简单的问题都不能解决，谢谢各位大佬解答一下我的问题。 被替换了 css 顺序，!import 的使用， 行内元素 块级元素 啥的都得看看，MDN不看的话 菜鸟教程也得看看吧。 多学点吧，遇到一个问一个，有时候 连问题都问不出来。 第一个问题，一楼已经解释了。第二个问题，当一行元素超过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:20
第一个问题，一楼已经解释了。第二个问题，当一行元素超过3个的时候，你想使用flex弹性盒子均匀分配间隔， ...
p:not(:nth-child(6n)) {
margin-right: calc((440px - 70px * 6) / 5);
} 搞不定的，就别自动了，统统手工计算解决 重新去看看css 优先级 css 我觉得还是买本书系统地学习一下比较好.不然以后你会遇到非常多百思不得其解的问题. 第一个css选择器优先级问题#first-div p优先级大于#first-p所以被覆盖了，第二个弹性盒子布局，学一下优先级和flex布局吧 Dropless 发表于 2023-8-29 10:16
css 我觉得还是买本书系统地学习一下比较好.不然以后你会遇到非常多百思不得其解的问题.
学的视频教程，书没打算买，就是一个爱好。没想到学到这里就有些吃力了。百思不得姐，吾爱坛友很给力！
页:
[1]
2