2020-12-01

最新推荐文章于 2024-05-05 07:41:03 发布

繁星为礼

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量20

点赞数

文章标签： html

本文链接：https://blog.csdn.net/keqiguan/article/details/110454170

版权

12.1

今天老高给我们讲了一下position，我们知道了一些定位的相对位置，接下来讲了margin和padding，我们也知道了一些标记相对于边框的间距，感觉收获挺多的，同时老高的一些话我还是感触良多的，我们现在应该努力规划自己的生活了，不能再浑浑噩噩了。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .sb{
               width: 200px;
               height: 200px;
           }
       </style>
   </head>
   <body>
       
       

       


       
       <div style="border: 1px solid black; width: 600px;height: 600px; position: relative;">
           <div class=sb style="background-color: red;"></div>
           <div class=sb style="background-color: blue; position: absolute;bottom: 15px;"></div>
           <div class=sb style="width: 300px;background-color: green;"></div>
       </div>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           span{
               background-color: red;
           }
           /*margin用于设置当前标记距离其它标记的间距*/
           /*padding用于设置当前标记里的元素相对于此边框的间距(如:此蓝色边框中的"Hello World"相对于蓝色边框的位置)*/
           i{
               padding-top: 20px;
               padding-right: 10px;
               padding-bottom: 20px;
               padding-left: 10px;
               margin-top: 10px;
               margin-right: 20px;
               margin-bottom: 10px;
               margin-left: 20px;
               /*margin:50px;*//*上下左右都间距50px*/
               /*margin:10px 20px;*//*上下间距10px,左右间距20px*/
               /*margin:10px 30px 20px;*//*上边间距10px,左右间距30px,下边间距20px*/
               /*margin:10px 20px 30px 40px;*//*上边间距10px,右边间距20px,下边间距30px,左边间距40px(顺时针)*/


               /*padding:20px;*//*上下左右都是20px*/
               /*padding:20px 10px;*//*上下20px,左右10px*/
               /*padding:10px 20px 30px;*//*上10px,左右20px,下30px*/
               /*padding:10px 20px 30px 40px;*//*上10px,右20px,下30px,左40px(顺时针)*/
               display: inline-block;
               background-color: blue;
           }
       </style>
   </head>
   <body>
       <div style="border: 1px solid black;">郑州市河南工业大学</div>
       <span>郑州</span><i>Hello World</i><span>郑州</span>
       <div style="border: 1px solid black;">郑州市河南工业大学</div>
   </body>
</html>

繁星为礼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-01

12.1 今天老高给我们讲了一下position，我们知道了一些定位的相对位置，接下来讲了margin和padding，我们也知道了一些标记相对于边框的间距，感觉收获挺多的，同时老高的一些话我还是感触良多的，我们现在应该努力规划自己的生活了，不能再浑浑噩噩了。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></ti...
复制链接

扫一扫