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样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
随机推荐
- struts1的parameter
1.配置文件 parameter="method" 2.请求路径 http://localhost:8081/purchaseDeclareAction.do?me ...
- L236
The Norwegian Authority for Investigation of Economic and Environmental Crime (Okokrim) said the mov ...
- 2019.1.7 Russia temperature control demo
1layout 2导出Gerber 做钢网 3刷锡膏 4.1调SMT程序: a摆元件,写P/N位置 b定位检测点 4.2手贴元件 手别抖! 5过炉 温度270 6插件PCBA 做载板最方便,手插焊接也 ...
- 设置 placeholder 字体颜色 : ::
::-webkit-input-placeholder { color: red;} :-moz-placeholder { color: red;}::-moz-placeholder{colo ...
- c# 进程调用exe
using System; using System.Collections.Generic; using System.ComponentModel; using System.Diagnostic ...
- 在本地设置 http-proxy 代理 (前后端分离)
1. 利用package.json 安装nodejs,创建package.json文件:内容如下 "dependencies": { "http-proxy": ...
- SWIFT中正则表达式验证邮箱
在playground内写入以下代码,正则关键字跟其它语言的没什么区别 class Regex { let internalExpression:NSRegularExpression let pat ...
- Pycharm出现的部分快捷键无效问题及解决办法
为了进行python开发,下载了Pycharm.但是发现启动后,执行ctrl+c和ctrl+v等快捷键都无法生效. 网上搜索了下,参考https://blog.csdn.net/c2366994582 ...
- Mat类型at问题-opencv-bug调试
前言 调试程序的过程中,opencv创建矩阵之后对其赋值出现错误: Mat m = Mat::zeros(1, featureLen, CV_32FC1); Mat data = Mat::zeros ...
- python 正则表达式 提取网页中标签的中文
转载请注明出处 http://www.cnblogs.com/pengwang52/. >>> p= re.compile(r'\<div class="commen ...