Question

我正在CSS中创建一个水平下拉菜单，我找到了这个代码，但我是CSS的新手，我无法理解的CSS代码部分是“float：left”，“display ：阻止“，”位置：绝对“，和”位置：相对“。如果您能在下面的CSS代码中解释这些是什么以及它们做了什么，我将不胜感激。下面是CSS后跟的HTML代码。非常感谢你。

HTML

<div class="drop">
<ul class="drop_menu">
<li><a href='#'><b>Home</b></a></li>
<li><a href='#'><b>Query Database</b></a>
<ul>
<li><a href="trypsnodb2.html"><b>Homologues</b></a></li>
<li><a href='#'><b>rRNA Targets</b></a></li>
<li><a href='#'><b>Genomic Locations</b></a></li>
<li><a href='#'><b>References</b></a></li>
</ul>
</li>
<li><a href='#'><b>rRNA Maps</b></a>
<ul>
<li><a href='#'><b>2D</b></a></li>
<li><a href='#'><b>3D</b></a></li>
</ul>
</li>
<li><a href='#'><b>snoRNA Clusters</b></a></li>
<li><a href='#'><b>References</b></a></li>
</ul>
</div>

CSS

.drop_menu {
background:red;
list-style-type:none;
height:30px}
.drop_menu li {float:left}
.drop_menu li a {
padding:9px 20px;
display:block;
color:black;
text-decoration:none;
font-size:large;}
.drop_menu ul {
position:absolute;
left:-99px;
top:-99px;
list-style-type:none;}
.drop_menu li:hover {position:relative}
.drop_menu li:hover ul {
left:0px;
top:30px;
background:red;
padding:0px;}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:red;
font-weight:900}
.drop_menu li:hover ul li a:hover {background:#404040;}

Answer 1

float:left

这用于从elements的流中移除DOM并强制它们向左移动。他们将忽略定位，其余内容将围绕它们流动。

display:block

显示块确定element将被视为block level项。也就是说，它将根据文档的标准流程进行呈现。查看block与inline的一个好方法是block element非常像div标记，其中inline element的行为更像span {1}}。

position:absolute

绝对位置会根据您想要的具体位置和尺寸拍摄您的物品并放置它。它不会对页面上的任何其他项目作出反应，并将无限期地保持在该位置。内容将在其上方或后方流动并完全忽略它。确保您的parent element position:relative强制将其用作包装器。这通常用于CSS菜单的下拉部分。

position:relative

相对于parent，相对位置将强制所有子元素的行为与其定位相符。它可以强制div或container充当wrapper。

了解详情：

职位： https://developer.mozilla.org/en-US/docs/Web/CSS/position
浮动： https://developer.mozilla.org/en-US/docs/Web/CSS/float
显示： https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 2

“float：left”，“display：block”，“position：absolute”和“position：relative”

float:left用于在另外的线性布局中压缩彼此相邻的元素。通常情况下，如果没有float:left，您编写的所有内容都会堆叠在一起，一个堆叠在另一个上面。对于float:left或甚至float:right，元素将尝试占据元素左侧（或右侧）的空间。

display:block是一种显示元素的方式。通常，如果您想要的元素不以这种方式显示，您只需要更改显示类型;例如像li块一样显示div，或者在其中带有图像的div显示in-line，并在其周围显示其他文字。

position很有趣。这允许您指定块的x和y坐标以在空间中移动它。 position:relative将元素相对于其余兄弟元素定位。 position:absolute将元素放置在任何元素周围的绝对空间中。这是一个技巧，如果你position:absolute在一个元素中position:relative，那么绝对元素将跟随相对元素。

如果您在理解这些问题时遇到问题，我肯定会建议您找一些关于CSS可以做些什么的文章。 Here's a CSS3 cheat sheet。看看那里然后转到w3schools（闭嘴，讨厌 - 这个网站适合初学者）以了解更多信息。

CSS显示：block，float：left，position：absolute

2 个答案:

了解详情：