===========本文共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重叠，具体值取两者之间>的最大值

<div class="box1"></div>
<div class="box2"></div>

解决：对于上下两个盒子，一般只设置一个margin

• 父子元素
  对于父子盒子来说，同时设置垂直上方向的margin，最终里>面盒子的margin会取两者之间的最大值

<div class="father">
<div class="son"></div>
</div>

解决：
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;
}

<div class="box"></div>

对于行内盒子来说，宽高设置后不会有效果，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  /*不平铺*/
  

  6. 设置背景图片位置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
  */
  

  7. 精灵图：为了减少网页向服务器发送请求的次数，经常会将许多的小icon放到一张图片上，然后通过定位的方式来使用，也叫作雪碧图 小盒子里面放大图片

  8. 设置背景图大小 background-size：width height ；

     属性值：px px

     ​ 50% 50%

     一般认为是padding+content的百分比

     ​ cover 等比缩放，一直到宽完全覆盖盒子，背景图片有些区域不能显示

     ​ content 把背景扩展到最大尺寸，使宽或高铺满整个盒子，图片完整显示，有些区域覆盖不到

  9. 背景图片滚动 background-attachment

     属性值：scroll 跟着内容滚动 、fixed 固定不动

  10. background-origin 设置背景图的左上角与盒子的某个左上角对齐 默认padding-box

      取值：border-box、padding-box 、content-box

  11. 复合属性

  background:url("") repeart-x center center;
  

• 背景图与插入图（前景图）

  1. 背景图不占位置，前景图占位置
  2. 背景图鼠标右击可以图片另存为
  3. 前景图有利于SEO

• 字体图标（类似于文字）

  1. 纯色图片上使用
  2. 阿里图标矢量库 彩色图标要使用SVG
  3. 一般使用i标签
  4. bootstrap 矢量图标库