前端学习-CSS-02

1、框模型

   1、框

      框就是个容器，目的为了承装其他的东西

      html中所有的元素都可以称之为 框

   2、框模型

      Box Model : 也称为盒子模型

      定义了元素框 处理元素内容尺寸、内边距、边框 和 外边距的方式

      元素内容尺寸 ： width , height

        div{

width:100px;

height:100px;

}

       边框：border

       div{

   border:1px solid #ddd;

       }

       注意：当框模型(内边距，外边距，边框)介入到元素后，元素的 内容区域 尺寸是不变的，但是会增加元素框的总尺寸

       元素总宽度 = 左右外边距 + 左右边框+ 左右内边距+ width;

       元素总高度 = 上下外边距 + 上下边框+ 上下内边距+ height;

       eg :

         div{

width : 200px ;

border: 2px solid #ddd;

左右外边距 : 15px;

左内边距: 8px;

右内边距: 4px;

  }

 总宽度：200 + 2*2 + 15*2 + 8 + 4 =

         200 + 4 + 30 + 12 = 246px

   3、外边距

      1、什么是外边距

         在元素边框周围的一些空白区域，这些区域是透明的，默认情况下，是不允许被其他元素所占据的。也可以表示为当前元素 与 其他元素之间的距离

      2、语法： margin:value; (四个方向的外边距)

  单边设置：

  margin-top : 上外边距

  margin-bottom:下外边距

  margin-left:左外边距

  margin-right:右外边距

 取值：    单位: px   %

     auto : 自动，只对 左右外边距有效,设置水平居中

     负值 : 目的 是为了移动元素

        margin-left:取负值，为了向左移动元素

    margin-top :取负值，为了向上移动元素    

   取值为 auto ：由浏览器自己计算外边距。左右方向取值为auto 时，会呈现出 元素水平居中对齐显示方式（仅仅局限于块级元素，而且必须要设置宽度属性）    

   取值数量：

     margin:value; 四个方向外边距

     margin:v1 v2; 上下   左右

     margin:v1 v2 v3; 上   左右   下

     margin:v1 v2 v3 v4; 上 右 下 左

      3、默认 外边距

         html元素里， 有些元素默认具备 外边距的

  h1~h6  p  ul  body  dl,dd

 如果程序中，不想使用默认的外边距，可以设置为 0

      4、外边距问题

         1、(垂直)外边距合并

    当两个垂直外边距相遇时，它们将形成一个外边距，称为 外边距合并

    合并后的外边距的高度值为两个元素中 外边距较大者的值

   2、外边距溢出

    父子元素中，如果设置 子元素 的上下外边距时，默认情况 会 被作用到父元素的外边距上

    解决方式：

    1、可以为 父元素 增加边框

    2、增加 父元素 的 padding-top

       最好将 父元素的高度 相应的 减少一部分数值

   4、内边距

      1、什么是内边距         内容区域 与 边框之间的距离控件

 注意：内边距 会将元素边框撑大

      2、属性

          padding : value;

    padding-top/bottom/right/left:

 取值：     单位：px   %

    数量：

      padding:value ; 上下左右

      padding:v1 v2 ; 上下 左右

      padding:v1 v2 v3;上  左右  下

      padding:v1 v2 v3 v4;上 右 下 左

2、背景

   1、背景颜色

      属性：background-color

      取值：可设置为合法的值 或  transparent

      注意：默认情况下，背景(颜色、图像)是从边框位置处就开始填充

   2、背景图片

      属性：background-image

      取值：url("图像URL")

      background-image:url("xxxx/xxx.jpg");

      background-image:url('xxxx/xxx.jpg');

      background-image:url(xxxx/xxx.jpg);

   3、背景平铺

      属性：background-repeat

      取值：

    repeat : 即水平方向又垂直方向平铺(默认值)

    no-repeat : 没有平铺

    repeat-x : 仅水平方向平铺

    repeat-y : 仅垂直方向平铺

   4、背景图片尺寸

      属性：background-size

      取值：

            value1  value2 : 宽度 高度

     value1%  value2% : 父容器的宽和高的占比

    cover : 覆盖，将背景图像扩展至足够大，直到背景图已经覆盖了元素的所有区域.有可能导致背景图不能完整的显示在元素中

    contain: 包含，将背景图扩大，直到背景图已经碰都某一个边缘位置（右、下）,背景图能够完完整整的显示在元素中，不一定能覆盖到所有的区域

   5、背景图片固定

      属性：background-attachment

      取值：

            scroll ：背景 会随文档发生滚动

     fixed : 固定 ， 背景不会随着内容而发生滚动

   6、背景定位

      改变背景图片在元素中的位置

      属性：background-position

      取值：

            x  y : x水平偏移位置,值为正 向右移动，值为负，向左移动

           y垂直偏移位置,值为正 向下移动，值为负，向上移动

            x% y% :

            左上角 : 0% 0%

     右下角 : 100% 100%

     居中显示 : 50% 50%

    关键字：

          x : left,center,right

    y : top,center,bottom

      CSS Sprite : 将多个背景图合并到一张里面去，根据需求情况，通过 背景定位 对背景图片进行偏移，从而找到要显示的图像

   7、背景属性

      将  以上几个属性全部综合到一起,通过一个属性描述所有的值

      属性:background

      取值：color url() repeat attachment position;

      常用值：

         background:url() reapeat position;

background-image:url(Images/user.png);

background-repeat:no-repeat;

background-position:right center;

background:url(Images/user.png) no-repeat right center;

3、渐变

   1、渐变语法：

      属性：background-image

      取值：

            linear-gradient()  -- 线性渐变

     radial-gradient()  -- 径向渐变

     repeating-linear-gradient() -- 重复线性渐变

     repeating-radial-gradient() -- 重复径向渐变

     background-image:url();  -- 显示背景图像

     background-image:linear-gradient(); -- 显示线性渐变颜色

   2、线性渐变

      属性：background-image

      取值:linear-gradient(angle,color-point1,color-point2,...)

      angle:方向(角度)

          to top : 向上  --> 0deg

    to right : 向右 --> 90deg

    to bottom : 向下 --> 180deg

    to left : 向左 --> 270deg

         color-point :  表示颜色的数值 和 位置    red 10px   red 0%

      background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);

   3、径向渐变

      属性：background-image

      取值: radial-gradient();

        radial-gradient([size at position],color-point1,color-point2,....);

size at postion :

   可以省略不写

   size : 标识的圆的半径 以 px为单位

   position : 圆心的位置

      top,left,right,bottom,center       具体数值       百分比

   4、重复渐变

      repeating-linear-gradient(angle,color-point);

      color-point:

        位置 取具体的数值或者不到 100% 的 数字

      repeating-radial-gradient();

*******************************************************************************