css03：样式设置以及盒子的重要知识总结

1.样式

设置元素的隐藏和显示

• display
  • none：元素的隐藏
    • 不但隐藏元素本身，还会隐藏元素所占据空间
  • block：元素的显示
• visibility：
  • hidden：元素的隐藏 （好比将其透明度设置为0）
    • 只隐藏元素本身，但是不会隐藏元素所占据空间
  • visible：元素的显示

设置表格样式

• border：设置表格的边框
  • border-collapse: collapse;  设置边框合并
  • border-separate: separate;  设置边框分离
  • border-spacing：设置单元格的间距
  • padding：设置单元格内容和边框之间的距离
• table-layout：
  • auto：（默认） 自动方式，根据单元格的内容自动调整宽度
  • fixed：固定方式，表格宽度固定

设置列表样式

• list-style：
  • 
• list-height：设置列表的行高

设置文本样式

• cursor：调整光标悬浮到链接上的时候光标的形状
• outline：调整环绕链接的框
• text-decoration：自定义设置列表项标志
• text-align：文本对齐方式

2.盒子

（1）盒子的组成

• 盒子=内容区+内边距+边框+外边距
  • 盒子的高度 =内容区+内边距+边框 （除去外边距的高度）
  • 盒子所占空间（浏览器）高度 =内容区+内边距+边框+外边距
  • 

（2）盒子的分类

（i）标准盒子/w3c盒子

• 默认都是标准盒子（使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型）
• content-box
  • 特点：
    • 所设置的宽高属性是直接设置给元素内容的
    • width
    • height
      • box-sizing=content-box；

（ii）边框盒子/怪异盒子

• box-sizing：
  • border-box
    • 将宽高属性----> ：内容+内边距+设置给盒子content+padding+border

（3）背景样式设置

• background

• background-color：为元素设置一种颜色
• background-image：为元素设置一个背景图片
• background-size：设置背景的大小
  • cover：背景铺满整个屏幕，（尽量不要使用大图覆盖小范围) 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展.
  • contain：contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有背景图片。
  • 百分比
  • 绝对值
• background-repeat：设置图片的重复方式
  • repeat：为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
  • no-repeat：不重复
  • space
    • 1.容器空间小于图片
      • space背景图片不会产生缩放，会被裁剪
      • round缩放背景图至容器大小（非等比例缩放）
    • 2.容器空间大于图片
      • space在不缩放的前提下尽可能多的重复图片
      • round充分利用容器空间，重复n次之后（x/y轴方向）如果剩余空间大于等于img width50%则重复第n+1次，否则拉伸已经重复的背景图
  • round
• background-clip：设定背景的覆盖范围
  • border-box：（默认）背景位于边框以内
  • padding-box：背景位于内边距以内
  • content-box：背景位于内容区
• background-origin：设定背景的起始点
  • padding-box：（默认）背景图片从内边距的外边缘开始绘制
  • border-box：背景图片从边框的外边缘开始绘制
  • content-box：背景图片绘制在内容区
• background-position: 为背景图像设置初始位置 50px 50px;
• background-attachment：设置背景图片的固定点
  • scroll： （默认）
    • 背景图像会随着页面其余部分的滚动而移动，背景固定在自身元素上
  • fixed：背景固定在视口上，当页面的其余部分滚动时，背景图像不会移动。

（4）边框样式设置

• border

• border-width：为元素指定边框的宽度
  • 关键字：thin、medium、thick
  • 单位：px、em
• border-style：为元素指定边框样式.
  • 
• border-color：为元素指定边框颜色
  • 关键字、十六进制、RGB、RGBA、HSL、HSLA
• border-radius：为元素指定圆角边框的半径
  • 绝对值：px、mm、cm
  • 相对值：em、rem
• border-image
  • slice
  • repeat

（5）表格样式设置

• table

• border-collapse：指定表格的边框是合并还是分开
  • separate：（默认）分开模式，表示相邻的两个格子都有独立边框
  • collapse：合并模式，表示相邻的两个格子共享边框
• caption-side：制定caption坐落在表格的哪个位置上
  • top：标题位于表格的上方
  • bottom：标题位于表格的下方
• background：为表格添加背景色