当块级元素（block）的上外边距(margin-top)和下外边距(margin-bottom)同时都有设定时只会只会保留最大边距，这种行为称为边界折叠（margin collapsing），有时也翻译为外边距重叠。、 设定float和position=absolute（包括固定定位fixed，但是relative不可以）的元素不会产生外边距重叠行为（也就是父
margin-top塌陷问题 一、问题描述 在两个及以上的盒子嵌套时候，内部的盒子设置的 margin-top 的效果会加到最外边的盒子上，导致内部的盒子margin-top设置失败。 示例描述： 设计一个box1盒子，内部嵌套一个box2盒子，box2内再嵌套一个盒子box3 即 box1>box2>box3 通过 box3 的 mar
1. 塌陷现象(子元素设置margin-top, 父元素会塌陷) 下面例子，此时子元素其实和父元素的距离是0，离父元素的兄弟节点才是100px 触发父元素的bfc, overflow: hidden, border : 解决方案1：父元素设置透明的 border: 1px solid transparent; box-sizing: border-box
高度塌陷的产生条件：父元素没有设置高度，所有的子元素都浮动 父元素在文档流中高度默认是被子元素撑开的, 1 <!DOCTYPE html> 2 <html 3 <head> 4 <meta charset="utf-8"> 5 <title>解决高度塌陷</title> 6 <style type="text/css">
通过第二周的逆战班的学习，总结了解决高度塌陷的几种办法。 高度塌陷是由于第一级子元素浮动造成父元素高度自适应，从而形成高度塌陷。 像这样： <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 600px; height: auto;
问题的产生 文档流中父元素高度默认由子元素撑开 代码： <div class="box"> <div class="div"></div> </div> box{ width:300px; margin:0 auto; border:10px solid #000; } .div{ width:200px; height:200px; background:red; } 效果： 为子元素添加浮
CSS浮动之高度塌陷 ** “浮动”二字，顾名思义，就是让一个元素飘着、浮着，使之脱离文档流；它的作用就是让竖着排的元素横向排列。** 实例：用两个div标签 浮动之前 浮动之后 浮动的属性值：左浮动：float:left; 右浮动：float:right;
Float是我们在页面布局中常用的，也是非常重要的一个属性，可以让页面布局变得更加灵活。 但是在继续学习之后，尤其是掌握了宽高自适应之后，我们常常会发现一个奇怪的现象：如果父元素没有设置高度，而子元素都浮动了的话，父元素就“瘪”了。就像下面这样 <html> <head> <meta chars
盒子模型 margin 外边距 padding 内边距 盒子布局的稳定性： 优先使用width>padding>margin 1、上下盒子的margin塌陷 上下盒子发生margin塌陷 margin小的盒子塌陷在大的盒子，不是简单叠加。浮动后，左右margin也不会发生塌陷，如想测试，把注释代码取消注释即可。 塌陷效果图： .b
1、元素浮动导致高度塌陷问题： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red solid; }
1.原因: float元素脱离了文档流，但是依旧占据它本身的大小的空间； 2.解决办法： （1）给父元素写个固定高度： 治标不治本，当子元素过多，父元素宽度不够，子元素换行显示，超过父元素本身宽度的时候，又会塌陷； （2）clear属性：给设置了float子元素的兄弟元素设置clear属性； （3）overflow+zoom：给父元素设置o
标准文档流，又叫普通流，文档流 是什么： 文档流就是html页面 文档流的布局方式：从左到右，从上到下 特点： 拥有块元素，行内元素， margin垂直塌陷，不能移动 文字空白出现折叠现象 文本类的元素会并排 高低不齐 底边对齐 文字排到最右侧，自动换行 html文档中的元素可以分为
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。 解决方案： 可以为父元素定义1像素的上边框或上内边距。 border: 1px solid red; padding: 1px
一：什么是margin塌陷 在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者paddingmargin直接接触，就产生了合并表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象 二：margin塌陷
数据来源：https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局：· wrap 弹性布局，分 head、main；· head 弹性布局，分 h2、i ；问题：head 高度塌陷。高 32px，变成：24.03px（PS里：chrome是23px，IE是24px）。 <!DOCTYPE html> <html lang="en"> <head> &l
