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(" ...
随机推荐
- laravel如何向视图传递值
1.定义路由 Route::get('demo','DemoController@demo'); 2.定义控制器(内with();方法就是定义传递的值 key=>value)=>" ...
- 2019-08-13 纪中NOIP模拟B组
T1 [JZOJ1534] rank 题目描述 小h和小R正在看之前的期末&三校联考成绩,小R看完成绩之后很伤心,共有n个学生,第i个学生有一个总成绩Xi,因为他的排名是倒数第k个,于是小R想 ...
- CF div2 E. Water Balance
给你n个数,你可以这样操作:使区间[l,r]的数变成 他们的平均数,求字典序最小的序列. 做法:从左往右逐个比较,比较完之后会形成一个区间,一开始是区间为1的数进行比较,到后来会 变成区间较大的进行比 ...
- 并查集路径减半优化 UnionFind PathHalving (C++)
/* * UnionFind.h * 有两种实现方式,QuickFind和QuickUnion * QuickFind: * 查找O(1) * 合并O(n) * QuickUnion:(建议使用) * ...
- 在CentOS上通过Docker方式安装Redis
在CentOS上通过Docker方式安装Redis 首先保证已经安装docker. 拖拽redis镜像 docker pull redis 启动redis docker run -p 6379:637 ...
- python3练习100题——027
又是一道迭代的题,没做好. 看了答案才试着写出来. 我一定要加油啊,为了尽快摆脱现在讨厌的生活! 原题链接:http://www.runoob.com/python/python-exercise-e ...
- python3.0练习100题——001
自学python3中,现在开始每天在python2.71 100例中做一道题,用python3实现,并写下一些思考-加油(ง •̀灬•́)ง 题目网站(http://www.runoob.com/py ...
- centost redhat 卸载rpm以及yum install 的正确姿势
先看yum install 的卸载: 第一列为我们要的包名: 那么要移除必须使用 yum list |grep collectd | awk '{print $1}' |xargs yum r ...
- Rider代码格式设置
单选注释格式设置: File/Settings(Ctrl+Alt+S/Command+Option+S)/Code Style/C#选择Other
- 在虚拟机中使用Git
自己如何从安装虚拟机到使用git进行项目代码版本管理的部分教程因为是自学所以没有好的教程只能自己进行百度,网上的教程太多了但都是只是一个模块没有从头到尾详细的教程,我们如果有个详细的教程本来只需花很少 ...