盒子模型and背景、边框各种属性的用法

间距
word-spacing:单词之间的间距
letter-spacing：字符之间的间距
宽度和高度超出父元素的情况
1.word-wrap: break-word:超出父元素宽度是否换行显示
2.overflow:超出父元素部分（高度）如何设置
hidden：隐藏
scroll：以滚动条形式展示

width
height
max-width
max-height
min-width
min-height

元素的隐藏和显示
display:
none:元素的隐藏
隐藏元素所占据的空间
block：元素的显示
visibility
hidden：元素的隐藏
相当于修改了元素的透明度
保留元素所占据的空间
visible:元素的显示

设置表格中的单元格合并：
（ 消除单元格之间的间隔，给table标签设置：）
border-collapse: collapse;
设置表格标题位置：
caption-side: top/left/right/bottom

将列进行分组：(写在所有tr之上，每一个col代表一列)

 <colgroup>
            <col>
            <col>
            <col style="background-color:red" span="2">/*控制第3和第4列*/
 </colgroup>

---

盒子模型
所有的标签都是一个盒子
盒子宽度=content+padding+border

****1.标准盒子/默认盒子/w3c盒子****
	box-sizing:content-box;
<div></div>
		特点：
			width-->元素内容

**2.边框盒子/怪异盒子：**
	box-sizing:border-box;
	特点：
		width-->盒子

eg:
div{
		box-sizing: border-box;
		width: 100px;
		height: 100px;
		border:1px solid red;
		padding:10px;
		margin:10px;
	}
	没有设置box-sizing时，默认为标准盒子
	/*
	怪异盒子：
		1.盒子内容区域的宽度？
			width=100-2-20=78
		2.盒子的宽度？
			width:100px;
		3.盒子在浏览器中所占据的宽度？
			width=盒子+margin=100+20=120px;

	*/
	/*
	标准盒子：
		1.盒子内容区域的宽度？
			width:100px;
		2.盒子的宽度？
			width=content+padding+border=100+20+2=122
		3.盒子在浏览器中所占据的宽度？
			width=盒子width+margin=122+20=142

	*/
</style>

快元素的水平居中
margin:0 auto

设置圆角边框：
border-radius
呼吸灯：注意：圆圈的宽度不用设置100%，因为div是块 级元素，默认沾满一行
background-image:url(’’);
background-repeat:
no-repeat背景图片不重复
repeat-x在x轴重复
repeat-y在y轴重复
space 使用空白分割开图片，eg：放三张多图片，则放三张，，空下的平均分给前三张图片之间的间隙
round 拉伸
background-slip:设置背景覆盖范围
border-box 背景位于边框以内
padding-box背景位于内边距以内
content-box背景位于内容区
background-origin:
border-box 背景图片从边框的外边缘开始绘制
padding-box背景图片从内边距的外边缘开始绘制
content-box背景图片位于内容区

图片默认重复，
background-slip不配合repeat使用
background-origin配合repeat使用

默认书写规范：从上至下，从左至右
上方和左侧是静态属性，下方和右侧是动态属性
background-position:设置背景图片初始位置，相对于background-origin定义的位置
50px 50px像右 向下移动50px
background-attachment设置为背景图片的固定点
fixed 固定在视口上（不随滚动条滚，起点在border里）
scroll 固定在自身元素上（随滚动条滚，起点在padding里面）
local 固定在自身元素的内容上（将背景图片固定到元素内容上）
background-size:
100px 100px
100% 100%
contain 以x轴为基准
cover 以y轴为基准
background速记写法：

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

border-style:
dotted 圆点点
dashed xiao线段
solid 实心直线
double 两条实心直线
border-image自定义边框
border-image-source:url()
border-image-slice27(不要写px，系统自己会加)切割
border-image-repeat:
repeat重复切割
round 拉伸或压缩适应整体宽度 4.7个放5个，放不进去，整体进行压缩
space 不四舍五入，eg:4.7个放4个,剩下的0.7均匀分配给空白区域，图片之间有空隙