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样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
随机推荐
- MyEclipse移动开发教程:设置所需配置的iOS应用(三)
MyEclipse个人授权 折扣低至冰点!立即开抢>> [MyEclipse最新版下载] 三.创建配置文件 Provisioning profiles授权文件应用程序在iOS设备上安装并运 ...
- MySQL Performance Tuning: Tips, Scripts and Tools
With MySQL, common configuration mistakes can cause serious performance problems. In fact, if you mi ...
- SWIFT Function
Swift中的函数跟JAVA语言的函数差不多,但也有差别,SWIFT中定义函数可以指定参数的名称这也是别的语言没有的,好处就是增加了可读性.其返回值是放在未尾的,如以下定义一个加法器: func ad ...
- CUDA Samples: 获取设备属性信息
通过调用CUDA的cudaGetDeviceProperties函数可以获得指定设备的相关信息,此函数会根据GPU显卡和CUDA版本的不同得到的结果也有所差异,下面code列出了经常用到的设备信息: ...
- 简单shell实现局域网IP扫描
#!/bin/bash network=$1 time=$(date +%H%M%S) for i in $(seq $2 $3) do ping -c 1 -w 2 $network.$i > ...
- 4.1 shell文本过滤、find、awk、grep
文本过滤涉及到以下知识: 正则表达式.find.grep.awk.sed.合并与分割(sort.uniq.join.cut.paste.split). 正则表达式: 基本元字符集及其含义: 匹配IP地 ...
- QT 5.4.1 for Android Ubuntu QtWebView Demo
QT 5.4.1 for Android Ubuntu QtWebView Demo 2015-5-15 目录 一.说明: 二.参考文章: 三.QtWebView Demo在哪里? 四.Qt Crea ...
- t添加最佳视口
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 一致性哈希算法(Consistent Hashing Algorithm)
一致性哈希算法(Consistent Hashing Algorithm) 浅谈一致性Hash原理及应用 在讲一致性Hash之前我们先来讨论一个问题. 问题:现在有亿级用户,每日产生千万级订单,如 ...
- LG2731 骑马修栅栏 Riding the Fences
题意 John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个栅栏.你必须编一个程序,读入栅栏网络的描述,并计算出一条修栅栏的路径,使每个栅栏都恰好被经过一次.John能从任何一个顶点( ...