2018-11-20

颜色的单位

使用RGB值来表示不同的颜色

- 所谓的RGB值指的是通过Red Green Blue三元色，
    通过这三种颜色的不同的浓度，来表示出不同的颜色
  十六进制：
    0 1 2 3 4 5 6 7 8 9 a b c d e f
    00 - ff
    00表示没有，相当于rgb中的0
    ff表示最大，相当于rgb中255

字体的样式

通过font-family可以指定文字的字体

 /* font-family: arial, 微软雅黑;*/
  浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用
  在开发中，如果字体太奇怪，用的人太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果

字体的分类

在网页中将字体分成5大类：

    serif（衬线字体）
    sans-serif（非衬线字体）
    monospace （等宽字体）
    cursive （草书字体）
    fantasy （虚幻字体）
可以将字体设置为这些大的分类，浏览器会自动选择指定的字体，并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体

字体的其它样式

font-style可以用来设置文字的斜体

            - 可选值：
                normal 默认值，文字正常显示
                italic 文字会以斜体显示
                oblique 文字会以倾斜的效果显示
            - 大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique效果是一样的
            - 一般我们只会使用italic
                           /*   font-style: italic;*/

font-weight可以用来设置文本的加粗效果

            - 可选值：
                normal 默认值，文字正常显示
                bold 文字加粗显示
        该样式也可以指定100-900之间的9个值
            但是由于用户的计算机往往没有这么多级别的字体，所以200有可能比100粗，但也有可能是一样的
  /*  font-weight: bold;*/

font-variant可以用来设置小型大写字母

            - 可选值：
                normal 默认值，文字正常显示
                small-caps 文本以小型大写字母显示
        小型大写字母：
            将所有的字母都以大写形式显示，但是小写字母的小型大写，要比大写字母小一些
  font-variant: small-caps;

字体样式

                    1
                    /*设置一个文字大小*/
        font-size: 50px;
        /*设置一个字体*/
        font-family: 华文彩云;
        /*设置文字斜体*/
        font-style: italic;
        /*设置文字加粗*/
        font-weight: bold;
        /*设置一个小型大写字母*/
        font-variant: small-caps;
            2
              在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式
        可以将字体的样式值统一写在font样式中，不同的值之间使用空格隔开
        使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值
        但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
        实际上使用简写属性也会有一个比较好的性能
        
        /*font: bold italic small-caps 60px "微软雅黑"；*/

行间距

行间距 = 行高 - 字体大小

通过设置line-height可以间接的设置行高

        可以接收的值：
            1.直接接收一个大小
            2.可以指定一个百分数，则会相对于字体去计算行高
            3.可以直接传一个数值，则行高会设置字体大小相应的倍数
 
    /*  line-height: 1;
        font-size: 20px;
    }
.box{
        width: 200px;
        height: 200px;
        background-color: #bfa;*/
        对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中
    /*  line-height: 200px;
    }
    .p2{
        line-height: 50px;*/
        在font中也可以指定行高
        在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
            /*font: 30px "微软雅黑";}*/

文本的样式

text-transform可以用来设置文本的大小写

        可选值：
            none 默认值，该怎么显示就怎么显示，不做任何处理
            capitalize 单词的首字母大写，通过空格来识别单词
            uppercase 所有的字母都大写
            lowercase 所有的字母都小写
                      /*text-transform: lowercase;*/

text-decoration可以用来设置文本的修饰

        可选值：
            none：默认值，不添加任何修饰，正常显示
            underline 为文本添加下划线
            overline 为文本添加上划线
            line-through 为文本添加删除线
        /*text-decoration: line-through;*/
        超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
        如果需要去除超链接的下划线则需要将该样式设置为none*/
        /*text-decoration: none;*/

letter-spacing可以指定字符间距

        /*letter-spacing: 10px;*/
        word-spacing可以设置单词之间的距离，实际上就是设置词与词之间空格的大小
        /*word-spacing: 100px;*/

text-align用于设置文本的对齐方式

        可选值：
            left 默认值，文本靠左对齐
            right 文本靠右对齐
            center 文本居中对齐
            justify 两端对齐
                - 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
            /*text-align: justify;*/

