div盒子练习笔记
width 宽
height 高
border 边框
dashed 虚线
dotte 点线
solid 实线
padding 内边距
left 左
top 上
right 右
bottom 下
content 内容区
margin 外边距
避免相邻的盒子合并；给其中一个盒子设置外边距
超出部分隐藏
auto（自动） 设置左右外边距的水平居中
两个盒子之间的距离同时设置margi值，最终取最大的值
外边距塌陷 嵌套的两个盒子之间同时设置margi值，最终取最大的值
避免嵌套的盒子外边距塌陷：给父级盒子添加边框，或添加padding，或添加overflow：hidden
<html>
<head>
<meta charset="UTF-8">
<title>div练习2</title>
<style>
#div1{
margin: auto;
width: 500px;
height: 250px;
border: solid 5px darkblue;
background-color: pink;
padding: 50px;
overflow:hidden;
}
#div2{
width: 200px;
height: 100px;
border: solid 5px red;
background-color:aquamarine;
padding:50px;
background: url(img/10.gif);
margin: auto;
margin: top 50px;
}
#div2:hover{
background: url(img/9.gif);
}
/*.link-1:hover{
color: #FF0000;
font-size: 250px;
background: #00FFFF;
}
.link-1{
color: #FF0000;
font-size: 250px;
background: fuchsia;
}*/
</style>
</head>
<body background="img/7.jpg">
<div id="div1"><a href="#" class="link-1" style="text-decoration:none ;">
<div id="div2"><p><marquee"></marquee></p></div>
</a></div>
<div id="div3"></div>
</body>
</html>
1349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
