盒子模型margin塌陷

盒子模型

margin 外边距

padding 内边距

盒子布局的稳定性:

优先使用width>padding>margin

1、上下盒子的margin塌陷

上下盒子发生margin塌陷 margin小的盒子塌陷在大的盒子,不是简单叠加。浮动后,左右margin也不会发生塌陷,如想测试,把注释代码取消注释即可。

塌陷效果图:

        .box1{
            /*float: left;*/
            width: 200px;
            height: 200px;
            background: yellowgreen;
            /*margin: 60px 50px;*/
            margin-bottom: 100px;
            /*margin-right: 50px;*/
        }
        .box2{
            /* float: left;*/
            width: 200px;
            height: 200px;
            background: skyblue;
            /* margin-left: -50px; */
            margin: 150px;
        }
2、父子盒子的margin塌陷

父子盒子发生margin塌陷 margin小的盒子塌陷在大的盒子。如下例:父盒子margin-top:100px,儿子margin-top:60px,margin塌陷,只有100px

塌陷效果图:

        .box1{  /*父盒子*/
            /*float: left;*/
            width: 200px;
            height: 140px;
            /* padding-top: 60px;  */
            background: yellowgreen;
            /*border: 1px solid red;*/
            margin-top: 100px;
        }
        .box2{
            /*float: left;*/
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-top: 60px;
        }

原文地址:https://www.cnblogs.com/growingrick/p/12141631.html

时间: 2024-10-30 01:08:12

盒子模型margin塌陷的相关文章

css笔记16:盒子模型的入门案例

1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

css的两种盒子模型

css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其他部分:IE盒子模型的content部分包含border.padding部分. 举例说明:一个盒子模型margin为10px,border为2px,padding为5px,content为100px,高为50px. 1.W3C标准盒子模型 盒子需要占据的位置:宽10*2+2*2+5*2+100=13

css盒子模型,定位,浮动

1.盒子模型 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. Content(内容) - 盒子的内容,显示文本和图像. 最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 2.定位 Static 定位

盒子模型中的margin属性

记: 1.如果margin只有一个值,表示上右下左的margin同为这个值.例如:margin:10px; 就等于 margin:10px 10px 10px 10px; 2.如果 margin 只有两个值,第一个值表示上下margin值,第二个值为左右margin的值.例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px; 3.如果margin有三个值,第一个值表示上margin值,第二个值表示左右margin的值,第三个值表示下margin的

css盒子模型、边框border、外边距margin、填充padding、轮廓outline

盒子模型 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清除边框外的区域,外边距是透明的. Border(边框):围绕在内边距和外边距的边框. Padding(内边距):清除内容周围的区域,内边距是透明的. Content(内容):盒子的内容,显示文本和图像. 例如下面一个例子 <!DOCTYPE html> <html> ······ <style> div { background-color: lightgrey; width: 300px;

CSS盒子模型中外边距(margin)折叠详解

最近写项目过程中遇到一个CSS盒子模型中外边距(margin)折叠的情况,搞得我焦头烂额,之后再网上查阅了大量的资料,现做一个整理和总结,方便以后忘记的时候查阅,同时也供广大网友参考.如有错误或者总结方面不全的地方,欢饮广大网友指出. 外边距折叠的概念:所谓外边距折叠就是相邻的两个或多个元素(含有子元素的情况)的外边距会在垂直方向上合并成一个一个外边距. CSS盒子模型中外边距(margin)折叠的常见情形有如下2种: 情况1.无子元素的相邻兄弟元素 触发margin折叠的条件:两个元素之间没有

margin塌陷现象

如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style>/*margin塌陷*/ .box1 { wi

CSS 设计彻底研究(三)深入理解盒子模型

第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“标准流”的概念. 3.1 盒子的内部结构 padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法.这些矩形对象被统称为”盒子“,英文为”Box“. 模型 就是对某种事物的本质特性的抽象. 在CSS中,一个独立的盒子模型由content(内容).border(边框).

1.深入理解盒子模型

盒子模型 1.盒子模型的组成:margin border padding content: 2.border: 在属性值的设置中,如果给出2个属性值,前者表示上下边框的属性,后者表示左右边框的属性:如果给出3个属性值,前者表示上边框,中间表示左右边框,后者表示下边框:如果给出4个属性值,按照上,右,下,左的顺序.设置背景的时候,浏览器覆盖的区域是content,padding,border. 2.margin: 1)需要记录的是水平的margin是相加,垂直方向的margin会造成塌陷,采用较大