关于盒模型的负margin

1.     负边距对由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位,通过相对定位偏移后,其仍然会坚守着它原来占据的空间,而通过负边距移动后的元素,其原来的空间会被后来的元素占据。注意:负margin不会使元素脱离文档流。

2.     在文档流中,元素的最终边界是由margin决定的。绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离,这个元素自身的边界指的就是margin定义的边界。

3.     在知道块级元素 width 和 height 的前提下,通过使用 绝对定位 和 负边距 可以使该元素居中

4.     对于没有设置 width 的块级元素,使用负的左右边距可以增大块级元素的宽度。

5.     某个元素虽然是写在了后面,但可以通过负边距让它在浏览器显示的时候是在前面的,甚至覆盖掉前面的元素。

6.     通过设置padding和负边距,可以实现“多列等高布局”,具体查看笔记“CSS布局奇淫技巧之-多列等高”

来自:     http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

=================

当某个元素的margin左负值,超过自身的宽度时,这个元素会和上一个同级块级元素发生重叠。 这时候继续增大margin左负值,该元素会逐渐从右往左移动。这也是“圣杯布局”的原理。

时间: 2024-11-16 04:14:31

关于盒模型的负margin的相关文章

4 盒模型 padding/border/margin

css model 设计和布局时使用 包括: 外边距 ,边框,内填充和实际内容 常用属性 1 宽高 2 内边距 padding  盒子边框到内容的距离 3 外边距 margin <meta charset="utf-8"> <title>margin</title> <style type="text/css"> span{ background-color: red; } .盒子一{ margin-right: 20

你真的了解盒模型么

说到前端, 大家第一反应是不是都是vue.react.webpack等这些大大小小的框架或者工具, 但其实这些都是和js相关的, 真正的样式会被大家忽略.其实真正呈现给大家看到华丽的页面, 都是样式才让他们多了那份色彩.那么大家觉得简单的css样式, 真的简单么? 让我们一起来看下, 开启css的入坑之旅, 今天一起跟大家简单聊聊盒模型的相关问题...... 盒模型 百度知道对此的解释, 很有意思, 在此引用一下 CSS盒子模型, 内容(CONTENT)就是盒子里装的东西; 而填充(PADDIN

DAY46-前端入门-组合选择器、标签a_img_list、盒模型、伪类、盒模型布局

目录 一.组合选择器 群组选择器 子代选择器 后代选择器 相邻选择器 兄弟选择器 交集选择器 组合选择器的优先级 二.属性选择器 三.盒模型 盒模型概念 盒模型成员介绍 四.边界圆角 单角设置 整体赋值 五.常用标签 超连接标签a 图片标签img 列表标签list 六.伪类选择器 a标签的四大伪类 内容伪类 索引伪类 取反伪类 七.盒模型布局 做页面必备reset操作 盒模型布局基本介绍 display:显示方式 兄弟坑 父子坑 解决方案 一.组合选择器 群组选择器 可以将任意多个选择器分组到一

前端 盒模型布局 浮动布局

盒模型布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒模型布局</title> <style> body { margin: 0; padding: 100px 0 0 200px; } /*盒模型组成部分: */ /*margin + border + padding + content 1.每部分都有自己的独立区域 2.

关于盒模型的外边距padding和内边距margin

边框border属性值  solid实线   dashed虚线   dotted点线   double双实线 /* 内边距 */padding:20px 30px 30px 30px;若有四个值代表  上/右/下/左 padding: 10px 20px 30ox;三个值代表 上.左右.下 padding: 10px 20px;两个值代表  上下/左右 padding: 10px;一个值代表四个方向一致 /* 外边距 */ margin:20px 30px 30px 30px;若有四个值代表 

CSS盒模型之margin属性

CSS中,盒模型是一个很重要的思想概念,在处理盒模型的时候,有一些问题需要注意,特别记录在此. 首先,一个"盒子"是由内边距.外边距.边框以及内容构成的,当设置了元素的margin属性时,会影响当前元素的一些状态.例如,两个盒子在页面中, 一个在上,一个在下,同时设置了两个盒子的margin属性时,按理说两个盒子的边框距离应该是两个margin属性值的叠加,但由于CSS的设计导致事实并非如此, 这两个盒子之间的边框距离将会是两个margin属性中比较大的那一个,如果需求就是要让两个盒子

【CSS3】---盒模型margin、padding及border

盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div{ border:2px solid red; } 上面是 border 代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1.border-style(边框样式)常见样式有: dash

盒模型中padding、border、margin的区别

在CSS中,规定了一种基本设计模型--盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/边框(蓝色区域).margin/外边框(图中两绿色边框中间白色部分). 区别: element占据的就是字体本身的字号大小: padding和margin 类似,指的是一段距离,只能设置上.下.左.右方向的一段长度,不能设置区域颜色: 而border指的是一块区域,可以设置上下左右方向的长度,而且可

border,padding,margin盒模型理解

安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border,padding,margin盒模型理解</title> <style&