盒子模型简述

盒子模型

盒子属性（ Box properties）
文档中的每个元素都可以被看作是一个矩形盒子。

width & height
用于设置内容区的宽高，该片
区域用于显示内容。盒子高度
默认为内容的高度。
padding 内间距
代表内容盒子的外边界与外边
框的内边界之间的距离
border
设定介于padding的外边缘与
margin的内边缘之间，默认值
为0
margin 外边距
代表盒子四周的区域。设值方
法与padding类似。相邻元素的
边距会合并。
默认盒子模型-- W3C盒子
使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。
width 属性仅表示盒子内容所占的宽度。
height 属性仅表示盒子内容所占的高度。
W3C盒子
内容区的宽 width
内容区的高 height
盒子的宽
width+paddingLeft+paddingRight+borderLeft+borderRight
盒子的高
height+paddingTop+paddingBottom+borderTop+borderBottom
所占屏幕空间的宽
width+paddingLeft+paddingRight+borderLeft+borderRight
+marginLeft+marginRight
所占屏幕空间的高
height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom
边框盒子模型 --IE盒子
使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。
width = width+ padding-left + padding-right+ border-left + border-right
内容区的宽
width-paddingLeft-paddingRight-borderLeft-borderRight
内容区的高
height-paddingTop-paddingBottom-borderTop-borderBottom
盒子的宽 width
盒子的高 height
所占屏幕空间的宽
width+marginLeft+marginRight
所占屏幕空间的高
height+marginTop+marginBottom
盒子背景样式
background-color 为元素设置一种颜色
 background-image 为元素设置一个背景图片
 background-size 设置背景的大小
 background-repeat 设置背景图片的重复方式
 background-origin 设定背景的起始点
 background-clip 设定背景的覆盖范围
 background-attachment 设置背景图片的固定点
 background-position 设置为背景图像初始位置，可以实现图片精灵
background 背景设置的速记写法
background-image:为元素设置一个背景图片
取值
• none
• url()
background-size：设置背景的大小
取值
1.cover 背景铺满整个屏幕，（尽量不要使用大图覆盖小范围）
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展。
2.contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有背景图片。
3.百分比
4.绝对值
background-repeat：设置为背景图像的重复方式
取值
repeat 为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
repeat-x ，x方向平铺一行
repeat-y， y方向平铺一行
no-repeat ，不重复
background-origin：设定背景图片的起始覆盖点
取值
padding-box 默认，背景图片从内边距的外边缘开始绘制
border-box 背景图片从边框的外边缘开始绘制
content-box 背景图片从内容区开始绘制
background-clip：设定背景的覆盖范围
取值
border-box 默认，背景位于边框以内
padding-box 背景位于内边距以内
content-box 背景位于内容区
background-attachment：设置为背景图像的固定点
取值
scroll 默认值，背景图像会随着页面其余部分的滚动而移动，背景固定在自身元素上，背景图相对于元素固定，背景随页面滚动而移动，即背景和元素绑定。
fixed 背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了视口区上。
local 背景图相对于元素内容固定，存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll。
background-position：设置为背景图像初始位置,相对于background-origin定义的位置，用来实现图片精灵
(CSS sprites)技术
取值
关键字
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
边框 （border）
 border-width 为元素指定边框的宽度
 border-style 为元素指定边框样式
 border-color 为元素指定边框颜色
 border-radius 为元素指定圆角边框的半径
 border 边框相关属性的速记写法
border-width：为元素指定边框的宽度
取值：
关键字 thin 、medium、thick
单位 px、em
border-style：为元素指定边框的样式
取值：
• none 不设置
• hidden 隐藏
• dotted 显示一系列的点
• dashed 显示一系列小线段
• solid 显示一条单一的实心直线
• double 显示两条实心直线
• groove 边框雕刻效果(与ridge相反)
• ridge 与groove相反
• inset 嵌入式边界框(与outset相反）
• outset 突出的边界框
border-color：为元素指定边框的颜色