无依赖的绝对定位

绝对定位的元素是不占据空间的,它会出现在正常文档流的位置。

我们一般绝对定位,是先让那个父容器相对定位,然后子元素绝对定位,通过top和left来调整位置但是这样定位,自适应不好。

如果绝对定位后不调整top和left,而通过margin来控制位置,那么这样自适应就很好,而且父容器也不用定位。

绝对定位:如果同时设置了left和right,将实现水平拉伸;如果同时设置了top和botom,将实现垂直拉伸

.chil{

position: absolute;

top: 0;

left: 0;

height: 30px;

right: 0;

bottom: 0;

background-color: pink;

}

满屏拉伸

但如果设置了width和height,则width和height覆盖拉伸。

如果同时出现width和拉伸,则可以使用margin来使元素水平居中    //只兼容IE8及其以上版本

.chil{

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

width: 200px;

background-color: pink;

}

时间: 2024-11-02 23:22:22

无依赖的绝对定位的相关文章

WebFetch 是无依赖极简网页爬取组件

WebFetch 是无依赖极简网页爬取组件,能在移动设备上运行的微型爬虫. WebFetch 要达到的目标: 没有第三方依赖jar包 减少内存使用 提高CPU利用率 加快网络爬取速度 简洁明了的api接口 能在Android设备上稳定运行 小巧灵活可以方便集成的网页抓取组件 使用文档 WebFetch的使用非常简单,让小白用户快速上手,WebFetch为用户配置默认页面处理方法,默认将抓取到的页面信息使用System.out.print输出到控制台(通过配置PageHandler修改默认操作).

java无依赖读取Excel文件

说到Java读取Excel文件,用得多的当然是POI或jxls,但今天在看一本书的时候.当中提到使用JdbcOdbcDriver这个驱动类在不依赖第三方库的情况下也能够完毕对Excel文件的读取操作,网上搜了一下原因然后自己写了个样例跑通了,在此记录一下. Java读取数据库大家都非常熟悉,须要一个数据源与对应的驱动.开发人员通过JDBC操作驱动.驱动再去操作数据库.那么Java读取Excel文件也是类似的.在Windows系统中,能够将一个Excel文件注冊为一个ODBC数据源,注冊过程为:

如何在RedHat6(7) or CentOS6(7)上制作无依赖的PostgreSQL数据库的RPM包

本文解决了源代码安装都需要先检查系统上是否安装了应用程序所依赖的软件包的烦恼,对源代码开发者也有一定的帮助.可以在该基础上进行适当的修改,以满足自己的要求. RedHat5 or CentOS5已经提供了制作RPM包的目录,可以直接把需要制作的RPM包的应用程序的源代码包放系统指定的目录,而不需要像在RedHat6(7)or CentOS6(7)上自己创建制作RPM包的目录. 1 添加普通用户 useradd redhat passwd redhat redhat redhat 2 切换到普通用

css重要属性之辩

一.relative 1)与兄弟 relative对absolute 1.限制left/top/right/bottom定位 2.限制z-index层级: 3.限制在overflow下 relative对fixed  限制z-index层级: 2)本身特征 定位 1.相对自身 定位移动相对于自身 2.无侵入 relative定位不影响其他元素 margin影响其他元素布局 应用 拖拽效果 同时设置top/bottom left/right 绝对定位:拉伸 相对定位:斗争 top VS botto

经典CSS自适应布局

自适应之Margin负值布局之美:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html Float与流体布局: 1.浮动与单侧尺寸固定的流体布局 .wrap{overflow: hidden;}.img{width: 56px;float: left;}.text{margin-left: 76px;} <div class="wrap"> <div class="img">

CSS进阶(十一)position:fixed

固定定位元素的包含快是根元素 类似于无依赖的绝对定位,利用无依赖的固定定位也可以在元素内部实现一个fixed定位 <div class="father"> <div class="right">  <div class="son"></div> </div> </div> .father { width: 300px; height: 200px; position: rel

CSS进阶(十)position:relative

定位位移相对于自身进行偏移定位 相对定位元素的 left/top/right/bottom 的百分比值是相对于包含块计算的,而不是自身 与绝对定位元素的对立方向不同,top/bottom 同时使 用的时候,bottom 被干掉:left/right 同时使用的时候,right 毙命 最小化影响原则 (1)尽量不适用relative,而使用无依赖的绝对定位 (2)在必须使用relative的前提下,尽量最小化 relative的层级优先于普通元素 原文地址:https://www.cnblogs.

C++箴言:理解typename的两个含义 nested dependent name(嵌套依赖名字)

template<class T> class Widget; // uses "class"template<typename T> class Widget; // uses "typename" 答案:没什么不同.在声明一个 template type parameter(模板类型参数)的时候,class 和 typename 意味着完全相同的东西.一些程序员更喜欢在所有的时间都用 class,因为它更容易输入.其他人(包括我本人)更喜

uip UDPclient模式通信移植,p本地ort可以是无规

现在移植UDPclient模式,使用广播地址检测. //udp_client.c /************************************************************************************************************* * 文件名称: udp_client.c * 功能: uIP UDP客户端相关函数 * 作者: [email protected] * 创建时间: 2014-06-06 * 最后改动时间: 201