float元素上-margin的用法
css标准,float元素上的负margin表示把下面的元素向对应方向移动,并且覆盖上一个元素(这里是指html中元素的声明顺序)。
标准情况下我们用float 时候是这样的。
-margin通俗点说,就是将盒子的大小减小,但是不影响显示。
当给一个盒子宽度为200px添加一个margin-left:-200px的时候,其实整个盒子的宽度已经是 0
这就是为什么说-margin其实不脱离文档流。。因为改变的只是他在文档中的实际宽度。
上面的例子当中,要怎样使红色盒子在右边,黄色盒子在左边显示?
因为绿色盒子宽度已经是100%了,已经没有位置可以放的下去,这时候,我们就要用到-margin。将盒子的实际宽度减为0;
首先 给红黄两个盒子添加-margin 数值等于盒子宽度。看显示
现在显示成这样,上面已经说过了。盒子的实际宽度其实已经是0了。所以盒子可以摆放的进来。
这样就很好办了。。现在让红色盒子在左边显示。我们只要给盒子设置position: relative;然后left:200px;那么红色盒子相对原先的位置移动200就填充了左边的空白
黄色盒子怎么才能在右边显示呢,这里我们就是用不了position: relative;然后定right了。。因为绿色盒子的宽度我们不知道。
所以这里可以设置margin-left:-100%; 那么显示的位置就是100% - 100的位置。。
修改后
然后在设置position: relative;left:-100px;
ps:如果设置红色盒子margin-rigth会是什么情况。。。
那样就更方便了,不用设置position: relative;
当全部设置margin-right 负值
其实只要理解一点,margin-left:从左边剪掉宽度。居左显示。
margin-right从右边剪掉宽度。居右显示。
float元素上-margin的用法的更多相关文章
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- IE中float元素如果同时设置了margin值,此时margin的值会变为双倍的解决方法
IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.
- 好程序员分享居中一个float元素
好程序员分享居中一个float元素,我们布局的时候,用margin来设置float元素的外边距来达到效果.对于,在文档流中的元素,我们很容易让它水平居中,只要给元素设置一个固定的宽度,用margin: ...
- margin的用法
margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div ...
- 为什么margin-top不是作用于父元素【margin外边距合并问题】
coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上
canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...
随机推荐
- springboot引入Oracle依赖
最近学习spring boot,在网上找一些项目学习,有的项目引入了oracle驱动包,自己搭建一直不成功,百度发现说是权限问题无法下载. 然后参考下面博客终于解决:springboot引入Oracl ...
- Codeforces 1204D2. Kirk and a Binary String (hard version) (dp思路)
题目链接:http://codeforces.com/contest/1204/problem/D2 题目是给定一个01字符串,让你尽可能多地改变1变为0,但是要保证新的字符串,对任意的L,R使得Sl ...
- C语言程序设计100例之(27):回旋方阵
例27 回旋方阵 问题描述 编写程序,生成从内到外是连续的自然数排列的回旋方阵.例如,当n=3和n=4时的回旋方阵如下图1所示. 图1 由内到外回旋方阵 输入格式 一个正整数n(1≤n ...
- 题解【Codeforces1186A】 Vus the Cossack and a Contest
这题是入门难度的题目吧-- 根据题意可以得出,只有当\(m\)和\(k\)都大于等于\(n\)时,\(Vus\)才可以实现他的计划. 因此,我们不难得出以下\(AC\)代码: #include < ...
- mybatis--多对一关联
(1)首先,创建数据库mybatismanytoone并插入数据 create database mybatismanytoone; use mybatismanytoone; create tabl ...
- Ansible - 配置文件
概述 再水一发 ref Ansible Configuration Settings 1. 查看 概述 查看 配置文件 的默认位置 命令 > ansible --version 结果 confi ...
- IDE - IDEA - tab - 方法相关的移动
1. 概述 标题可能会改 一个 tab 里方法相关的操作 2. 前提 以默认的模式编辑 tab 对我来说, 就关掉 vim 插件 3. 操作 1. 查看文件结构 概述 唤出当前文件的 结构 唤出后可以 ...
- 多表更新:update,join
1.多表更新: 下面我建两个表,并执行一系列sql语句,仔细观察sql执行后表中数据的变化,很容易就能理解多表联合更新的用法. 前期准备工作: update join_teacher_class jo ...
- java中Integer面试的坑
class Test{ public static void main(String[] args){ //当值在[-128,127]中,不创建新的Integer Integer f1 = 100,f ...
- eclipse链接mySQL数据库常见错误
1错误: 解决: 2,用户名输入错误 解决:查看自己的正确用户名https://zhidao.baidu.com/question/248308313.html 3. 解决: 链接示例:https:/ ...