CSS属性之背景&表格&盒模型&CSS3选择器

一、背景属性

1.背景颜色 {background-color:颜色值;}

2.背景图片的设置 background-image:url(背景图片的路径及全称)；

 背景图片的显示原则

 1）容器尺寸等于图片尺寸，背景图片正好显示在容器中

 2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

 3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

 4）网页上有两种图片形式:插入图片、背景图；

   插入图片:属于网页内容，也就是结构。

   背景图:属于网页的表现，背景图上可以显示文字、插入图片、表格等。

注:背景图片是css样式 不占位置 设置背景图片 必须要容器

       img是结构 占位置

3.背景图片平铺属性:background-repeat

  {background-repeat:no-repeat/repeat/repeat-x/repeat-y }

4.背景图的位置属性:

 {background-position:left/center/right/数值 top/center/bottom/数值;}

(1)属性:background-position

(2)属性值

 1)两个属性值之间用空格隔开

 2)水平方向x: left right center

 3)垂直反向y: top bottom center

 4)还可以用常规的属性值:数值+单位(正值、负值)

 5)简写方式:当水平方向=垂直方向的时候可以简写一个属性值

  background-position:值1 值2;(值1表示水平位置的值,值2表示垂直的位置)

  当两个值都是center的时候写一个值就可以 代表的是水平位置和垂直位置(向左方向，向上方向是负值)

5.背景图的固定属性{{background-attachment:scroll(滚动)/fixed(固定);}

 （1）fixed 固定,不随内容一块滚动； scroll:默认值 随内容一块滚动。

 （2）网页上常用的图片格式（压缩图片）

   1)jpg :有损压缩格式（破坏性压缩）靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰)

   2）gif:无损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;

   3)png:无损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;

6.简写方式

 属性:background

 属性值:颜色 图片 平铺 位置 固定

 background:属性值1 属性值2 属性值3；

 background:url（背景图片的路径及全称） no-repeat center top #f00；

二、表格属性

1.单元格间距:border-spacing:value;

 单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

2.合并相邻单元格边框:border-collapse:separate/collapse;

 合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

3.无内容时单元格的设置:empty-cells:show/hide;

 定义当单元格无内容时，是否显示该单元格的边框区域；show(默认值):显示 ；hide:隐藏；

4.显示单元格行和列的算法(加快运行的速度): table-layout:auto/fixed;

  只针对宽度起作用；

三、CSS3选择器

1.当所有的标签是一样的时候:直接而选择集合中第几个

    选择器:nth-child(n){}

2.当所有的标签不一样的时候:先筛选成多个集合 再从集合中选择第几个

 选择器:nth-of-type(n){}

  n 默认 选择所有

  2n 2的倍数

  odd 奇数

  even 偶数

四、盒模型（调元素之间的间距）

1.盒模型概念: 盒模型用来设置多个元素之间的位置关系(父子、同级元素)

2.组成部分: 内容、内边距、边框、外边距

例如:

（1）内容对应的快递模型中快递物品   content    

（2）内边距对应的快递模型中泡沫     padding

（3）边框对应的快递模型中快递盒     border

（4）外边距对应的快递模型中多个快递之间的间距   margin

3. 内边距padding的使用

 (1)padding通常用来设置父级与子级元素之间的间距

 (2)padding设置的位置

  padding是在盒子里面，在盒子与内容之间

  通常在父级元素上设置 padding会将当前容器撑开 为了不影响布局需要减去相应的padding值

  padding也可以给子级元素添加 设置的是单个子级元素移动间距

 (3)padding内边距的属性值设置特点

 1)属性值可以设置成数值加单位

 2)一个值:上下左右的值是一样的

 3)两个值:上下 和 左右

 4)三个值:上 和  左右  和 下

 5)四个值: 上 右 下 左

    padding:30px; 四周

    padding:10px 30px; 上下 左右

    padding:10px 30px 50px 上 左右 下

    padding:10px 30px 50px 100px 上右下左

 (4)padding方向

  1)前端默认的方向是顺时针(top、right、bottom、left)

  2)padding-方向值

 (5)padding内边距不能取负值

 (6)如果想让盒子保持原有的大小:在宽高基础上减掉(如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉)

（7）padding不会对背景图的位置造成影响。

4.margin外边距的使用

  表示多个同级元素之间的位置关系

  哪个元素改变就给当前元素设置即可

  设置margin值不会撑大元素的宽高大小 不需要减去相应的margin值

  注意:margin和padding属性可以换着用

（1）margin外边距的属性值设置

  属性值可以设置成数值加单位

  一个值:上下左右的值是一样的

  两个值:上下 和 左右

  三个值:上 和  左右  和 下

  四个值: 上 右 下 左

（2）margin方向

    前端默认的方向是顺时针(top、right、bottom、left)

    margin-方向值

（3）margin可以使用负值

%%总结:

   padding用来设置父子级元素之间的位置关系 可以给父级添加也可以给子级添加

   设置padding都会撑大盒子的宽高大小 是否减去padding值 看需求

   margin用来设置同级元素之间的位置关系

   内外边距属性可以换着使用

5.内外边距的常见固定用法

  *{margin:0;padding:0} 清除所有标签的内外边距

  版心选择器{margin:0 auto}  设置版心居中

6.margin的常见bug

 (1)当父级元素中只有一个子级元素的时候 给子级元素设置margin-top 会错误的解析到父级元素

   padding-top

   给父级添加边框

   给子级添加浮动

   给父级添加overflow:hidden

 (2)两个同级元素设置margin-top/bottom 错误解析之间的最大值

   padding-top/bottom

   设置一个margin值即可

7.盒模型的计算方式

<style>

  div{

      width: 200px;

      height: 200px;

      border: 10px solid #000;

      padding: 10px;

      margin: 10px;

  }

</style>

 (1)组成部分 content、padding、border、margin

 (2)盒子的自身大小: content(200px) + padding(10px*2) + border(10px*2) = 240px

 (3)盒子的真实大小: content(200px) + padding(10px*2) + border(10px*2) + margin(10px*2)= 260px