HTML关于浮点数
HTML关于浮点数
提问于 2015-01-12 20:44:23
为什么这段代码(带有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>很抱歉我的英语，我不是以英语为母语的人。
回答 1
Stack Overflow用户
发布于 2015-01-12 20:49:24
这是因为当您浮动一个元素时，它会自动成为块级元素(不需要声明display: block)。块级元素将允许您分别指定其宽度和高度。
删除float属性时，<a>元素默认为内联元素(即默认情况下为display: inline )。内联元素不响应宽度和高度定义。
您可以查看下面的代码片段，并比较同一元素的浮动和非浮动版本。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27902333
复制相关文章
相似问题
腾讯云开发者