text-indent用来设置首行缩进

        这个值一般都会使用em作为单位
        当给它指定一个正值时，会自动向右侧缩进指定的像素
        如果为它指定一个负值，则会向左移动指定的像素
        通过这种方式可以将一些不想显示的文字隐藏起来
        /*text-indent: -99999px;*/

盒子模型

内容

    使用width来设置盒子内容区的宽度
        使用height来设置盒子内容区的高度
        width和height只是设置的盒子内容区的大小，而不是盒子的整个大        小，盒子可见框的大小由内容区，内边距和边框共同决定
      /*width: 300px;
        height: 300px;*/
        设置背景颜色
        background-color: #bfa;
        为元素设置边框
            要为一个元素设置边框必须指定三个样式
                border-width:边框的宽度
                border-color:边框颜色
                border-style:边框的样式

边框

        使用border-width可以分别指定四个边框的宽度
        如果在border-width指定了四个值
            则四个值会分别设置给上、右、下、左，按照顺时针的方向设置的
        如果指定三个值
            则三个值会分别设置给上、左右、下
        如果指定两个值
            则两个值会分别设置给上下、左右
        如果指定一个值，则四边全都是该值

        除了border-width，CSS中还提供了四个border-xxx-width
            xxx的值可能是top right bottom left
            专门用来设置指定边的宽度
        /*border-width:10px 20px 30px 40px;
        border-width:10px 20px 30px;
         border-width:10px 20px;
        border-width:10px;
        border-top-width: 100px;*/
     设置边框的颜色
         * 和宽度一样，color也提供四个方向的样式，可以分别指定颜色
         * border-xxx-color
        
        /*border-color: red;
        border-color: red yellow orange blue;
        border-color: red yellow orange;
        border-color: red yellow*/

        
         * 设置边框的样式
         *  可选值：
         *      none，默认值，没有边框
         *      solid 实线
         *      dotted 点状边框
         *      dashed 虚线
         *      double 双线
         * 
         * style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边
        
        border-style: double;
        border-style: solid dotted dashed double;
    }

设置边框

            大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
      /*  border-width: 10px;
        border-color: red;
        border-style: solid;*/
  border
            - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
            - 而且没有任何的顺序要求
            - border一指定就是同时指定四个边不能分别指定
        border-top border-right border-bottom border-left
            可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
    /*  border: red solid 10px;
        border-left: red solid 10px;
         border-top: red solid 10px;
        border-bottom: red solid 10px;
        border-left: red solid 10px; 
        border: red solid 10px;
        border-right: none;*/

内边距

内边距（padding），指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：

            padding-top
            padding-right
            padding-bottom
            padding-left
        内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

        盒子的大小由内容区、内边距和边框共同决定
        盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
        盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
  设置上内边距
        /*padding-top: 100px;
        设置右内边距
        padding-right: 100px;
        padding-bottom: 100px;
        padding-left: 100px;*/
      使用padding可以同时设置四个边框的样式，规则和border-width一致
        /*padding: 100px;
        padding: 100px 200px
        padding: 100px 200px 300px;
        padding: 100px 200px 300px 400px;*/
创建一个子元素box2占满box1
    .box2{
        width: 100%;
        height: 100%;
        background-color: yellow;

外边距

外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置

        盒子有四个方向的外边距：
            margin-top
            margin-right
            margin-bottom
            margin-left

        由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置
     设置上外边距，即盒子的上边框与其他盒子的距离
        /*margin-top: 100px;*/
        /*左外边距*/
        /*margin-left: 100px;*/
        /*设置右和下外边距*/
        /*margin-right: 100px;
        margin-bottom: 100px;*/
        外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
        /*margin-left: -100px;
        margin-top: -100px;
        margin-bottom: -100px;*/
        /*margin-bottom: -100px;*/
        margin还可以设置为auto，auto一般只设置给水平方向的margin
        如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
        垂直方向外边距如果设置为auto，则外边距默认就是0
        如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中
        所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中
        /*margin-left: auto;
        margin-right: auto;*/
        /*margin-top: auto;*/
  外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样
        */
        /*margin: 10px 20px 30px 40px;*/
        margin: 0 auto;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: yellow;