废话不多说,直接进入主题,margin相关技巧。

1、设置元素水平居中:margin:x auto;

2、margin负值让元素位移及边框合并。

外边距合并

  指当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决外边距合并的方法:

  a、使用这种特性。

  b、设置一边的外边距,一般设置margin-top

  c、将元素浮动或者定位(元素浮动或定位时,不会出现margin合并)

margin-top塌陷

  在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:

  a、外部盒子设置一个边框

  b、外部盒子设置overflow:hidden

  c、使用伪元素类:

  .clearfix:before{

    content:'';

    dispaly:table;

  }

盒子模型之margin相关技巧!的更多相关文章

  1. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

  2. 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  3. 盒子模型的margin负数用法

    盒子的margin用法大家都应该很清楚,在实际中一般使用margin来水平居中或者让自己移动相应的位置,但是margin给负数在实际中也是有用的. 如图为两个浮动的盒子. 给左边的盒子margin-l ...

  4. CSS中的间距设置与盒子模型

    CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...

  5. 标准盒子模型和IE盒子模型

    标准盒子模型 = margin + border + padding + content (content =  width | height) IE盒子模型 = margin + content ( ...

  6. Web前端面试指导(九):盒子模型你是怎么理解的?

    问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...

  7. IT兄弟连 HTML5教程 W3C盒子模型

    日常生活中所见的盒子也就是能装东西的一种箱子,如果家里的东西很多,那么就需要按类别装到不同的箱子中.网页中的内容表现也是一样的,如果页面内容比较多,又想让页面更整洁.更美观.有很好的用户体验,则也需要 ...

  8. 溢出处理、盒子模型、背景图片、float(浮动)

    一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出 ...

  9. 前端-----margin用法(盒子模型里补充)

    margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div ...

随机推荐

  1. DUBBO监控,设置接口调用数据的上报周期

    目录 DUBBO监控,设置接口调用数据的上报周期 dubbo已有的监控方案 针对已有方案的改进 DUBBO监控,设置接口调用数据的上报周期 dubbo是目前比较好用的,用来实现soa架构的一个工具,d ...

  2. mybatis之Sql语句构建器

    SQL类: 方法 描述 SELECT(String) SELECT(String...) 开始或插入到 SELECT子句. 可以被多次调用,参数也会添加到 SELECT子句. 参数通常使用逗号分隔的列 ...

  3. Mysql最左匹配原则实践(原创)

    mysql最左匹配原则 什么叫最左匹配原则 最左匹配原则的误区 实战 结论: 1 条件查询中条件顺序没有关系 2 在最左匹配原则中,有如下说明: 最左前缀匹配原则,非常重要的原则,mysql会一直向右 ...

  4. <VS2010>混合模式程序集是针对“v2.0”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集

    在把以前写的代码生成工具从原来的.NET3.5升级到.NET4.0时,将程序集都更新后,一运行程序在一处方法调用时报出了一个异常: 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有 ...

  5. 一步一步 Pwn RouterOS之ctf题练手

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 本文目的是以一道比较简单的 ctf 的练手,为后面的分析 Rout ...

  6. linux客户端打印报表时操作系统的配置

     报表打印是用applet方式操作的,所以客户端要有jre环境.如果客户端是windows系统的话,安装jre环境比较方便:如果客户端是linux系统的话,即使服务器端reportConfig.x ...

  7. Mouse For Winpad

    Mouse For Winpad 用WIN10的平板模式玩游戏总会到一些兼容性问题,之前在推Re:LieF的时候就遇到了触屏不能像鼠标指针一样进行游戏,于是猜想一定是程序没进行标准化MFC的编程.于是 ...

  8. 结对作业——随机生成四则运算(Core 第7组)

    结对作业 ——随机生成四则运算(core第7组) 吕佳玲 PB16060145 涂涵越 PB16060282 GITHUB地址 https://github.com/hytu99/homework_2 ...

  9. 5.FileWriter 和 BufferWriter

    FileWriter 和 BufferWriter的使用场景  IO这块,各种Writer,Reader,让人眼晕 而在网上基本找不到在什么时候用哪个类,并且网上的IO demo 很多用法都是错的 在 ...

  10. c# 线程池:开启10个线程运行Fibonacci,并在所有线程运行完后,得出结果。

    namespace CAThreadPool { class ThreadpoolDemo6 { static void Main(string[] args) { ; // One event is ...