【盒模型】

内容盒子(W3C盒子)

默认盒子模型 W3C盒子

box-sizing：content-box

width 属性仅表示盒子内容所占的宽度     height 属性仅表示盒子内容所占的高度

盒子的宽

width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRigh

所占屏幕空间的高

height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

内容盒子也称为普通盒子，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。

边框盒子(IE盒子模型)

box-sizing：border-box

内容区的宽

width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

width

盒子的高

height

所占屏幕空间的宽

width+marginLeft+marginRight

所占屏幕空间的高

height+marginTop+marginBottom

边框盒子也称为怪异盒子，当我们为盒子指定width属性的时候，如果border不变，padding变大，这时候内容会变小。

盒子模型注意点

如果两个盒子是嵌套关系, 设置里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被 定下来。原因： 子元素和父元素上边框重合在一起。

外面的盒子不想被一起定下来,可以给外面的盒子添加一个边框属性。

一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑 margin，margin本质上是用于控制兄弟关系之间的间隙的。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中 ​ margin:0 auto = margin:0 auto 0 auto，表示上下为0，左右为auto； ​

margin: 0 auto; 只对水平方向有效, 对垂直方向无效

盒子背景样式

background-color 背景颜色

background-image 背景图片   注意点: ​ 1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址 ​ 2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充 3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

background-repeat 背景平铺属性

repeat 默认     no-repeat       repeat-x   ​ repeat-y 

background-position 背景定位属性

 方位名词      水平方向: left center right ​ 垂直方向: top center bottom

具体的像素 ​例如 background-position: 100px 200px;

注意点: ​ 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

背景属性的缩写

background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

修改背景关联方式  

background-attachment：scroll;

scroll 默认值， 会随着滚动条的滚动而滚动 ​ fixed 不会随着滚动条的滚动而滚动

背景图片和插入图片区别

背景图片是一个装饰, 不会占用位置 ​ 插入图片会占用位置

背景图片有定位属性, 可以很方便的控制图片的位置 ​ 插入图片没有定位属性, 控制图片的位置不太方便

插入图片的语义比背景图片的语义要强, 如果你的图片想被搜索引擎收录, 那么推荐使用插入图片