CSS（二）

一、尺寸单位与颜色取值

  1、尺寸单位

     1、px：像素单位，浏览器默认单位
      2、% ：百分比，参照父元素对应属性的值计算
       et:
        <div>
             <p></p>
        </div>
        -----------
        div{
            width:200px
            height:200px
        }
        p{
             width:50%
             height:50%
        }
    3、in：inch 英寸，换算：1in = 2.54cm
     4、pt：磅，1pt = 1/72 in
     5、cm
     6、mm
     补充：
    7、em：默认情况下，字体大小为16px，1em = 16px

2、颜色取值

    1、英文单词

    2、rgb(r,g,b)表示法
       根据红绿蓝三原色组合呈现不同的颜色
       每个值取值范围 0~255，值越大，颜色越饱和
       et：
         红色：rgb(255,0,0);
         绿色：rgb(0,255,0);
         蓝色：rgb(0,0,255);
         黑色：rgb(0,0,0);
         白色：rgb(255,255,255);
    3、rgba(r,g,b,alpha)表示法
          rgb：三原色取值范围 0~255
          alpha：透明度取值范围 0（透明）-1（不透明）
                     取小数表示半透明，整数部分的0可以省略不写，如：0.5  / .5
    4、颜色的十六进制表示法
       把三原色的十六进制范围 0-255 转换成十六进制表示
       十六进制的取值范围：
         0-9 a-f
         0-255 换算成十六进制 00 - ff
       语法：
         #开头，跟上6位的十六进制，每两位一组表示一种三原色
       et：
          rgb(255,0,0)  #ff0000;
          rgb(0,255,0)  #00ff00;
          #09acef;
     5、短十六进制表示颜色
       #开头，采用三位十六进制代表三原色
       浏览器在解析时，会自动对每一位进行重复，补全成长十六进制
         #f00; -> #ff0000
         #000; -> #000000
         #fff; -> #ffffff

二、HTML标签分类

1、块级元素：

    特点：
       1、独占一行，不与其他元素共行
       2、可以手动调整宽高
       3、默认情况下，块元素的宽度与元素保持一致
         常见的块元素：body h1-h6 div ul ol li table form p

2、行内元素：

    特点：
         1、可以与其他元素共行显示
         2、不可以手动调整宽高大小
         3、实际的大小由元素的内容多少决定
          常见的行内元素：span label i b s u sup sub strong

  3、行内块元素：

     特点：
       1、可以共行显示
       2、可以手动调整宽高
         常见的行内块元素：img input button

三、尺寸与边框

1、尺寸

   1、属性：
         width height分别设置元素的宽高大小
         取值：像素值或是百分比
         注意：块元素和行内块元素可以设置宽高属性
   2、溢出处理
        溢出：内容超出元素尺寸范围，称为内容溢出
                  默认情况下，溢出部分仍然可见
        属性：overflow 可以处理内容溢出
        取值：
           1、visible：默认值，溢出部分仍然可见
           2、scroll ：添加滚动条，包含水平和垂直方向，不管该方向有没有发生内容溢出，都显示滚动条
           3、auto   ：自动添加滚动条，哪个方向发生内容溢出，就添加该方向上的滚动条
           4、hidden ：隐藏溢出部分

2、边框

   1、边框实现：
       属性：border
       取值：border-width  border-style  border-color
          边框宽度，样式，颜色，三个值缺一不可（即使有些值具有默认值）
             border-width：取值像素，设置四个方向的边框宽度
             border-style：边框样式
                         取值：solid     实线边框
                                   dashed 虚线边框
                                   dotted   点线边框
                                   double  双线边框
             border-color：设置边框颜色，取值色值
       注意：
         1、使用border属性为元素设置边框，是同时设置 上 右 下 左 四个方向的边框
         2、取消默认边框，border : none;（常用于按钮）
    2、单边边框的设置
        属性：
         1、border-top   ：   设置顶部边框
         2、border-right ：   设置右边边框
         3、border-bottom：设置底部边框
         4、border-left  ：    设置左边边框
       取值：border-width  border-style  border-color
    3、网页三角标制作：
       1、设置空的块元素，宽高为0
       2、为元素设置等宽的边框
       3、调整边框颜色，显示一个方向的边框，其余边框设置透明边框色 transparent
       注意：四个方向的边框缺一不可，缺少的话，边框会恢复成矩形边框，不再是三角
    4、轮廓线
         属性：outline
         取值：width style color
         注意：轮廓线围绕在元素内容区域四周，与边框类似，但有区别：轮廓线在网页中不占位，边框在网页中是实际占位的。
         取消轮廓线：outline:none;
    5、圆角边框
       1、属性：border-radius
       2、取值：像素值或者百分比
            1、border-radius:20px;
                一个值表示四个角都以20px做圆角
            2、border-radius:20px 40px;
                取两个值，按照上右下左顺时针方向设置圆角，从左上角开始依次取值，在给两个值的情况下，上下保持一致，左右保持一致。
            3、border-radius:10px 20px 30px;
                取三个值，缺少的第四个值于第二个值保持一致
            4、border-radius:10px 20px 30px 40px;
                分别设置四个角的圆角程度
       3、百分比取值实现元素形状改变
            border-radius:50%;
        注意：使用百分比设置圆角边框时，是参照当前元素的尺寸进行计算的
                  如果元素本身是长方形，设置50%的圆角会变成椭圆，如果元素本身是正方形，会变成正圆。
    6、盒阴影
       属性：box-shadow
       取值：offset-x offset-y blur spread color
            1、offset-x：阴影的水平偏移距离，取像素值
            2、offset-y：阴影的垂直偏移距离，取像素值
            3、blur    ：阴影的模糊程度，取像素值，值越大越模糊，越小越清晰
            4、spread  ：阴影的延伸距离（可选），取像素值，可以扩大阴影的范围
            5、color   ：设置阴影颜色（默认为黑色）
       注意：不管是浏览器窗口中还是元素本身，都存在坐标系，都以左上角为（0,0）点，向右，向下代表X和Y轴的正方向。

