margin塌陷

解决方法：

1、给父级顶加上一条线，不太合适。

2、bfc

block format context

设定bfc后，特定的盒子会遵循另一套语法规则，解决了margin塌陷

触发bfc元素

1）position:absolute;

2）display:inline-block;

3）float:left/right;

4）overflow:hidden; //溢出和隐藏

CSS--margin塌陷的更多相关文章

  1. css margin塌陷问题

    一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...

  2. 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）

    盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...

  3. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  4. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  5. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  6. margin塌陷与BFC总结

    只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...

  7. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  8. 12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding

    1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. 6.margin塌陷问题

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

  10. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

随机推荐

  1. nRF52832定时器

    1概述 定时器能够被配置为两种模式:定时模式和计数模式,nrf52832有五个定时器,timer0--timer4 . 2常用得函数 函数功能:初始化定时器 ret_code_t nrf_drv_ti ...

  2. Eclipse Jee环境配置

    最近下载了新的Eclipse Jee Neon版本,记录一下如何进行开发环境的配置. 1.下载必要的开发环境文件 ①下载Java SE Development Kit (简称JDK) ②下载Tomca ...

  3. Codeforces 1025 D - Recovering BST

    D - Recovering BST 思路:区间dp dp[l][r][0]表示l到r之间的数字可以构成一个二叉搜索树,并且以r+1为根节点 dp[l][r][0]表示l到r之间的数字可以构成一个二叉 ...

  4. L1 正则为什么会使参数偏向稀疏

    2018-12-09 22:18:43 假设费用函数 L 与某个参数 x 的关系如图所示: 则最优的 x 在绿点处,x 非零. 现在施加 L2 regularization,新的费用函数()如图中蓝线 ...

  5. 如何启动iis（Internet 信息服务(IIS)管理器）

    Internet 信息服务(IIS)管理器 启动 IIS 管理器1.从“开始”菜单,指向“管理工具”,然后单击“Internet 信息服务 (IIS) 管理器”. 从“运行”对话框启动 IIS 管理器 ...

  6. @Builder与@NoArgsConstructor | Lombok

    一.@Builder与@NoArgsConstructor一起使用存在的问题   @Data @Builder @NoArgsConstructor public class User { priva ...

  7. Kali安装nessus

    下载 在官方网站下载对应的 Nessus 版本:http://www.tenable.com/products/nessus/select-your-operating-system 这里选择 Kal ...

  8. pre打印

    echo "<pre>";print_r(var);echo "</pre>";

  9. day 7 -10 集合，文本、文件操作，函数

    day7 一.回顾 1.列表和字典在循环里边尽量不要删除元素,很麻烦 2.元组:如果元组里边只有一个逗号,且不加逗号,次元素是什么类型,就是什么类型. 二.集合 ''' 集合:可变的数据类型,它里边的 ...

  10. 第二阶段——个人工作总结DAY09

    1.昨天做了什么:昨天学习了有关后台的知识. 2.今天打算做什么:实现后台. 3.遇到的困难:还是不知道该如何来做.