<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style type="text/css" media="all">
.div2 {
position: relative;
border: 1px solid;
width: 600px;
height: 600px;
overflow: auto;
}
.img1 {
position: absolute;
top: 10%;
left: 10%;
margin-top:10%;
margin-left:10%;
/*以下仍然失效 */
margin-right:80%;
/*变得有效*/
margin-bottom:80%;
}
</style>
</head>
<body>
<div class="div2">
<img class= "img1" src="http://photocdn.sohu.com/20150505/mp13579778_1430811186687_4.jpeg"
alt="" width="150" style="">
</div>
</body>
</html>
替换元素:
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如:
<img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
非替换元素:
(X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。
比如<p>wanmei.com</p>
浏览器将把这段内容直接显示出来。
替换元素就是里面内容是不固定的,没有实际内容。