四、盒模型（框模型）

1、在CSS中，认为一切元素都是框，都是矩形区域

        盒模型：计算元素在文档中的实际占位情况
        盒模型的组成：margin（外边距），border（边框），padding（内边距），content（元素的宽高尺寸）
        元素在文档中的实际尺寸的计算：
          默认情况下：
               最终宽度=左右外边距+左右边框宽度+左右内边距+元素的宽度width
               最终高度=上下外边距+上下边框高度+上下内边距+元素的高度width

2、外边距（margin）

    1、margin表示外边距：元素边距与其他元素边框之间的距离
    2、取值：像素值
        1、margin:10px;
          表示设置上右下左四个方向都为10px的外边距
        2、margin:10px 20px;
          表示上下外边距为10px,左右外边距为20px;
        3、margin:10px 20px 30px;
          表示上右下左四个方向上的外边距分别为：10px 20px 30px 20px;
        4、margin:10px 20px 30px 40px;
          分别设置四个方向的外边距

3、单方向外边距的设置

   1、属性：
        1、margin-top :       上方外边距
        2、margin-right :     右边的外边距
        3、margin-bottom : 底部外边距
        4、margin-left :       左边外边距
   2、取值：像素值
          只给当前方向设置外边距，给一个值

4、特殊取值：

        1、margin:0;       设置元素外边距为0，常用于初始化页面样式，取消一些元素的默认外边距
        2、margin:0 auto;  设置左右外边距自动，用来实现元素的居中效果。auto只对左右外边距起作用
        3、取负值： 会移动元素的位置，负值表示向上向左移动元素，常用于页面元素位置的微调

5、自带默认外边距的元素：

     body h1-h6 p ul ol

6、外边距使用注意 ：

     1、垂直方向上的外边距，会发生合并，取较大的值
     2、水平方向上的外边距，会发生叠加，元素之间的距离较大
     3、为子元素添加距上的外边距，作用于父元素上：
       解决：
           1、为父元素设置上边框：（可以使用透明色）
           2、为父元素添加顶部的内边距： padding-top:0.1px;

五、内边距

1、元素内容与元素边框之间的距离，称为内边距

2、属性：padding

     取值：像素值或百分比
         1、padding: 10px;
            设置上右下左四个方向的内边距
         2、padding: 10px 20px;
            设置上下内边距为10，左右的内边距为20
         3、padding：10px 20px 30px;
            设置上下内边距分别为10、30，左右内边距为20
         4、padding: 10px 20px 30px 40px;
            设置上右下左四个方向的内边距

3. 单方向内边距的设置

     1、属性：
         padding-top：内容与元素顶部边框之间的距离
         padding-right：内容与元素右边框之间的距离
         padding-bottom：内容与元素底部边框之间的距离
         padding-left：内容与元素左边框之间的距离
     2、取值为像素

4、默认带有内边距的像素

       ol ul input td...

5、清除浏览器默认内外边距

       body,h1,h2,h3,h4,h5,h6,p,ul,ol,input{
         margin:0;
         padding:0
       }
      *注意：input（加不加都行）

六、设置盒模型的计算方式

  et：
       div:{
           width:200px;
           height:200px;
           border:10px solid red;
           margin:10px;
           padding:10px;
       }
     则div在文档中实际占据的尺寸为260*260

1、属性：box-sizing

     作用：指定盒模型的计算方式
     取值：
         1、coutent-box：默认值
            元素的width height属性只能用来规定内容的尺寸，如果元素设置内外边距和边框，最终在文档中占据的尺寸由各种值相加得到。
         2、border-box：
             元素的width height属性，规定的是包含边框，内边距和内容在内的尺寸
             et：
                div:{
                    box-sizing:border-box;
                    width:200px;
                    height:200px;
                    border:10px solid red;
                    margin:10px;
                    padding:10px;
                }
            则div在文档中实际占据的尺寸为220*220