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 ...
随机推荐
- 关于OC中的block自己的一些理解（二）
一.block延伸:页面间反向传值 1)first页面的代码 - (void)viewDidLoad { [super viewDidLoad]; [self setupBtn]; self.view ...
- 省选后CTS/APIO前文化课划水记
目前没有什么明确的目标,所以就叫划水吧. 第一周 4.9 (Tue) 早上 10:00 到学校,然后去仓库找了张桌子,搬到教室,开始自习生活. 拿出"必背古诗文",发现除了< ...
- ubuntu下面的某些软件安装
1. python 下面的mysql驱动:不是在pip里面安装,执行下面命令 apt-get install python-mysqldb
- AVL树插入(Python实现)
建立AVL树 class AVLNode(object): def __init__(self,data): self.data = data self.lchild = None self.rchi ...
- 编译安装php-5.3.27报错：make: *** [sapi/fpm/php-fpm] 错误 1
安装PHP的时候make报错:make: *** [sapi/fpm/php-fpm] Error 1 原因:Centos6.8之后已经将iconv库加进来了,如果再安装libiconv库相当于重复一 ...
- 当Appium中遇到alert（python篇）
当Appium中遇到alert,可以使用switch_to_alert(),以下是微信登录切换登录方式的代码示例: #coding=utf-8 from appium import webdriver ...
- opencv_python使用cv2.imread()读取中文路径报错问题(转)
原地址:https://blog.csdn.net/liuqinshouss/article/details/78696032 1 说明 本篇中使用的opencv版本为3.3,python使用的版本为 ...
- Android微信支付流程及返回码-1之坑
http://www.51testing.com/html/36/n-3724336.html 之前做微信支付的时候,直接是以库形式引入项目的,虽然一直觉得微信支付的开发文档不太理想,但是印象中也没有 ...
- es第一篇：Getting Started
es是一个近乎实时的搜索平台,这意味着从索引文档到文档可搜索,是有一点点延迟的(通常是一秒).es集群是一个或多个节点的集合,它们共同保存数据,并提供跨所有节点的联合索引和搜索功能.集群名由clust ...
- Java生成树关系的菜单
1.菜单bean public class Menu { private String id; private String menuname; private String parentid; pr ...