gpt4 book ai didi

关于 FLOAT 的 HTML

转载 作者:太空宇宙 更新时间:2023-11-03 23:23:30 24 4
gpt4 key购买 nike

为什么此代码(具有 float 属性)显示的 a 元素比没有 float 属性的代码大?

<html>

<head>

<style>


a {
float: left; /* this is the property */
height: 40px;
line-height: 40px;
padding-left: 0.8em;
padding-right: 0.8em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-image: url(images/headerTiny.png);
background-repeat: repeat;
}

</style>

</head>

<body>
<a href="#">Box Title</a>

</body>

</html>

对不起我的英语不好,我的母语不是英语。

最佳答案

那是因为当你 float 一个元素时,它会自动变成一个 block 级元素(不需要声明 display: block )。 block 级元素将允许您分别指定其宽度和高度。

当您删除 float 属性时,<a>元素默认为内联元素(即默认为 display: inline)。内联元素不响应宽度和高度定义。

您可以查看下面的代码片段并比较同一元素的 float 和非 float 版本。

a {
height: 40px;
line-height: 40px;
padding-left: 0.8em;
padding-right: 0.8em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #eee;
background-repeat: repeat;
}

a.float {
float: left;
}

a.nofloat {

}
<a class="float" href="#">Box Title (floated)</a>

<a class="nofloat" href="#">Box Title (no float)</a>

关于关于 FLOAT 的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27902333/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com