position和margin的绝对定位和相对定位
电脑桌面清理干净之后,果然快了很多,桌面上的东西会占用内存,导致电脑变慢,以前我看到表姐的电脑桌面堆满了东西,我就在心里默默的鄙视不懂玩电脑的人,现在我竟然也养成了这种坏毛病。。保存东西的时候放在桌面确实很方便快捷。
开场白是题外话,不知道标题拟得准不准确,前天工作中遇到一个问题,就是两个div共用一条线,而且中间这条线要随着左右两边的div变长或变短,这个问题让我束手无策,如下图:

后来领导教我解决了这个问题,代码如下:
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
.box { width:800px; padding:20px;}
.box1 { float:left; width:200px; height:200px;border:1px solid #666; position:relative;}
.box2 { float:left; width:300px;height:300px;border:1px solid #666;margin-left:-1px;}
注意看后面红色css的部分,position:relative;和margin-left:-1px;同时使用,这让我有点晕,以前没碰到过。后来领导发了一篇文章让我看,我觉得写得不错,转载过来学习学习。
那篇转载的文章现在我看有些地方还是有点晕,概念有点模糊,我希望两个月之后我再回来看那篇文章,仰天长笑三声:啊哈哈!原来这么简单啊!!
position和margin的绝对定位和相对定位的更多相关文章
- position属性中的绝对定位和相对定位
absolute(绝对定位):1.如果没有父级DIV,则会根据浏览器原始点去定位,而且跟他相邻的DIV会忽略它,定位后则可用TRBL(top,right,bottom,left)去布局.注意:TRBL ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- css绝对定位、相对定位和文档流的那些事
前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
- 【CSS】绝对定位和相对定位
html:定位层 特点: >>完全脱离默认文档流,独立于立体层面的Z轴之上. >>和float浮动一样都脱离了默认文档流,但float元素与默认文档流之间会相互产生影响,而定位 ...
- [Web 前端] 019 css 定位之绝对定位与相对定位
1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...
- 关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)
关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录) 作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position ...
- Javascript 绝对定位和相对定位
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- css中绝对定位和相对定位的区别
先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...
- css中绝对定位和相对定位详解
相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
随机推荐
- select * from v$reserved_words
select * from v$reserved_words 查询库中所有关键字
- php 无限极分类问题
- 动态更新 HTML 内容 —— AJAX
通过 JavaScript 加载数据,在不刷新网页的情况下,更新网页内容的技术,称为 AJAX(Asynchronous JavaScript and XML,异步 JavaScript 和 XML) ...
- C++ 写的地图控件,支持google 百度 在线离线地图
C++处理google 百度地图在网上查阅了很多都是通过浏览器方式显示地图信息, 跟我目前项目很不符合, 所以仔细研究了一下C++方式显示地图.通过地图投影以及墨卡托投影,在通过平面地图计算经纬度. ...
- Magento如何设置产品的打折或者优惠价格
促销是商家的必备武器,手段可以说是花样繁多.其中最有效最具吸引力的就是优惠券了.那么在Magento中如何添加优惠券呢? 修改位置:后台--促销--购物车价格规则 1.点击右上角的 添加新规则 按钮. ...
- 如何在magento添加推荐分类
Magento Featured Category推荐分类模块安装 1.下载Magento Featured Categories Extension,下载地址:http://www.storefro ...
- 使用struts框架后的404错误
访问jsp界面后出现404错误,我开始以为是因为struts没有配置好,在网上找了很多解决方法, 试了一遍,无效, 最后在参考书上看到“struts2推荐把所有的视图界面存放在WEB-INF目录下,这 ...
- PHPEmailer使用简介(以qq邮箱为例)
1.从网上下载PHPEmailer: 2.确保PHP环境支持sockets扩展,还要开启openssl,如下图: 3.配置QQ邮箱 1.开启SMTP服务 2.验证密保 3.获取授权码(这个就是IMAP ...
- css里涉及到定位相关的example实例
一,情景导入:正常文档流:指的是HTML文档在进行内容布局时所遵循的从左到右,从上到下的表现方式.HTML中的大多数元素都处在正常的文档流中,而一个元素要脱离正常流的唯一途径就是浮动或定位.二,定位的 ...
- 字符串的比较【string和字符数组】
无论是string 还是 字符数组的字符串比较函数,返回的都是字典序的大小.如 1234 和 5 比较时就是1234的字典序小于5,要想比较字符串表示的数字的大小,需要自己写函数比较