网页设计中常听的属性名:内容(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边框相关属性的速记写法