CSS3第三天

文章目录

CSS3第三天盒子一、盒子属性（ Box properties）二、盒子模型1.默认盒子模型——W3C盒子2.边框盒子模型——IE盒子 三、盒子背景样式四、盒子边框样式五、表格样式

---

盒子

1.掌握盒子的特性 2.掌握两种不同的盒子模型

---

以下是本篇文章正文内容，下面案例可供参考

一、盒子属性（ Box properties）

示例：

名称属性width&height用于设置内容区的宽高，该片 区域用于显示内容。盒子高度 默认为内容的高度。padding内边距。代表内容盒子的外边界与外边框的内边界之间的距离border设定介于padding的外边缘与 margin的内边缘之间，默认值为0margin外边距。代表盒子四周的区域。设值方 法与padding类似。相邻元素的 边距会合并

二、盒子模型

1.默认盒子模型——W3C盒子

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。 width 属性仅表示盒子内容所占的宽度 height 属性仅表示盒子内容所占的高度

名称值内容区的宽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

2.边框盒子模型——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为元素设置一种颜色关键字；十六进制；RGB；HSL； RGBA；HSLAbackground-image为元素设置一个背景图片none ；url()background-size设置背景的大小cover；contain；百分比；绝对值background-repeat设置背景图片的重复方式repeat；repeat-x；repeat-y；no-repeatbackground-origin设定背景的起始点padding-box；border-box；content-boxbackground-clip设定背景的覆盖范围padding-box；border-box；content-boxbackground-attachment设置背景图片的固定点scroll；fixed；localbackground-position设置为背景图像初始位置，可以实现图片精灵关键字；坐标

background 背景相关属性的速记写法：

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

四、盒子边框样式

名称属性值border-width为元素指定边框的宽度关键字；单位border-style为元素指定边框样式none；hidden；dotted；dashed；solid等border-color为元素指定边框颜色关键字；十六进制；RGB；HSL； RGBA；HSLAborder-radius为元素指定圆角边框的半径绝对值 px、mm 、cm ；相对值 em 、rem

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

[<widtht>][<style>][<color>]

五、表格样式

名称属性值border-collapse指定表格的边框是合并还是分开关键字；单位caption-side指定caption坐落在表格的哪个位置上none；hidden；dotted；dashed；solid等background为表格添加背景色关键字；十六进制；RGB；HSL； RGBA；HSLA