CSS--margin塌陷
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塌陷的更多相关文章
- css margin塌陷问题
一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...
- 林大妈的CSS知识清单(二)可见格式化模型(内含margin塌陷与浮动闭合的解决方案)
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- margin塌陷与margin合并(margin),清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- margin塌陷与BFC总结
只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...
- margin的两个有趣现象:margin合并和margin塌陷
margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...
- 12-[CSS]-margin塌陷,margin 0 auto,善用父级的padding
1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 6.margin塌陷问题
当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><ht ...
- margin塌陷和margin合并问题及解决方案
margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...
随机推荐
- 用友u8采购发票如何取消审核
流程是应付系统---应付单据审核---过滤---选择日期+已审---选择相应发票---弃审
- easyUI tree 自定义图标
文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115 近期由于项目中需要使用easyui tree树形列表,并在系统中动态配置 ...
- Windows下tomcat启动一闪而过
1.用记事本打开tomcat/bin/setclasspath.bat 2.添加两行代码,jdk和jre的根目录,相当于直接给出JAVA_HOME和JRE_HOME路径 set JRE_HOME=D: ...
- sql server 学习笔记 ( backup 备份方案 )
做个记入就好 USE [master] SELECT bs.database_name AS 'Database Name', bs.backup_start_date AS 'Backup Star ...
- Ubuntu下安装Google浏览器
和其他软件一样,比较常用的安装方法. 1.下载deb包对于谷歌Chrome32位版本,使用如下链接:wget https://dl.google.com/linux/direct/google-chr ...
- 【错误】IntelliJ IDEA使用Gradle编译报错
一.异常如下: No signature of method: org.gradle.api.internal.artifacts.ivyservice.ivyresolve.strategy.Def ...
- 正睿 2018 提高组十连测 Day2 T2 B
题目链接 http://www.zhengruioi.com/contest/84/problem/318 题解写的比较清楚,直接扒过来了. B 算法 1 直接按题意枚举,动态规划或是记忆化搜索. 时 ...
- React文档(三)介绍JSX
我们先看看这个变量声明: const element = <h1>Hello, world!</h1>; 这个有趣的标签语法既不是字符串也不是HTML. 这种写法叫做JSX,这 ...
- python 绝版线程池
2.绝版线程池设计思路:运用队列queue a.队列里面放任务 b.线程一次次去取任务,线程一空闲就去取任务 import queueimport threadingimport contextlib ...
- WDA基础六:字段,表等visiable,enable,read_only控制
今天主要讲一下布局控制:(visiable,enable,read_only) visiable:可见性,控制字段,组件,分组等是否现实在界面上.一般按条件来控制隐藏的可以在CONTEXT NODE里 ...