CSS盒子模型以及背景图

===========本文共1500字================

CSS盒子模型---边框

内容区域
边框box-shadow: none;

边框宽度 border-width

边框样式 border-style

边框颜色 border-color

复写属性：宽度、样式、颜色

圆角 border-radius 取值可以为px 或是百分比
小三角：通过border设置

CSS盒子模型---内容区域

宽度：width 块级盒子未设宽度时默认为父元素的100%，内联、内联块盒子默认宽度由内容撑开

高度：height 未设置时一般由内容撑开，注意父元素在子元素浮动时会产生高度塌陷问题

传统盒子的宽高

盒子内容的宽高：指为盒子设置的width height

盒子元素的宽高:width+padding+border height+padding+border

盒子在网页上占据的宽高：width+padding+border+margin
*{padding:0;}
*的性能不佳，会选中所有标签，通常在项目中会使用css reset

CSS盒子模型---内边距区域padding

属性简写

 padding:10px; 上下左右都为10px
 padding:10px 20px; 上下10px 左右20px
 padding:10px 20px 30px; 上10px 左右20px 下30
 padding:10px 20px 30px 40px: 上10 右20 下30 左40

有些盒子会有默认的padding，我们一般把网页上所有的标签padding设为0（0px px可以不写）

经典代码

*{padding:0;}
*的性能不佳，会选中所有标签，通常在项目中会使用css reset

CSS盒子---外边距margin

有些盒子会有默认的margin，我们一般把网页上所有的标签margin设为0（0px px可以不写）

经典代码

*{margin:0;}

margin有四个方向 上右下左

属性简写与padding相同

margin塌陷（重叠问题）

兄弟元素
上个盒子的margin-bottom会与相邻下个盒子的margin-op重叠，具体值取两者之间>的最大值
解决：对于上下两个盒子，一般只设置一个margin

父子元素
对于父子盒子来说，同时设置垂直上方向的margin，最终里>面盒子的margin会取两者之间的最大值
解决：
1）父元素加上padding：盒子在网页上大小发生变化
2）父元素加border：盒子在网页上大小发生变化
3）overflow:hidden（溢出：隐藏）：不会改变盒子在网页上的大小

NEW盒子模型

通过设置属性使传统盒子变成新盒子

属性box-sizing：

值： content-box（默认、传统盒子）

border-box（NEW）此时width height代表盒子在网页上的大小，网页会自动修改盒子内容的大小

盒子阴影box-shadow

格式：box-shadow：水平阴影、垂直阴影、模糊程度、阴影尺寸、阴影颜色、内/外(默认);

利用伪元素创建盒子模型

.box::before{
 content:"";
 /* 默认是行内盒子 一般修改为块级盒子*/
 display:block;
 width:100px;
 height:100px;
}

对于行内盒子来说，宽高设置后不会有效果，margin，padding在水平方向上有效，垂直方向上无效。

盒子背景

背景颜色：background-color
默认填充content、padding、border不会填充margin

颜色：单词、十六进制、rgb、rgba
十六进制：#ffff00 可以简写 #ff0 AABBCC 可以简写为ABC

rgba(255,255,0,0):a代表透明度，0-1,0代表完全透明，1完全不透明，设置0.5可以简写为.5
可以设置颜色属性值为：transprant代表透明

背景图片：background-img：url（）/（""）;
1. 默认填充content、padding、border、不填充margin，
2. 默认图片左上角与盒子左上角（padding）对齐
3. 作为背景图不会压缩、变形
4. 盒子小于图片，默认盒子背景是图片的一部分
5. 盒子大于图片，默认情况下在水平和垂直方向上会平铺图片、默认在border上也会填充图片
控制平铺：background-repeat
```
background-repeat:repeat-x;
repeat-x /*x轴平铺*/
repeat-y /*y轴平铺*/
repeat  /*x/y轴平铺*/
no-repeat  /*不平铺*/
```
1. 设置背景图片位置background-position：0 0；表示原点（0 ，0）
```
background-position:0 0;
background-position:left top;
/*
x/y值可以取值为像素，也可以取值单词，分别是靠左border，靠右border，中间位置
x轴取值:left/right/center
y轴取值：top/bottom/center
*/
```
1. 精灵图：为了减少网页向服务器发送请求的次数，经常会将许多的小icon放到一张图片上，然后通过定位的方式来使用，也叫作雪碧图 小盒子里面放大图片
2. 设置背景图大小 background-size：width height ；
  
  属性值：px px
  
  50% 50%
  
  一般认为是padding+content的百分比
  
  cover 等比缩放，一直到宽完全覆盖盒子，背景图片有些区域不能显示
  
  content 把背景扩展到最大尺寸，使宽或高铺满整个盒子，图片完整显示，有些区域覆盖不到
3. 背景图片滚动 background-attachment
  
  属性值：scroll 跟着内容滚动、fixed 固定不动
4. background-origin 设置背景图的左上角与盒子的某个左上角对齐默认padding-box
  
  取值：border-box、padding-box 、content-box
5. 复合属性
```
background:url("") repeart-x center center;
```
背景图与插入图（前景图）
1. 背景图不占位置，前景图占位置
2. 背景图鼠标右击可以图片另存为
3. 前景图有利于SEO
字体图标（类似于文字）
1. 纯色图片上使用
2. 阿里图标矢量库彩色图标要使用SVG
3. 一般使用i标签
4. bootstrap 矢量图标库