margin 塌陷现象 与 注意事项
1、在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象。

但是,脱标之后就不会出现margin的塌陷现象。

2、margin:0 auto; 会让盒子水平居中,但是他有他的使用注意事项:
标准流的盒子而且有宽度的盒子才能用margin:0 auto;让其居中;文本居中要使用text-align:center;。
margin 塌陷现象 与 注意事项的更多相关文章
- margin塌陷现象
如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...
- margin塌陷现象(即在内层设置margin-top无效的解决办法)
有两个有嵌套关系的div,如果外层div的父元素的padding值为0,那么内层子div的margin-top或margin-bottom的值会转移给外层的父div,即magrin塌陷现象. 解决办法 ...
- "margin塌陷现象"div盒子嵌套盒子外边距合并现象
问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...
- margin的两个有趣现象:margin合并和margin塌陷
margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- css中常见margin塌陷问题之解决办法
塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <d ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- margin塌陷
我工作基本上就是写业务逻辑,不怎么写页面就一直觉得页面布局特高深.有天我同事问我,知道margin塌陷是什么东西不,我说我不知道(反正我也不用,管他呢),他说面试的时候问的(...那这必须得去看啊). ...
- 12-[CSS]-margin塌陷,margin 0 auto,善用父级的padding
1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
随机推荐
- Unity3d 物体沿着正七边形轨迹移动
不对之处,敬请谅解. 1.圆内接正七边形半径 public static float r = 10; 2.存储七个顶点的值 Vector3[] ar = new Vector3[7]; 3.圆心角 s ...
- C语言 - pthread
pthread_create函数 原型:int pthread_create((pthread_t *thread, pthread_attr_t *attr, void *(*start ...
- java解析XML获取城市代码
运行前先导入dom4j架包,由于我们公司用的代理服务器所以下面我设置了代理ip,不需要的可直接忽略 package com.chengshidaima.tools; import java.io.Bu ...
- UVALive 2678 大于s的最短子序列和
input n s 10<=n<=100000,s<1e9 a1 a2 ... an ai<=10000 output 大于s的最短子序列和的长度,没有输出0 #includ ...
- php 10.2总
注意事项 获取表单信息 <?php if($_POST["submit"]=="登录"){ echo "您输入的用户名为:".$_PO ...
- 从市场运营角度谈Uber中国的第一批用户是怎么来的
声明:这篇文章是从http://www.010lm.com/redian/2016/0312/1206875.html转来的,分享给大家. 1)首先告诉用户Uber是做什么的?即培养用户品牌意识. 我 ...
- 为Android系统内置C可执行程序测试Linux内核驱动程序
在前一篇文章中,我们介绍了如何在Ubuntu上为Android系统编写Linux内核驱动程序.在这个名为hello的Linux内核驱动程序中, 创建三个不同的文件节点来供用户空间访问,分别是传统的设备 ...
- const与static的区别
const就是只读的意思,只在声明中使用;const修饰的数据类型是指常类型,常类型的变量或对象的值是不能被更新的. const的作用: (1)可以定义const常量,具有不可变性. (2)便于进行类 ...
- AngularJS 从零开始学习(一)
什么是AngularJS? AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架.当模型改变时,页面也能自动随之更新,反之亦然.当某个域的内容发生变化时,与之关联的 ...
- Linux学习 -- Shell编程 -- 正则表达式
正则表达式与通配符 正则 -- 匹配字符串 -- 包含匹配 grep.awk.sed等 通配符 -- 匹配文件名 -- 完全匹配 ls.find.cp等 基础正则表达式