2020-09-24 CSS3的学习3

CSS3第三天

---

盒子

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

---

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

一、盒子属性（ Box properties）

示例：

名称	属性
width&height	用于设置内容区的宽高，该片 区域用于显示内容。盒子高度 默认为内容的高度。
padding	内边距。代表内容盒子的外边界与外边框的内边界之间的距离
border	设定介于padding的外边缘与 margin的内边缘之间，默认值为0
margin	外边距。代表盒子四周的区域。设值方 法与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；HSLA
background-image	为元素设置一个背景图片	none ；url()
background-size	设置背景的大小	cover；contain；百分比；绝对值
background-repeat	设置背景图片的重复方式	repeat；repeat-x；repeat-y；no-repeat
background-origin	设定背景的起始点	padding-box；border-box；content-box
background-clip	设定背景的覆盖范围	padding-box；border-box；content-box
background-attachment	设置背景图片的固定点	scroll；fixed；local
background-position	设置为背景图像初始位置，可以实现图片精灵	关键字；坐标

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

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

四、盒子边框样式

名称	属性	值
border-width	为元素指定边框的宽度	关键字；单位
border-style	为元素指定边框样式	none；hidden；dotted；dashed；solid等
border-color	为元素指定边框颜色	关键字；十六进制；RGB；HSL； RGBA；HSLA
border-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