html中相对定位与绝对定位的笔记
来源:互联网 发布:excel 省市数据 编辑:程序博客网 时间:2024/06/05 10:47
html是整个文档空间,body是html中的文档空间, body与html相差9cm左右
postion中的相对定位:relative
postion中的绝对定位:absoute
相对定位:
当没有参照物的时候,相对定位是相对与body定位的
绝对定位:当没有参照物额时候,绝对定位是相对与html定位的
使用margin的时候,是占用文档空间的,一般用在相对定位使用
使用top,left,right,button的时候,是不占用文档空间的,看情况使用
我们一般是在相对里面套用绝对来进行项目的开发
#divAddress{
position: relative;
margin-top: 48px;//这就是刚才提的当使用margin的时候才能进行下面的相对
width: 370px;
height: 66px;
border-bottom: 1px #c1c1c1 solid;
}
#img1{
position: absolute;
float: left;margin-top:2px;
width: 24px; height: 24px;
}
.address{
position: absolute;
margin-left: 34px;
font-size: 20px;
color: #c1c1c1;
}
#peoplePost1{
position: relative;
margin-top: 12px;
width: 370px;
height: 40px;
border-bottom: 1px #c1c1c1 solid;
}
#people1{
position: absolute;
float: left;margin-top:2px;
width: 24px; height: 24px;
}
.people2{
position: absolute;
margin-left: 34px;
font-size: 20px;
color: #c1c1c1;
}
#post1{
position: absolute;
float: left;margin-top:2px;margin-left:192px;
width: 24px; height: 24px;
}
.post2{
position: absolute;
margin-left: 222px;
font-size: 20px;
color: #c1c1c1;
}
<div id="divAddress">
<img id="img1" alt="address" src="<%=request.getContextPath()%>/images/address.png">
<div class="address">地址 : <span style="font-weight: 600;color: black;">输入上海市卢湾区卢湾榜路758弄10号1011室</span></div>
</div>
<div id="peoplePost1">
<img id="people1" alt="people" src="<%=request.getContextPath()%>/images/people.png">
<div class="people2">联系人 : <span style="font-weight: 600;color: black;">张三</span></div>
<img id="post1" alt="post" src="<%=request.getContextPath()%>/images/post.png">
<div class="post2">职位 : <span style="font-weight: 600;color: black;">业务经理</span></div>
</div>
上面也就是相对和绝对结合的html代码中的一段
- html中相对定位与绝对定位的笔记
- HTML的绝对定位与相对定位
- html 的相对定位与绝对定位
- html入门篇--绝对定位与相对定位的区别
- 对css中绝对定位与相对定位的理解
- css中绝对定位与相对定位的区别
- div的相对定位与绝对定位
- CSS的相对定位与绝对定位
- 通俗易懂的相对定位与绝对定位
- css的绝对定位与相对定位
- div的相对定位与绝对定位
- div的相对定位与绝对定位
- div的相对定位与绝对定位
- 元素的相对定位与绝对定位
- div的相对定位与绝对定位
- 相对定位与绝对定位的区别
- CSS的相对定位与绝对定位
- 绝对定位与相对定位
- 【资讯】R3联盟就区块链平台瑞波取消价值数十亿美元的合约提起诉讼
- 【行业】软银集团研究小组测试基于区块链的跨运营商电信支付
- 基于Spark ML 聚类分析实战的KMeans
- CSS之动画
- elasticsearch集群管理工具head插件
- html中相对定位与绝对定位的笔记
- Python随机函数
- 使用Buildroot为Nxp i.mx6ul制作文件系统
- 九度[1112]-拦截导弹
- Kotlin 第十四章:函数
- 【深度】在区块链上管理身份的潜力
- 微信下单支付所需MD5加密
- 【资讯】区块链将如何使人们掌握自己的数据
- 机器学习(周志华)之前三章学习记录