審查元素時，和設定的大小不一樣?。ɡ蠋煹木鸵粯樱槭裁囱?/h1>
為什么我也是按照老師的代碼做的，但是審查元素的時候，大小和自己設定大小不一樣，圖為其中一個，其他的也大小不一樣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{padding: 0;margin:0;}/*所有元素padding和margin都設為0*/
body{
background-color:#fff;
color:#555;
font-family:'Avenir Next','Lantinghei SC';/*中文為蘭亭雅黑*/
font-size:14px;
-webkit-font-smoothing:antialisase;/*字體平滑*/
}
.wrap{
width:100%;
height:600px;
position:absolute; ?/*設置居中*/
top:50%; ? ? ? ? ? /*設置居中*/
margin-top:-300px;/*設置居中*/
background-color:#333;
overflow:hidden;/*超出div.wrap的照片就不顯示了*/
/*海報樣式*/\
}
.photo{
width:260px;
height:320px;
position:absolute;
z-index:1;
box-shadow:0 0 1px rgba(0,0,0,.01);/*因為是隨機定位的，要用到left和top*/
}
.photo.side{
width:100%;/*正面和反面*/
height:100%;
background-color:#eee;
position:absolute;/*為了漂浮起來*/
top:0;
right:0;
box-sizing:border-box;/*內容和padding都不會超過邊框*/
}
.photo.side-front{display:none;}/*正面*/
.photo.side-front.image{
width:100%;
height:250px;
line-height:250px;/*當里面的圖片標簽不足250px會垂直居中*/
overflow:hidden;/*超過部分會隱藏*/
}
.photo.side-front.image img{
width:100%;
}
.photo.side-front.caption{
text-align:center;
font-size:16px;
line-height:50px;}
.photo.side-back{}
.photo.side-back.desc{
color:#666;
font-size:14px;
line-height:1.5em;
? }
?.photo_center{
?left:50%;
?top:50%;/*設置水平居中*/
?margin:-160px 0 0 -130px;
?z-index:999;/*保證不會被遮擋*/
?}
</style>
</head>
<body onselectstart="return false;">
? ?<div class="wrap">
? ? ? <div class="photo">
? ? ? ? ? <div class="side side-front">
? ? ? ? ? ? ? <p class="image"><img src="test.jpg"/> </p>
? ? ? ? ? ? ? ?<p class="caption"> 麥兜</p>
? ? ? ? ? </div>
? ? ? ? ? <div class ="side side-back">
? ? ? ? ? ? ? <p class="desc">描述信息</p>
? ? ? ? ? </div>
? ? ? ? ? ? <div class="photo_center"></div>
? ? ?</div>
? ?</div>
</body>
</html>
為什么我也是按照老師的代碼做的，但是審查元素的時候，大小和自己設定大小不一樣，圖為其中一個，其他的也大小不一樣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{padding: 0;margin:0;}/*所有元素padding和margin都設為0*/
body{
background-color:#fff;
color:#555;
font-family:'Avenir Next','Lantinghei SC';/*中文為蘭亭雅黑*/
font-size:14px;
-webkit-font-smoothing:antialisase;/*字體平滑*/
}
.wrap{
width:100%;
height:600px;
position:absolute; ?/*設置居中*/
top:50%; ? ? ? ? ? /*設置居中*/
margin-top:-300px;/*設置居中*/
background-color:#333;
overflow:hidden;/*超出div.wrap的照片就不顯示了*/
/*海報樣式*/\
}
.photo{
width:260px;
height:320px;
position:absolute;
z-index:1;
box-shadow:0 0 1px rgba(0,0,0,.01);/*因為是隨機定位的，要用到left和top*/
}
.photo.side{
width:100%;/*正面和反面*/
height:100%;
background-color:#eee;
position:absolute;/*為了漂浮起來*/
top:0;
right:0;
box-sizing:border-box;/*內容和padding都不會超過邊框*/
}
.photo.side-front{display:none;}/*正面*/
.photo.side-front.image{
width:100%;
height:250px;
line-height:250px;/*當里面的圖片標簽不足250px會垂直居中*/
overflow:hidden;/*超過部分會隱藏*/
}
.photo.side-front.image img{
width:100%;
}
.photo.side-front.caption{
text-align:center;
font-size:16px;
line-height:50px;}
.photo.side-back{}
.photo.side-back.desc{
color:#666;
font-size:14px;
line-height:1.5em;
? }
?.photo_center{
?left:50%;
?top:50%;/*設置水平居中*/
?margin:-160px 0 0 -130px;
?z-index:999;/*保證不會被遮擋*/
?}
</style>
</head>
<body onselectstart="return false;">
? ?<div class="wrap">
? ? ? <div class="photo">
? ? ? ? ? <div class="side side-front">
? ? ? ? ? ? ? <p class="image"><img src="test.jpg"/> </p>
? ? ? ? ? ? ? ?<p class="caption"> 麥兜</p>
? ? ? ? ? </div>
? ? ? ? ? <div class ="side side-back">
? ? ? ? ? ? ? <p class="desc">描述信息</p>
? ? ? ? ? </div>
? ? ? ? ? ? <div class="photo_center"></div>
? ? ?</div>
? ?</div>
</body>
</html>
2016-05-23
你用的什么瀏覽器？可以換個瀏覽器試試看