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 ...
随机推荐
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- 2016级算法第五次上机-E.AlvinZH的学霸养成记IV
1039 AlvinZH的学霸养成记IV 思路 难题,最大二分图匹配. 难点在于如何转化问题,n对n,一个只能攻击一个,判断是否存在一种攻击方案我方不死团灭对方.可以想到把所有随从看作点,对于可攻击的 ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- py文件打包成exe程序
C:\Users\Administrator\AppData\Local\Programs\Python\Python37\Scripts https://blog.csdn.net/lqzdream ...
- 线性代数与simplex
线性方程组: \(i:1-n\) \(j:1-m\) \({\begin{cases}a_{11}x_1+a_{12}x_2+a_{13}x_3+\cdots+a_{1n}x_n=b_1\\a_{21 ...
- springboot 接口返回数据时 net.sf.json.JSONNull["empty"]) 异常
@ResetController返回数据时出现异常 Could not write JSON: Object is null; nested exception is com.fasterxml.ja ...
- for、while、do while 3种循环异同点
for (; ; ){ 循环体} while(循环条件){ 循环体} do{ 循环体}while(循环条件); 执行顺序不同: for循环和while循环:先判断条件为true时,然后再执行 do w ...
- linux下非root用户获得/dev/ttyUSB0的读写权限
首先查看/dev/ttyUSB0的权限属性,在终端输入: ll /dev/ttyUSB0 teashaw@xiaopeiqing.com:~$ ll /dev/ttyUSB0 crw-rw—- 1 r ...
- ztree树样式的设计
ztree的功能虽然很是强大,但是唯一有一点就是样式有点普通,所以如果我们需要修改样式,那么就只能进行样式重新覆盖了 样式代码,这些都是根据实际样式进行覆盖 /** * tree的选中样式 */ .c ...
- bootstrap table 以及xEdittable的应用
以前一直没有用过 bootstrap 表格框架,因为项目css框架用的是bootstrap,为考虑到统一性的原因,所以选用了这个框架 步骤: 第一步:引用 <link href=" ...