废话不多说,直接进入主题,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. sql中全文检索CHARINDEX 和PATINDEX 区别

    最近经常使用字符串查找功能. 包括 1.全匹配查找字符串 2.模糊查找字符串 CHARINDEX 和 PATINDEX 函数都返回指定模式的开始位置.PATINDEX 可使用通配符,而 CHARIND ...

  2. C# 数组中的 indexOf 方法

    var array=['REG','2018','2018']; array.indexOf(‘REG’) // 0 array.indexOf(‘R’) // -1 array.indexOf(’2 ...

  3. iOS系统库头文件中NS_AVAILABLE相关

    转载: NS_AVAILABLE_IOS(5_0) 这个方法可以在iOS5.0及以后的版本中使用,如果在比5.0更老的版本中调用这个方法,就会引起崩溃. NS_DEPRECATED_IOS(2_0, ...

  4. MyBatis源码解析之日志记录

    一 .概述 MyBatis没有提供日志的实现类,需要接入第三方的日志组件,但第三方日志组件都有各自的Log级别,且各不相同,但MyBatis统一提供了trace.debug.warn.error四个级 ...

  5. CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  6. 使用HttpGet协议与正则表达实现桌面版的糗事百科

    写在前面 最近在重温asp.net,找了一本相关的书籍.本书在第一章就讲了,在不使用浏览器的情况下生成一个web请求,获取服务器返回的内容.于是在网上搜索关于Http请求相关的资料,发现了很多资料都是 ...

  7. Django基础四之模板系统

    一 语法   模板渲染的官方文档 关于模板渲染你只需要记两种特殊符号(语法): {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二 变量 在Django的模板语言中按此语法使 ...

  8. 【转发】【小程序】微信小程序日常开发中常遇到的错误代码

    还在为看不懂小程序错误状态码纠结吗?这里推荐一篇文章 重要的事情说三遍:原文链接  https://www.cnblogs.com/webonline/p/7528778.html 作者:玩世不恭. ...

  9. SESSION机制(转)

    转自:http://www.cnblogs.com/zyf-zhaoyafei/p/4477175.html 一:Session与Cookie Session:在服务器端创建并存放在服务器的内存中的, ...

  10. JS 时间转化为几分钟前 几小时前 几天前

    背景:最近公司要做动态列表,类似于微信朋友圈.动态创建时间就需要显示为 刚刚.几分钟前.几小时前.几天前.2018-05-15,这样的形式. 代码如下 var minute = 1000 * 60; ...