2019/9/17 实训day7

content高度和宽度

/外盒尺寸计算（元素空间尺寸）/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/内盒尺寸计算（元素实际大小）/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
1.width，height仅使用块级元素，对行内元素无效

2.计算盒子总高度时，还应考虑上下两个盒子的外边距合并情况

3.如果一个盒子没有给定宽度和高度时，padding不会影响盒子大小

css盒子模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

1.content-box ：盒子模型 width + padding + boder

2.border-box：/盒子模型即为宽度 padding 和boder 都包含再width/

float（重点）

可以使用float属性来添加盒子浮动。
可使用的属性为 right left none
浮动后的盒子会变成一个脱离原来文档流的自由盒子（飞起来辣！）。并且他的原来位置会被后面的盒子顶上
float 浮漏特

浮：浮起来，漂浮在其他标准流盒子上面

漏： 加了浮动，不占位置，原来的位置就漏给了标准流的盒子

特：特别注意，首先浮动的盒子和标准流父级搭配使用，特别注意，浮动会使元素变成行内块元素

清除浮动

当盒子飞起来后。下面的内容往往会重叠。无法按照原来的盒子逻辑往下排。所以使用清楚浮动效果。来让盒子按照原来的位置去排序。

清除浮动的几种方法

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

闭合浮动，

额外标签法

w3c推荐的清除浮动方法

优点:通俗易懂，书写方便

缺点：添加了许多无意义的标签，结构化更差。

父级添加overflow属性方法

BFC（后面详细讲）

可以给父级添加overflow：hidden auto scroll

优点:代码简介

缺点：内容增多的时候，不会自动换行，无法显示溢出元素

使用after伪元素清除浮动

:after 的升级版

优点：符合闭合浮动的思想，结构语义化正确

缺点: ie6不支持after，

使用before和after双伪元素清除浮动

清除浮动：clear:both 块级元素下移，直到两边没有浮动元素

闭合浮动：使浮动元素闭合，使父元素能够包含浮动元素，从而减少浮动影响

代码更简洁

ie6 不支持:after