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 ...
随机推荐
- The score of 'O' and 'X'
题目描述 注意要点: 使用strlen函数注意加头文件#inlcude <cstring> 循环宏定义for循环#define _for(i,a,b) for(int i=(a);i< ...
- [Java]去除html中的标签或者元素属性（正则表达式）
后台的数据库中某个字段是富文本框输入的 带有Html的标签 ,去掉标签后返回给前台 1.去掉Html 标签的代码 //过滤html标签 Pattern p_html = Pattern.compile ...
- six
团队序号:6组 团队名称:拯救地球小分队 团队项目的码云地址:https://gitee.com/lwj5950/seflash 此次博客撰写人姓名:刘威骏 学号:2017*****7168 团队中的 ...
- php中慎用==
var_dump(' 123fg456'==123);var_dump('some string' == 0);var_dump(123.0 == '123d456');var_dump(0 == & ...
- centeros7安装docker
一.官方安装 https://docs.docker.com/install/linux/docker-ce/centos/#upgrade-docker-after-using-the-conven ...
- 2019.4.3 HTML&CSS 理论部分
HTML 块标签 1.独占一行,不和其他标签待在一行; 2.能设置宽高 常见的块标签:h1-h6,p,div,table,hr,br,ul,ol, 行标签 1.可以和其他行标签待在一行 2.不能设置宽 ...
- springboot 头像上传 文件流保存 文件流返回浏览器查看 区分操作系统 windows 7 or linux
//我的会员中心 头像上传接口 /*windows 调试*/ @Value("${appImg.location}") private String winPathPic; /*l ...
- python any和all
摘自<流畅的Python> all 和 any 也是内置的归约函数. all(iterable) 如果 iterable 的每个元素都是真值,返回 True:all([]) 返回 True ...
- 学习java虚拟机笔记
虚拟机jvm 包括 类加载机制 ,运行时数据区域 运行时数据区域包括 ,程序计数器,虚拟机栈和本地方法栈,堆,方法区. 程序计数器是一块较小的内存控件, 用来指定当前字线程执行节码的行数 ,每个程序计 ...
- (转)CentOS分区操作详解
CentOS分区操作详解 原文:http://blog.csdn.net/yonggeit/article/details/77924393 磁盘分区 分区格式的两种选择:MBR和GPT 分区命令: ...