css-布局定位
position:
** 属性值
- absolute：
*** 将对象从文档流中拖出
*** 可以是top、bottom等属性进行定位
- relative：
*** 不会将对象从文档流中拖出
*** 可以是top、bottom等属性进行定位
<html>
<head>
<title>World</title>
<style type="text/css">
div {
border:2px solid blue;
width:200px;
height:100px;
}
#div11 {
background-color:red;
position:absolute;
/*
left:500px;
top:100px;
*/
}
#div12 {
background-color:green;
width:250px;
height:100px;
}
#div13 {
background-color:blue; }
</style>
</head>
<body>
<div id="div11">AAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCC</div>
</body>
</html>
<html>
<head>
<title>World</title>
<style type="text/css">
div {
border:2px solid blue;
width:200px;
height:100px;
}
#div11 {
background-color:red;
position:relative;
left:500px;
top:100px;
}
#div12 {
background-color:green;
width:250px;
height:100px;
}
#div13 {
background-color:blue; }
</style>
</head>
<body>
<div id="div11">AAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCC</div>
</body>
</html>
css-布局定位的更多相关文章
- CSS布局定位基础-盒模型和定位机制
1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...
- HTML CSS布局定位
我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.PC端常见的网页布局形式有两列布局.三列布局等.在CSS中,我们通常使 ...
- 使用Div + CSS布局页面
在设计网页时,能够控制好各个模块在页面中的位置是非常关键的.本章将讲解利用Div+CSS对页面元素进行定位的方法. Div是HTML中指定的专门用于布局设计的容器对象 Div是CSS布局的核心对象. ...
- 关于css布局的定位问题
虽然职位说是PHP程序,但实际上什么都要做些,排版当然也免不了了,以前自己做网站时就能排出网页了,但是很多东西不系统,有点走马观花,例如关于这个css布局定位的问题就是,今天特意总结了一下,知识这东西 ...
- CSS之定位布局（position，定位布局技巧）
css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- CSS布局与定位——height百分比设置无效/背景色不显示
CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS布局 ——从display，position， float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
随机推荐
- c++11 enable_shared_from_this
本质的原因:raw data和引用计数的管理块,可能是分开的 使用场景: 需要在对象中得到shared ptr, 错误的代码:直接构造新的shared_ptr<A>对象,两个shared ...
- 976 AlvinZH想回家（背包DP大作战T）
976 AlvinZH想回家 思路 如果在第i小时有一些飞机延误,那么一架飞机的c值越大,这一小时产生的损失也越大.而使这一小时产生的损失尽可能的小并不会导致接下来时间产生的损失增大.因此应当每一小时 ...
- 51 Nod 1067 博弈 SG函数
1067 Bash游戏 V2 1 秒 131,072 KB 10 分 2 级题 有一堆石子共有N个.A B两个人轮流拿,A先拿.每次只能拿1,3,4颗,拿到最后1颗石子的人获胜.假设A B都非常聪 ...
- Linux kill 指定进程名的四种方式
方法1 pkill 进程名 方法2 killall 进程名 方法3 kill -9 $(ps -ef|grep 进程名关键字|grep -v grep|awk '{print $2}') 这个是利用管 ...
- 什么是hive
Hadoop Hive概念学习系列之什么是Hive? 参考 <Hadoop大数据分析与挖掘实战>的在线电子书阅读 http://yuedu.baidu ...
- http、tcp及从请求到渲染的过程
http.tcp及从请求到渲染的过程 https://blog.csdn.net/pambassador/article/details/88539478 http请求的结构内容 https://ww ...
- mybatis的入门(二)
上篇文章首先介绍了JDBC操作数据库的相关知识,并总结了JDBC操作数据存在的一些问题,那么这篇文章我们来介绍下mybatis的相关内容 一.mybatis的架构图 下面对上面的架构图详细说明下: 1 ...
- oracle12c之三 控制PDB中CPU 资源使用
CPU资源隔离 数据库中,不同的PDB对主机CPU资源使用要求不同,那么我们就可以使用CDB resourceplans来管理不同pdb对CPU资源的使用. CDB Resource Plans ...
- Java正则表达式-匹配正负浮点数
记录缘由: 公司项目需要从xml中获取标识为NUMBER的字符串,将之存入数据库中,存入的列的类型即为NUMBER.当遇到非数字时,原实现是通过异常: String plainValue = null ...
- Linux du与df命令的差异
今天上午查看磁盘空间,df命令查看的时候:93%,du命令查看的时候:90%.回想起昨天在用ftp传输过程中,rm掉文件,应该是文件虽然表明上删除掉了,但是空间实际是未释放的. 由于du与df命令实施 ...