CSS--盒子模型

        网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

盒子模型的组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

盒子的分类和大小

        默认盒子模型 W3C盒子

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

 特点：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和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去 边框 和 内边距 才能得到内容的宽度和高度。 

    内容区的宽

width-paddingLeft-paddingRight-borderLeft-borderRight

    内容区的高

height-paddingTop-paddingBottom-borderTop-borderBottom

    盒子的宽

width

    盒子的高

height

    所占屏幕空间的宽

width+marginLeft+marginRight

    所占屏幕空间的高

height+marginTop+marginBottom

盒子样式

1.背景样式-background

l background-color  为元素设置一种颜色

l background-image  为元素设置一个背景图片

l background-size  设置背景的大小

•cover  背景铺满整个屏幕，（尽量不要使用大图覆盖小范围） 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像 的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展 。 

• contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按 照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有 背景图片。 

• 百分比 

• 绝对值

l background-repeat  设置背景图片的重复方式

• repeat 为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边 缘切割(clipping)最后一个图片以使用整个背景范围。 

• repeat-x x方向平铺一行 

• repeat-y y方向平铺一行 

• no-repeat 不重复

l background-origin  设定背景的起始点

• padding-box 默认，背景图片从内边距的外边缘开始绘制

• border-box 背景图片从边框的外边缘开始绘制

• content-box 背景图片从内容区开始绘制

l background-clip  设定背景的覆盖范围

l background-attachment  设置背景图片的固定点

l background-position  设置为背景图像初始位置，可以实现图片精灵

lbackground  背景设置的速记写法

[<attachment>][<clip>][<color>][<image>][<position>][<repeat>]

边框样式-border

l border-width为元素指定边框的宽度

l border-style为元素指定边框样式

• none 不设置 

• hidden 隐藏 

• dotted 显示一系列的点

• dashed 显示一系列小线段

• solid 显示一条单一的实心直线 

• double 显示两条实心直线 

• groove 边框雕刻效果(与ridge相反) 

• ridge 与groove相反 

• inset 嵌入式边界框(与outset相反) 

• outset 突出的边界框

l border-color为元素指定边框颜色

l border-radius为元素指定圆角边框的半径

l border边框相关属性的速记写法