CSS盒子模型:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。这两种盒子模型都包含有内容(content)、填充(padding)、边框(border)、边界(margin)这四个组成部分,这四个部分都包含有top/right/bottom/left四个组成部分。
那这两个盒子模型有什么不同的地方呢?我们先来看看以下两张图:
从图中我们可以看出,这两种盒子模型最主要的区别就是width的包含范围,在标准的盒子模型中,width指content部分的宽度,在IE盒子模型中,width表示content+padding+border这三个部分的宽度,故这使得在计算整个盒子的宽度时存在着差异:
标准盒子模型的盒子宽度:左右margin+左右border+左右padding+width
IE盒子模型的盒子宽度:左右margin+width
在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,
box-sizing:border-box表示IE盒子模型。默认的情况下是标准盒子模型,仔细观察一下两张图就可以看出他们之间的区别了:
(1) 第一张是标准的盒子模型:
(2) 第二张是IE盒子模型:
说完了这两种盒子模型,接下来就说一下盒子模型的margin属性吧:
(1)margin可以实现一侧定宽的布局:
加上margin之后:就可以实现一侧定宽布局了
(2)margin可以改变元素占据的尺寸:
(1) block/inline-block水平元素都适用
(2) 与是否设置width/height值没有关系
(3) 适用于水平和垂直方向上
由上图可以看出,当改变margin的值的时候,容器所占据的尺寸也将发生变化。
(3)margin与百分比单位之间的关系(普通元素的百分比以及绝对定位的百分比之间的关系):
(1)普通元素的margin的百分比是相对于容器的宽度来计算的。
(2) 绝对定位的百分比margin的值是相对于第一个定位(relative/absolute/fixed)祖先元素的宽度来决定的。
(4)margin的重叠性:
(1) margin重叠只发生在block的水平元素上。(不包括float/absolute元素)
(2) margin重叠垂直方向上,margin-bottom/margin-top方向上。不考虑书写格式。
发生margin重叠的三种情景:
(1) 相邻的兄弟元素
(2) 父级元素和第一个或最后一个子元素
(3) 空的block元素
A、相邻的兄弟元素之间发生重叠
B、父级元素与第一个或最后一个子元素
以上三种情况的结果都是
父级元素和子元素发生margin重叠的条件:
(1) margin-top重叠:
a. 父级元素是非块状格式化上下文元素
b. 父级元素没有border-top的属性
c. 父级元素没有padding-top的属性
d. 父级元素和第一个子元素之间没有inline的内联元素
(2) margin-bottom重叠:
a. 父级元素是非块状格式化上下文元素
b. 父级元素没有border-top的属性
c. 父级元素没有padding-top的属性
d. 父级元素和第一个子元素之间没有inline的内联元素
e. 父元素没有height,min-height,max-height的限制
如何防止父级元素和自己元素发生margin重叠:
(1) 防止margin-top重叠:
a. 在父级元素中加上overflow:hidden;
b. 在父级元素中加上border-top:1px solid #000;
c. 在父级元素中加上padding-top:1px;
d. 在父元素和第一个子元素之间加上内联元素。
(2) 防止margin-bottom重叠,与上面相似,另外可以设置父级元素的高度消除margin重叠。
C、空block元素的margin重叠
效果是son的div只有1em并非2em。
空block元素发生margin重叠的一些条件:
a. 元素中没有border设置
b. 元素中没有padding设置
c. 元素中没有inline的内联元素
d. 没有hieght/min-height的设置
如何防止空block的margin重叠:
a. 给son元素设置一个border
b. 给son元素设置一个padding
c. 给son元素设置一个inline的内联元素
d. 给son元素设置一个height
margin的计算规则:
(1) 正正取大值
(2) 正负值相加
(3) 负负最负值
A.正正取大值
正负值相加:
负负取负值:
相邻重叠绝对值取最大负值,负值重叠绝对值取最大的负值,自身重叠的高度为0
(5)margin:auto时的一些应用情况:
上面的例子中图片为什么不水平居中?这是因为此时的图片是inline水平的,即使没有设置width也不会占据整个容器,解决方法是将img的display设置为display:block就可以实现水平居中。(因为图片是一个替换元素)
为什么容器已经定宽定高了,为什么margin:0 auto就是不居中呢?
那该如何设置元素的居中呢?
a. 通过writing-mode实现垂直居中。更改流的方向为垂直方向。
b. 绝对定位元素的margin实现垂直居中,只有ie8+以上的浏览器才支持。
(6)margin取负值时的应用:
(1)margin实现两端对齐
(2)margin负值下的等高布局:改变元素的占据空间
(3)margin负值下的两栏自适应布局:元素占据空间随着margin的移动而改变
(7)margin在某些情形下会实效,为什么??
(1) inline水平元素的垂直方向上的margin是无效的
前提:元素是非替换元素,比如不是img元素; 正常的书写模式
(2) 可能发生了margin重叠
(3) display:table-cell/display:table-row的margin值无效,但是替换元素的display:table-cell/display:table-row的margin值是有效的
(4)绝对定位元素img设置了top和left的值,此时即使设置了margin-right或是margin-bottom的值也是不会改变图片的位置的。
想要实现添加margin-right或是margin-bottom起作用,就要在容器中添加position:relative的属性。
(5) margin的值太小使得margin属性不起作用:
(6) 内联特性导致的margin无效
由于要跟内联元素的下边缘对齐,故当图片的margin-top小到一定值的时候再减小margin-top的值是不会改变图片的位置的。
(8)了解margin-start/margin-end属性。
(1)在正常的流中,margin-start与margin-left是等效的,两者是重叠的不累加的。(从左到右的流中)
(2)如果水平流是从右往左的,margin-start与margin-right是等效的。
(3)在垂直流的方向上,(writing-mode:vertical-*)margin-start相当于margin-top。
(9)了解margin-collapse属性
-webkit-margin-collapse:<collapsed>|<discard>|<separate>
<collapsed>默认/重叠
<discard>取消
<spearate>分隔