练习：
1.外边距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ margin: 0;/*去掉body自带的8个像素外边距*/ } h1{ margin-bottom: 0; background-color: #008000; } p{ margin-top: 0; background-color: #0000FF; } #big{ width:200px; height:200px; background-color: red; overflow: hidden;/* 解决粘连显示异常*/ } #small{ width:50px; height:50px; background-color: green; margin-left: 50px; /*粘连问题:当元素的上边缘和上级元素的上边缘重叠时 给元素添加.上外边距会出现粘连显示异常,通过给上级元素 添加overflow:hidden解决*/ margin-top: 50px; } #d1{ width:100px; height:100px; background-color: red; /* 四个方向各50 */ /* margin:50px; */ /* 上下50px 左右100px */ /* margin: 50px 100px; */ /* 设置元素上下外边距0 水平居中 */ /* margin: 100px auto; */ /* 上右下左 顺时针赋值 */ /* margin: 20px 40px 60px 80px; */ } #d2{ width:100px; height:100px; background-color: blue; margin-left: 100px; margin-top: 50px; } #s1{ margin-left: 50px; margin-right: 50px; /* 行内元素上下外边距无效 */ margin-top: 50px; } #s2{ /* 左右相邻外边距是求和 上下相邻外边距是取最大*/ margin-left: 30px; } </style> </head> <body> <div id="big"> <div id="small"> </div> </div> <h1>这是h1</h1> <span id="s1"> 这是span1 </span> <span id="s2"> 这是span2 </span> <p>这是p标签</p> <div id="d1"></div> <div id="d2"></div> </body> </html>
显示效果：
2.外边距练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ width:120px; height:80px; background-color: red; margin-left: 100px; overflow: hidden; margin-top: 80px; } #d2{ width:120px; height:80px; background-color: blue; margin-left: 220px; } #small{ width:50px; height:40px; background-color: yellow; margin-left: 70px; margin-top: 20px; </style> </head> <body> <div id="d1"> <div id="small"> </div> </div> <div id="d2"></div> </body> </html>
显示效果：
3.边框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> h3{ /* 单独给某一个方向添加边框 */ border-bottom: 1px solid red; text-align: center; } div{ width: 200px; height: 200px; border: 1px solid red; /* 圆角 值越大越圆 */ border-radius: 200px; } a{ /*宽高132*40 颜色#Oaaled */ width: 132px; height: 40px; background-color: #0aa1ed ; display: block; text-align: center; line-height: 40px; color: white ; text-decoration: none ; border-radius: 3px; font-size: 20px; } </style> </head> <body> <a href="#">查看详情</a> <h3>边框测试</h3> <div>这是一个div</div> </body> </html>
显示效果：
