HTML连载59-子绝父相
一、子绝父相
1.只使用相对定位，对图片的位置进行精准定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
width:800px;
height:50px;
background-color: red;
margin:0 auto;
}
ul li{
float:left;
width:100px;
height: 50px;
text-align:center;
background-color: yellow;
line-height: 50px;
}
ul li:nth-of-type(4){
/*这里复习了同类标签选择第几个进行设置它的样式*/
background-color: blue;
}
ul li img{
position:relative;
left: -30px;
top: -14px;
width: 20px;
height: 16px;
/*这里可以先写个大概的数字，然后利用谷歌开发者定位进行滚动数据调节*/
}
</style>
</head>
<body>
<ul>
<li>拍卖金融</li>
<li>美妆馆</li>
<li>京东超市</li>
<li>
全球购<img src="bear.jpg">
</li>
<li>闪购</li>
<li>团购</li>
<li>拍卖</li>
<li></li>
</ul>
</body>
</html>
这种方式的的缺点：可以看到虽然利用相对定位进行了数据调节来达到让图片定位的效果，但是由于相对定位是在标准流的基础上进行调节，所以原来图片的位置（也就是全球购后面的那块区域）依然是被占用着的。
2.下面只使用绝对定位来进行试验。
ul li img{
position:absolute;
left: 900px;
top: 1px;
width: 20px;
height: 16px;
}
这种方式的缺点：上次连载说到，绝对定位会以首屏来进行定位，因此当改变网页大小的时候，将会造成变形，定位到了不合理的地方。
3.因此要同时运用绝对定位和相对定位进行编排才最合理
ul li:nth-of-type(4){
/*这里复习了同类标签选择第几个进行设置它的样式*/
background-color: blue;
position:relative;
}
ul li img{
/*介绍一个方法：子绝父相，即子元素使用绝对定位，父元素使用相对定位*/
position:absolute;
left: 41px;
top: 1px;
width: 20px;
height: 16px;
}
三、源码：
D153_SubAbsoluteFathRelative.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D153_SubAbsoluteFathRelative.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载59-子绝父相的更多相关文章
- 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- css负边距之详解(子绝父相)
来源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以 ...
- CSS中的父相子绝布局
主要应用场景,就是我想要块的布局根据父级来定位,而不是根据页面. 例如,下面的例子中,我用两个半圆拼成一个正圆,思路是用一个父级标签把两个子标签包起来,父标签是一个正圆,然后子标签各占一半,先化成两个 ...
- CSS定位中“父相子绝”
一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...
- Vue父子组件传值以及父调子方法、子调父方法
稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...
- sql server 子找父和父找子
父找子 with RTD1 as( select Id,pid from Sys_XCode ), RTD2 as( select * from RTD1 where id=1 union all s ...
- ylb：子查询（嵌套子查询）和子查询（相关子查询）
ylbtech-SQL Server:SQL Server-子查询(嵌套子查询)和子查询(相关子查询) SQL Server 子查询(嵌套子查询)和子查询(相关子查询). 1,ylb:1,子查询(嵌套 ...
- vue 实现子向父传值
父组件 <template> <div id="app"> <child @onChange='onChildValue'></child ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
随机推荐
- NIO 和BIO
讲讲NIO? 传统的IO流是阻塞式的,会一直监听一个ServerSocket,在调用read等方法时,他会一直等到数据到来或者缓冲区已满时才返回.调用accept也是一直阻塞到有客户端连接才会返回.每 ...
- ActiveMQ分布式事务
一.安装ActiveMQ 1.拷贝apache-activemq-5.14.4-bin.tar.gz到Linux服务器的/opt下 2.解压缩 tar -zxvf apache-activemq-5. ...
- cc.progressFromTo cc.progressTo（action 在duration中ProgressTimer的Percentage变化)
let progressTimer= new cc.ProgressTimer(new cc.Sprite(fileName));this.addChild(progressTimer);progre ...
- ❀❀ selenium 学习网站 ★★★★★
http://edu.51cto.com/course/course_id-7320.html Selenium IDE WEB自动化测试入门视频课程(上)(共10课时)_在线自学视频教程_51C ...
- python2下解决json的unicode编码问题
基础知识: 序列化——json.dumps()函数是将一个Python数据类型列表进行json格式的编码(可以这么理解,json.dumps()函数是将字典转化为json字符串) 反序列化—— ...
- 【Python】数值运算操作符
- java-日期取特定值
import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; /** * @author G ...
- javascript 循环读取数组中的值
//数组 var a = ["#F85C6F", "#78B0F0", "#DB83ED", "#8EC656", &q ...
- Mybaits的中的对象映射（包含仅有基本数据类型的属性的和对象类型的属性的）
转:https://blog.csdn.net/cjt20100/article/details/46547617. 1 constructor – 用来将结果反射给一个实例化好的类的构造器 a ...
- U盘拷贝目标文件过大无法复制时的解决方法
在cmd下输入:convert U盘符:/fs:ntfs ---> 回车 转换完成后可以看到U盘属性为NTFS了 这时就可以复制大文件到U盘了