第二天

盒模型的划分：

content（内容）：
- width
-height
-background-color

padding(内边距)
border(边框)
margin(外边距)

背景颜色

        background-color: black;

英文 1. red , orange ,yellow ,green , cyan ,blue ,purple ,pink
rgb 2. rgb(red,green,blue) 取值范围（0～255）
rgba 3. rgba(red,green,blue,alpha) alpha-透明度（0～1）
4. #aabbcc=#abc
#ffffff ->#fff->white
#000000 ->#000->black
#cccccc ->#ccc->gray */

背景图片

        /*background-image: url("img/5.jpg");*/

背景图片的重复方式

        background-repeat: no-repeat;
       /* 
        repeat     默认值：横向和纵向全部平铺
        repeat-x             横向平铺
        repeat-y             纵向平铺
        no-repeat            不平铺      */ 

背景图片的定位

        background-position: 100px 200px;
        /* 数值的书写方式：
                   1.距离 :100px  100px;
                   2.百分比 :10%  10%;
                   3.英文单词 : top上 ,
                                      right右 ,bottom 下, 
                                      left左 , center居中  ;   
           当只设置一个定位方向的时候，另外一个数值默认填写center
                                  */

---

背景的复合写法：

                      颜色->图片->重复方式->定位

            background:black  url("img/5.jpg")   no-repeat  bottom   ;

/*
例子：
background-color: red
background:url("img/5.jpg") no-repeat;

当我设置 background-color之后，在下面使用 background 的时候，
                      background 的背景颜色会失效*/

设置背景图片是否随着界面滚动

    background-attachment: scroll;

           /* scroll :滚动(默认值)
                          fixed  :固定（会造成偏移）*/

CSS 3 设置背景图片大小

   background-size: 900px  600px;

边框 border

     * 1.
            border-top-width: 10px;
            border-top-color: blue;
            border-top-style: solid;   */ 

    * 2. border-top   : 10px solid blue;
                       宽度-> 样式->颜色 

         border-left  : 10px solid blue;
         border-right : 10px solid blue;
         border-bottom: 10px solid blue;   */

    * 3.  border : 10px solid red;*/

    * 4.  border : solid red;
          border-width:10px 20px 30px 40px;   

           如果数值设置为4个数值，则分别对应上，右，下，左
           如果数值设置为3个数值，则分别对应上，左右，下
           如果数值设置为2个数值，则分别对应上下，左右
           如果数值设置为1个数值，则分别对应上右，下左           */
        
           border-width:20px ; 
           border-color: #ccc;
           border-style: double;
           /*border-style:
                       solid - 实线
                       double- 双实线 (双实线为1px显示为一条实线)
                       dotted- 点状线（在大多数浏览器里显示为实线）
                       dashed- 虚线  （在大多数浏览器里显示为实线）
              -------------------------
                none  - 无边框
                hidden-隐藏（效果与“none”相同，主要用于解决边框样式冲突）
                groove- 3D凹槽边框（边框颜色取决与border-color)
                ridge - 3D垄状边框（边框颜色取决与border-color)
                inset - 内陷      （边框颜色取决与border-color)
                outset- 外凸      （边框颜色取决与border-color)       */

边框数值的缺失：

  例如： border : 10px solid ;

               border-width  (如果缺失可以显示，默认值为中等边框：3px)
                        属性：thin  - 细的边框 - 1px
                              medium- 中等边框 - 3px
                              thick - 粗的边框 - 5px

                border-style （如果省略无法显示）

                border-color （如果省略可以显示，显示的颜色是黑色）*/

CSS3属性:为元素添加圆角边框

                     颜色： transparent-透明    */

                border-radius: 50%;

内边距：

一般来说，如果两个元素是父子关系，
你需要调整内容的位置的时候，去使用paddiing
padding 可以填充背景图片
padding 还会撑大盒子空间
padding 不能设置负数
padding-top
padding-right
padding-bottom
padding-left