div+css布局注意点

简介:


一 div居中

#container { margin:0 auto; }


margin:1px 2px 3px 4px;其中四个值分别代表上右下左(顺时针)

margin:1px 2px;其中1px代表分别距浏览器上边和下边的距离,2px代表分别距左右的距离。

margin:0 auto; 0 代表距上下的距离,auto代表距左右的距离。当左右距离为auto的时候,浏览器自动测算时左右距离一致。

 


 

二 绝对定位

当某个div被设定为position:absolute,它本质上已经和其它对象分离开了,它的定位模式不影响其它对象,也不被其它对象影响。

 

#sample{
 postion:absolute;
 left:0;
}
表示距左边距离为0px


例子:

#left{
 position:absolute;
 left:0;
 width:200px;
}

#center{
 margin-left:200px;
 margin-right:200px;

 height:100px
}

#right{
 position:absolute;
 right:0;
 width:200px;
}

这样左右两边是宽度固定的两个div,中间的div距浏览器左右两边分别为200px,正好留出了左右div宽度的位置,并且中间div的宽度自适应。

 

 

三 高度自适应

有的人觉得很简单,直接设置height:100%即可,但是仅仅这样做是不够的。

必须明白的一点是:一个对象的高度能否自适应,取决于它的父对象是否高度自适应。

 

例子一:

<html>
<body>
<div id="content"></div>
</body>
</html>

要想让content的div高度自适应,必须这样设置

html,body{ height:100%; }

#content{ height:100%; }


例子二:

<html>
<body>
<div id="content">
    <div id="left"></div>
</div>
</body>
</html>

要想让left的div高度自适应,必须这样设置

html,body{ height:100%; }

#content{ height:100%; }

#left{ height:100%; }

也就是说要设置left的高度自适应,必须设该对象的父对象content高度自适应。

要设content高度自适应,也要设置其父对象的高度自适应。

 

 

目录
相关文章
|
存储 弹性计算 固态存储
阿里云服务器是如何收费的?阿里云服务器各收费项目收费标准参考
阿里云服务器收费标准包括实例价格、预留实例券价格、专有宿主机、块存储价格、存储容量单位包、带宽价格、快照服务价格等,云服务器价格主要由云服务器配置费用+磁盘价格+网络宽带价格,配置指的是云服务器的实例规格和cpu与内存配置,本文为大家分享一下2023年阿里云服务器所有收费项目的最新收费标准,以表格形式展示给大家,以供参考。
阿里云服务器是如何收费的?阿里云服务器各收费项目收费标准参考
|
传感器 数据安全/隐私保护 存储
|
存储 人工智能 运维
骞云获得阿里云首批产品生态集成认证,携手阿里云共建新合作
近日,上海骞云信息科技有限公司(以下简称“骞云”)的骞云云自动化管理平台与阿里云计算有限公司(以下简称“阿里云”)的阿里云容器服务 ACK 经过严格测试程序,完成了首批的产品生态集成认证测试。作为入选阿里云首期云原生加速器的企业,骞云通过云原生加速器项目携手阿里云共建更加丰富的云原生产业生态圈,加速云原生落地。
34890 0
骞云获得阿里云首批产品生态集成认证,携手阿里云共建新合作
|
存储 边缘计算 编解码
关于vue3的两种API写法——选项API和组合API
关于vue3的两种API写法——选项API和组合API
关于vue3的两种API写法——选项API和组合API
|
弹性计算 小程序 测试技术
阿里云服务器免费申请1个月试用攻略
本文介绍阿里云服务器申请1个月试用的申请地址、典型试用案例、试用事项详细说明和云服务器免费试用热门问题等内容,让用户了解阿里云服务器试用的相关政策,并选择适合自己的试用套餐。
3086 0
阿里云服务器免费申请1个月试用攻略
|
XML 安全 NoSQL
SSRF漏洞详细讲解
SSRF(Server-Side Request Forgery:服务器端请求伪造)是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下,SSRF是要目标网站的内部系统。(因为他是从内部系统访问的,所有可以通过它攻击外网无法访问的内部系统,也就是把目标网站当中间人)探测目标端口如果目标未开放探测的端口,则会立马产生回显如果对方开放了所探测的端口,页面将会一直处于加载中的状态。...
|
微服务 API 数据库
带你读《微服务架构设计模式》之二:服务的拆分策略
本书中,微服务架构的先驱、Java 开发者社区的意见领袖 Chris Richardson 收集、分类并解释了 44 个架构设计模式,这些模式用来解决诸如服务拆分、事务管理、查询和跨服务通信等难题。本书不仅仅是一个模式目录,还提供了经验驱动的建议,以帮助你设计、实现、测试和部署基于微服务的应用程序。
|
搜索推荐 自然语言处理 开发者
云栖硬核回顾|企查查搜索引擎演进之路
企查查作为企业征信行业的搜索引擎,一直以来都与阿里云开放搜索团队有深度合作。本次朱总独家揭秘,开放搜索陪伴企查查从创业初期到成为企业征信行业的独角兽的过程中,是如何满足企查查产品海量数据的精准搜索需求的。
9125 0
|
弹性计算 NoSQL Redis
阿里云Redis配置公网连接的注意点
对阿里云官方文档关于Redis配置公网连接的补充
3706 0