HTML和CSS连接的img是如何分离的？
HTML和CSS连接的img是如何分离的？
提问于 2015-12-20 06:53:27
代码如下：
body{
background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header{
background-color:#F0F8FF;
text-align:center;
padding:3px;
opacity:0.2;
height:60px;
}
h1{
font-family:'Lucida Console';
font-weight:bold;
color:blue;
}
div.header ul {
font-style:none;
font-size:50%;
list-style-type:none;
position:relative;
right:700px;
bottom:50px;
}
ul{
list-style-type:none;
line-height:220%;
}
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:visited{
color:white;
font-size:150%;
text-decoration:none;
margin:10px;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
div.gallary img{
position:relative;
left:160px;
top:150px;
margin:5px;
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
border: 1px solid #ccc;
}<!DOCTYPE HTML>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div class = "header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class +"nav" >
<ul>
<li><a href = "">Home</a></li>
<li><a href = "">Lessons</a></li>
<li><a href = "">Videos</a></li>
<li><a href = "">apply</a></li>
</ul>
</div>
<div class = "gallary">
<img src = "http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg"></img>
<img src = "http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg"></img>
<img src = "http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg"></img>
<img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA"></img>
<img src = "http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300"></img>
</div>
</body>
</html>
我的问题是，当我运行这段代码并将鼠标悬停在链接或图像上时，它们似乎都通过某个看不见的框连接在一起。例如，当我将鼠标悬停在“主页”链接上时。每个链接和每个img都向下移动。我该如何解决这个问题？谢谢。
回答 4
Stack Overflow用户
发布于 2015-12-20 06:59:54
您必须：
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}这意味着当你在一个链接(<a>)上移动鼠标时，你的字体大小变成了220%，而不是常规的150% --这就是你所描述的移动的原因--任何文本的大小都会增加大约50% (150/220)。
编辑/添加：
图像(<img>标签)也是如此--你有：
div.gallary img{
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
}这意味着：<div class="gallary">中的图像是200x200px，但当你将鼠标移到它们上面时，它们会变得更大: 220x220px，这也会移动后面的所有内容……
Stack Overflow用户
发布于 2015-12-20 07:02:20
它们根本没有联系在一起，它们只是对元素的增长做出反应，因为你的链接在悬停时会使你的字体变得更大，而你的图像在悬停时会变得更有边框。
避免此行为的最佳方法是设置border-sizing属性：
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}保罗·爱尔兰的* { Box-sizing: Border-box } FTW
Stack Overflow用户
发布于 2015-12-20 07:05:49
https://jsfiddle.net/j9rxzc2n/
请检查这一个，它的行为不正常，因为它的大小在悬停时被增大。所以我固定了它的大小，现在它工作得很好，没有上下波动。我只添加了这一行：ul li{height:30px; }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34376237
复制相关文章
相似问题
腾讯云开发者
