盒模型与布局
1.盒模型
一个元素在页面中相当于一个盒子,包括margin、border、padding、content,如下图所示:
图1 css盒子
盒子模型包括IE盒模型与标准盒模型。
div{ width: 100px; height: 50px; border: 2px; padding: 10px; margin: 20px; }
标准盒子模型:
元素所占宽度: width = margin+ border + padding + width(内容宽度),
元素所占高度height同理。
css中指定的宽度是content宽度,高度是content高度。
div实际所占的宽度width = width(content宽度) + padding-left + padding-right + border-left + border-right + margin-left + margin-right= 100px + 10px +10px + 2px + 2px +20px +20px = 164px;
div实际所占的高度height = height(content高度) + padding-top + padding-bottom + border-top + border-bottom + margin-top +margin-bottom= 50px + 10px + 10px +2px +2px + 20px + 20px = 114px;
IE盒子模型:
元素所占宽度: width = width + margin,
元素所占高度height同理。
css中指定的宽度是元素的border、padding与content三者的宽度之和,css中指定的高度是元素的border、padding与content三者高度之和。
div实际所占宽度width = width + margin-left + margin-right = 100px + 20px +20px = 140px;
div实际所占高度height = height + margin-top + margin-bottom = 50px + 20px +20x = 90px;
div的content宽度:width - border-left - border-right - padding-left -padding-right = 100px - 10px - 10px - 2px -2px = 76px;
div的content高度:height - border-top - border-bottom - padding-top - paadding-bottom = 50px -10px -10px -2px -2px = 26px;
可通过css box-sizing设置元素使用哪种模型。
*{ box-sizing: border-box;/*IE模型*/ -webkit-box-sizing: border-box;/*IE模型*/ }
*{ border-sizing: content-box;/*标准模型*/ -webkit-box-sizing: content-box;/*标准模型*/ }
2.布局
每个文档树的元素会根据盒模型产生零个到多个盒子。这些盒子的布局取决于盒子的尺寸,类型,定位方式(正常流,浮动和绝对定位),元素之间的关系和外部信息。
(1)块级元素
视觉上被格式化成块状的元素为块级元素。display的属性值:block, list-item, table, flex, grid都可以将一个元素设置成块级级元素。
(2)块元素
display的值为block的元素。
(3)块级盒子 (block-level box)
块级元素的盒子,块级盒子参与某些BFC。
(4)行内级元素
不会为自身内容形成新的块,让内容分布在多行中。display的属性值:inline, inline-table, inline-block, inline-flex, inline-grid值都可以将一个元素设置成行内级元素。
(5)行内元素
display属性值为inline的元素。
(6)行内级盒子(inline-level box)
行内级元素生成行内级盒子,行内级盒子参与某个IFC。
(7)行内盒子(inline box)
行内元素生成行内盒子。
(8)行盒子(line box)
行盒子有行级内盒子组成,表示一行。line-box是一个看不见摸不着的边框,但每一行所占的高度其实是line-box的高度,而不是inline-level的高度。
(9)匿名块盒子和匿名行内盒子
一段纯文本有时可作为匿名块盒子,有时可作为匿名行内盒子。 (10)box布局定位
css中通过position scheme来定义,其包含normal flow、 floats和absolute positioning 三种定位方式。而normal flow包含block formatting、inline formatting和relative positioning, 其中BFC为block formatting的上下文,IFC为inline formatting的上下文。
(11)FC(BFC与IFC)
FC(Formatting Context) 格式化上下文是指盒子所在一个上下文环境中,它的排版受到上下文环境影响。
仅是在标准文档流的盒子才具有FC特性。 block-level box的FC为BFC,inline-level box的FC为IFC。BFC表示从上到下的垂直排列方式,IFC表示盒子从左到右的排列方式。根元素(html)会生成一个默认BFC供子孙block-level box使用。
也可以产生一个新的BFC,脱离根元素的BFC,自己拥有一个上下文为环境。产生新的BFC方式如下:
a.float属性不为none
b.position为absolute或fixed
c.display为inline-block, table-cell,table-caption,flex,inline-flex
d.overflow不为visible
[1]http://blog.doyoe.com/2015/03/09/css/%E8%A7%86%E8%A7%89%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A8%A1%E5%9E%8B%E4%B8%AD%E7%9A%84%E5%90%84%E7%A7%8D%E6%A1%86/#more
[2]https://segmentfault.com/a/1190000004625635