码迷,mamicode.com
首页 > 其他好文 > 详细

3st 关于position四定位

时间:2018-09-28 11:07:03      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:bss   vpp   一个   ++   base   gfs   inline   距离   gbk   

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>position定位应用</title>
    <link rel="stylesheet" type="text/css" href="3st 2.css" />
</head>
<body>
    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
    <div class="box" id="three">Three</div>
    <div class="box" id="four">Four</div>

</body>
</html>
.box {
  display: inline-block;/*值为行内块元素*/
  width: 100px;
  height: 100px;
  background: red;/*背景板颜色*/
  color: black;/*--1234的颜色*/
}

#one{
    position: static;/*元素框正常生成*/
    width: 100px;
    height: 50px;
    background: yellow;/*重定义*/
}

#two {/*相对定位*/
  position: relative;/*元素框偏移某个距离*/
  top: 20px;/*定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移*/
  left: 20px;/*左边界*/
  background: blue;
}

#three{/*绝对定位*/
    position: absolute;/*忽略原本定位框重新进行定位*/
    top:20px;
    left:20px;
    background: grey;
}
/*固定定位  区别在于滚动条出现时*/
#four{
    position: fixed;
    top:20px;
    left:20px;
    background: pink;
}

技术分享图片

3st 关于position四定位

标签:bss   vpp   一个   ++   base   gfs   inline   距离   gbk   

原文地址:https://www.cnblogs.com/FerryJ/p/9716573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!