float，posion，浮动和清缓存的方法

最新推荐文章于 2022-07-25 14:17:52 发布
最新推荐文章于 2022-07-25 14:17:52 发布
阅读量103 收藏
点赞数
原文链接：http://www.cnblogs.com/fengyuzhen34/p/9293260.html
版权

less 

*{
margin:0;
padding: 0;
border:0;
}

ul,li{
list-style: none;
}

div{
width:1000px;
margin:0 auto;
overflow: hidden;
>a{
float:left;
width:200px;
height:50px;
line-height: 50px;
background: red;
}
>span{
float:right;
width:200px;
height:50px;
line-height: 50px;
background: orangered;
}
}
section{
width:1000px;
margin:0 auto;
position: relative;
margin-top:100px;
//
&:after{
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
>a{
position:absolute;
left:0;
top:0;
width:200px;
height:50px;
line-height: 50px;
background: red;
}
>span{
position: absolute;
right:0 ;
top:0;
width:200px;
height:50px;
line-height: 50px;
background: orangered;
}
}
//行内元素，一旦设置float,position，就会变成块级了，
//。就不用在写display:inline-block;
//float: 用这个overflow
//position: overflow。清除不了元素，添加伪类：
//after{
// content: "";
// height:0;
// display: block;
// clear: both;
//}
//以 position: relative;为基点。设置position: absolute，可堆叠;
//用z-index 调整顺序的显示；并且只对同级标签有用。

清除缓存的方法：

给父容器添加 clearfix 的 class ，用 伪元素 clearfix：after 来设置样式，清除浮动

给父容器添加 overflow:hidden 或者 auto 样式;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例练习</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div>
<a href="">asdfasdf</a>
<span>dsfdg</span>
<p>dfsljgslfd</p>
</div>
<section>
<a href="">afsdf</a>
<span>dskafjasl</span>
<p>dajfsljfals</p>
</section>

</body>
</html>

转载于:https://www.cnblogs.com/fengyuzhen34/p/9293260.html

清，纯一色
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
postionfixed固定_详解如何解决position:fixed固定定位偏移问题
weixin_36277530的博客
02-02 1378
问题css固定定位position:fixed很容易使用，就是相对浏览器的viewport进行定位，top:0;left:0就是在左上角。.container{width: 100px;height: 100px;background: #888;position: fixed;top: 100px;left: 100px;}当父级元素设置transform之后.BFC-box{margin:20...
position和float的区别
uniquehzx的博客
08-27 1978
只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果。 float从字面上的意思就是浮动,float能让元素从文档流中抽出，它并不占文档流的空间，典型的就是图文混排中文字环绕图片的效果了。并且float这也是目前使用最多的网页布局方式。不过需要注意的是清除浮动是你可能需要
posion定位属性
weixin_30321709的博客
09-27 186
Position Static: 该元素根据文档的正常流程进行定位。顶部、右、底部、左和z- index属性都没有影响。这是默认值。 Relative:元素根据文档的正常流程进行定位，然后根据顶部、右、底部和左侧的值对其进行偏移。偏移量不影响任何其他元素的位置;因此，页面布局中元素的空间与位置是静态的一样。当z- index的值不是自动的时候，这个值就会创建一个新的...
CHI DFX方法
W1Z1Q的专栏
02-09 3685
本文描述CHI error handling。
Java NIO之缓存Buffer代码实例
代码充实生活的博客
10-24 774
文章目录代码实例控制台输出结果 代码实例 import java.nio.Buffer; import java.nio.ByteBuffer; import java.util.ArrayList; import java.util.List; /** * java NIO系列之缓冲区Buffer: * *主要负责数据的存取，其底层的实现就是数组，用于存储不同数据类型的数据， * 根据...
基于ARP缓存投毒获取教务处网站密码
a1889199124975的博客
06-25 270
本文章仅供交流学习使用，本文章实验用的主机也已经经由当事人授权，请勿用于其它用途，否则后果自负。 （真不想罗嗦这一句）：-） 第一次写技术性博客，肯定会有一些问题，大家将就着看吧>_< 　　周五晚上在图书馆讨论事情的的时候发现：教务处网站的网站使用http协议，post表单是明文传送的。截取表单后发现一个类似IPT_LOGINUSERNAME=×××××××××（×代表...
servlet三种实现方法
Tenderne_posion的博客
10-12 538
servlet的三种实现方法：一种实现，两种继承 servlet生命周期： Servlet的生命周期通过javax.servlet.Servlet接口中的init()、service()和destroy()方法来表示 Servlet的生命周期包含了下面4个阶段： 1.加载和实例化 2.初始化 3.请求处理 4.服务终止 一：实现servlet接口，然后实现接口中的五种方法，代码为： public ...
安全开发--3--Python实现ARP缓存投毒
武天旭的博客
07-25 533
ARP投毒的逻辑：欺骗目标设备，使其相信我们是它的网关；然后欺骗网关，告诉它要发给目标设备的所有流量必须交给我们转发。网络上的每一台设备，都维护着一段ARP缓存，里面记录着最近一段时间本地网络上的MAC地址和IP地址的对应关系。为了实现这一攻击，我们会往这些ARP缓存中投毒，即在缓存中插入我们编造的记录。另外，ARP投毒只对IPv4有效，对IPv6是无效的。
adapter 获取每个posion位置推荐，记录RecycleView
qq_36022808的博客
04-05 400
https://blog.csdn.net/Gods_magic/article/details/81671058 这个博主写的很明细，在点击适配器时的整个过程 http://www.imooc.com/article/252102 这个博主写明了Onclick的方法 本人通过这两个人的方法实现了RcycleView点击效果并跳转到对应的页面中 如果用Bindview写 记住绑定数据 ...
posion ivy
06-22
Poison Ivy (PI)可以生成多种高级语言的数组,C,Delphi,Perl,BIN,生成shellcode,具备Copy to Alternate Data Streams功能，采用NTFS数据流形式隐藏木马。不释放任何文件
player.transform.position-transform.posion是什么意思
06-06
`player.transform.position - transform.position` 表示的是一个向量，这个向量的方向是...其中 `Quaternion.LookRotation` 方法接受一个向量作为参数，返回一个旋转四元数，表示将当前物体朝向这个向量所描述的方向。
Linux系统 mmap 存储映射
tugouxp的专栏
04-23 1717
括号中表示预期行为，括号外部的表示在LINUX系统中的实际行为，比如组合SHARED/EXEC的读行为，对于一个可执行的共享地址来说，没有给与PROT_READ属性，预期当然不可读，但是由于CPU执行上面的代码，必须要进行读操作，而实际的硬件架构和及并没有区分执行读和其它方式的读，所以，实际上对于这样的内存，仍然是可读的。从上图中可以看到，这段匿名区域（可能是MMAP区域，现在的MALLOC都用MMAP实现）地址是向下增长的，像栈一样，就像前面提到的第二种情况，这是在哪里控制的呢？
【Unity3D开发小游戏】《贪吃蛇》Unity开发教程
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
06-26 5084
一、前言 贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。 那么如何用unity做一个贪吃蛇游戏呢，就跟随作者一起实现以下吧。 效果图： 二、原文链接 原文出处：noobtuts 原文链接：https://noobtuts.com/unity/2d-snake-game 原文作者：不详 三、正文 介绍 这篇文章将讲解怎么...
决策概率论，一文读懂群体决策概率与个体决策概率的关系
09-04
有一本书叫做《乌合之众》把群体批得一无是处，然而另一本书《群体的智慧》又阐述群体是有智慧的，群体越大，智慧越高。 读了这篇决策概率论的文章，让你对于群体和个体不再迷茫。
Java项目-基于微信小程序的微信点餐系统（包括源码，数据库，教程）.zip
09-04
Java毕设，小程序毕业设计，小程序课程设计，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！可以放心下载 1. 技术组成 前端： 小程序 后台框架：SSM/SpringBoot（如果有的话） 开发环境：idea，微信开发者工具 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库可视化工具：使用 Navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本），maven
Java项目-基于微信小程序的springboot基于微信小程序的学生宿舍管理系统（包括源码，数据库，教程）.zip
09-04
Java毕设，小程序毕业设计，小程序课程设计，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！可以放心下载 1. 技术组成 前端： 小程序 后台框架：SSM/SpringBoot（如果有的话） 开发环境：idea，微信开发者工具 数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库可视化工具：使用 Navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本），maven
魔镜数据_天猫2022.618全品类规模及增速.xlsx
最新发布
09-04
魔镜数据_天猫2022.618全品类规模及增速
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值