三个div上中下布局如何让两个div上下排列( 二 )

box-sizing: content-box; // W3C盒模型标准box-sizing: border-box; // IE盒模型标准盒子一些相关宽度clientWidth = width+左右paddingoffsetWidth = width + 左右padding + 左右boderscrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）边界塌陷CSS 中存在一个 margin collapse ，即边界塌陷或者说边界重叠。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
并排 DIV 边界塌陷（兄弟）对于上下两个并排的 DIV 块而言，上面 DIV 的 margin-bottom 和下面 DIV 的 margin-top 会塌陷，会取上下两者 margin 里最大值作为显示值，只设置单个margin 。
包含元素盒子塌陷（父子）父级div中没有border ， padding ， inlinecontent ，子级div的margin会一直向上找，直到找到某个标签包括border ， padding ， inline content(文本)中的其中一个，然后按此div 进行margin 。
解决方法为父盒子设置border ，为外层添加border后父子盒子就不是真正意义上的贴合（可以设置成透明：border: 1px solid transparent）为父盒子添加overflow: hidden;为父盒子设定padding值；为父盒子添加position：fixed；负值作用负 marign实现元素的水平垂直居中负 marign隐藏列表 li 首尾多余的边框负 text-indent 实现文字的隐藏负的 z-index 参与层叠上下文排序定位中的left、right、top、bottomposition 定位static(普通流定位)默认定位
relative(相对定位)相对本元素的左上角进行定位（相对于自身位置进行定位），本元素需要设置position为relative ， top、left、bottom、right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。absolute(绝对定位)相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。fixed(固定定位)类似于absolute定位，但是是相对于浏览器窗口进行定位
inherit继承父级元素position属性值
sticky （额外补充）粘性的-集合了flex和relative,参考杀了个回马枪，还是说说position:sticky吧
float浮动有两个取值：left(左浮动)和right(右浮动) 。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。优点最初的优点就是在图文混排的时候可以很好的使文字周围在图片周围。另外当元素浮动了起来之后，它具有块级元素的一些性质例如可以设置宽高等，但它与inline- block还是有一些区别的，第一个就是关于横向排序的时候， float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题。
缺点最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷为0(盒子塌陷) 。▲ 注意：设置元素浮动后，该元素的display值会变为block
清除浮动（*）盒子大小写死，给每个盒子设定固定的width和height ，直到合适为止，非自适应父级元素设置高度父级元素触发BFC（Float ， Overflow: Hidden | Visible ， Display: Flex | Grid）<div class="parent" style="overflow:hidden"><div class="f"></div></div>添加额外标签<div class="parent">//添加额外标签并且添加clear属性<div class="f"></div></div><div style="clear:both"></div>建立伪类选择器清除浮动（推荐）//添加:after伪元素.parent:after{content: ''; /* 设置添加子元素的内容是空 */display: block; /* 设置添加子元素为块级元素 */height: 0; /* 设置添加的子元素的高度0 */visibility: hidden; /* 设置添加子元素看不见 */clear: both; /* 设置clear：both */}<div class="parent"><div class="f"></div></div>display 布局值描述none元素会被隐藏，不显示inline元素会被设置为内联元素，内部按行从左向右排列（元素前后没有换行符）block元素会被设置为块级元素，内部按列从上到下排列（元素前后带有换行符）inline-block元素会被设置为行内块级元素，不会独占一行的块级元素list-item元素会作为列表显示table元素会作为块级表格来显示（类似table），表格前后带有换行符flex元素会进入flex布局模式

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

三个div上中下布局 如何让两个div上下排列( 二 )

三个div上中下布局如何让两个div上下排列( 二 )