CSS day02

一.选择器详解
   1.子代选择器
       作用：通过元素的子代（一层嵌套）关系匹配元素。
         语法：选择器1>选择器2{样式声明}
   2.伪类选择器
       作用：匹配元素不同的状态
         语法：所有的伪类以:开始的
               选择器:伪类选择器{样式声明}
     伪类选择器分类：
            (1)链接伪类
                   :link 匹配元素尚未访问时的状态
                     :visited 匹配元素访问过的状态
                (2)动态伪类
                   :hover 匹配鼠标悬停在元素上时的状态
                     :active 匹配元素被激活时的状态
                     :focus  匹配元素获取焦点时的状态

          练习：
                    在页面中增加一个a标记，并设置以下效果：
                       1.链接未访问时，颜色为红色，没有下划线
                           （text-decoration:none;）。
             2.鼠标悬停时，文本颜色为黄色。
                         3.被激活时，文本为橙色。
                         4.访问后，文本颜色为绿色。
          在页面中再增加一个输入框，默认文本颜色为灰色，字体为斜体（font-style:italic）
                       1.被激活时，字体为非斜体(font-style:normal)。
                         2.获取焦点时，文本颜色为红色。
                        
   3.选择器的优先级
       权值：标识当前选择器的重要程度，权值越大的优先级越高。
         元素选择器  1
         类选择器    10
         伪类选择器  10
         ID选择器    100
         内联样式    1000
         选择器的权值加到一起，大的优先，权值相同，以后定义为主。
二.尺寸与边框
   1.单位
       1.尺寸单位
           px：像素（1024*768）
             in：英寸（1in=2.54cm）
             pt：磅（1pt=1/72in）表示文字大小
             cm：厘米
             mm：毫米
             em：相对单位（相对于元素本身字体的大小乘以倍数  ex:2em）
             rem：相对单位（相对于根元素字体的大小乘以倍数 3rem ）
             %：相对单位（50%）
     2.颜色单位（取值）
           1.英文单词（red,blue,black,yellow,orange...）
             2.rgb(r,g,b)
               r:red;
                 g:green;
                 b:blue;
                 r,g,b取值范围0-255
                 ex:
                 rgb(0,0,255)
       3.#rrggbb
               由6位16进制的数字和字母表示一个颜色
                 由0-9和A-F组成
                 #eeeeee 灰色
                 #000000 黑色
                 #ffffff 白色
       4.#rgb是上面的缩写形式
               #eeeeee-->#eee
             5.rgba(r,g,b,alpah)
               alpah:透明度，取值0-1的小数，值越小越透明
   2.尺寸属性
       1.作用
           改变元素的宽度和高度
         2.语法
           1.宽度
               width
                 min-width:最小宽度
                 max-width:最大宽度
       2.高度
               height
                 min-height:最小高度
                 max-height:最大高度
     3.页面中允许设置尺寸的元素
           1.所有块级元素都允许设置尺寸
               div,p,h1-h6,结构标记,ul,ol,dl
             2.行内块元素允许设置尺寸
               表单控件元素（单选按钮，复选框除外）
       3.本身具备width和height属性的元素
               img,table
         注意：大部分的行内元素是无法修改尺寸的。
   3.溢出处理
       当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。
         属性：overflow/overflow-x/overflow-y
         取值：
            1.visible 可见的，溢出可见，默认值
                2.hidden 隐藏的，溢出的内容全部隐藏，不可见
                3.scroll 显示滚动条，溢出时可用
                4.auto   自动，溢出时自动显示滚动条并可用
     练习：参考视频中效果，完成溢出处理
           (边框的设置：border:1px solid black;)
   4.边框
       1.边框的简写方式
           border:width style color;
             width:边框的宽度，以px为单位的数字
             style:边框的样式
                  取值：solid 实线
                              dotted 虚线（点）
                                    dashed 虚线（线）
       color:边框颜色，合法的颜色值，也可以为transparent 透明色
       注意：
                取消边框：border:0/none;

             练习：在网页中创建一个id为main的div元素，设置尺寸为200px*200px,并设置4个方向的边框为1px的宽度，实线，红色。（2分钟）
     2.单边定义
           只设置某一条边的三个属性。
             属性：
                border-top/bottom/left/right:width style color
       
       练习：在上面练习的基础上，设置上边框为2px 颜色为蓝色，边框的样式为虚线（dotted）
     3.单属性设置
           设置四条边框的某一个属性。
             属性：
               border-width/style/color:值;
                 ex:
                 border-color:red;
     4.单边单属性
           只设置某一条边的某一个属性
             属性：
               border-方向-属性：值;
       ex：
               设置上边框的颜色
                 border-top-color:red;
   5.边框倒角
       将元素的四个角，由直角倒成圆角。
         属性：
           border-radius:值;
             取值：以px为单位的数字 或者 百分比（圆形）
     单角设置：
           border-top-left-radius:左上角
             border-bottom-left-radius:左下角
             border-bottom-right-radius:右下角
             border-top-right-radius:右上角
   6.边框阴影
       属性：box-shadow
         取值：h-shadow v-shadow blur spread color inset;
         h-shadow:阴影在水平方向的偏移，必须值
                  取值为正，阴影向右偏移
                            取值为负，阴影向左偏移
     v-shadow:阴影在垂直方向的偏移，必须值
                  取值为正，阴影向下偏移
                            取值为负，阴影向上偏移
     blur:阴影模糊距离，取值越大，模糊效果越明显
         spread:阴影的尺寸，指定要在基础阴影上扩充出来的大小距离
         color:阴影的颜色
         inset:将默认的外阴影改为内阴影
         练习：
           1.在上午溢出练习基础上，当鼠标悬停在图片上时，为图片添加向右下方偏移的阴影效果，偏移尺寸为5px,阴影颜色为灰色。（2分）

             2.设置一个圆形的外发光效果（外阴影）（3分钟）
   7.轮廓
       轮廓指的是边框的边框，绘制于边框外的一条线。
         属性：
           outline:width style color;
             outline:none/0  取消轮廓
三.框模型（重点）
  1.什么是框模型
      框：页面上的元素皆为框
        框模型：box model盒子模型，定义了元素框处理元素的内容，内边距，外边距以及边框的一种计算方式。
        外边距：元素与元素之间的间距。
        内边距：元素边框与内容之间的间距。
        框模型的计算方式：
          元素实际占地宽度=左右外边距+左右内边距+左右边框+width
            元素实际占地高度=上下外边距+上下内边距+上下边框+height
  2.外边距
      1.什么是外边距
          围绕在元素边框外的空白间距，就是外边距。
    2.语法
          属性：
              margin:定义某元素四个方向的外边距
                margin-top/bottom/left/right:单边定义
      取值：
              1.以px为单位的数字
                2.取值为负数
                  让元素向着相反的方向移动
                    margin-left:取值为正，元素向右移
                                取值为负，元素向左移
          margin-top:取值为正，元素向下移
                               取值为负，元素向上移
          练习：页面中添加一个div元素，设置尺寸和边框，查看默认效果，然后设置div的左外边距为60px,查看页面效果，再将左外边距设为-60px查看页面效果（上外边距做同样的设置）。
                3.取值为%
                  外边距的值，父元素宽或高的占比
        4.取值为auto
                  自动计算外边距的值
                    实现块级元素的水平居中对齐
    3.简写方式
          1.margin:value 四个方向外边距
            2.margin:v1   v2
                    上下 左右
      3.margin:v1  v2  v3
                     上 左右 下
      4.margin:v1 v2 v3 v4
                     上 右 下 左（顺时针）
        4.自带外边距的元素
          p,h1-h6,body,ul,ol,dl,pre
            通过CSS Reset的方式来重置具备外边距的元素
            p,h1,h2,h3,h4,h5,h6,body,ul,ol,dl,pre{margin:0;}
    5.外边距的特殊效果
          1.外边距合并
              当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个外边距中较大的那个，如果两个值相同，取其中一个。
      2.行内元素和行内块元素
              1.行内元素垂直外边距无效，但左右外边距有效并会相加
                2.行内块元素，设置垂直外边距时，整行元素都会跟着发生改变。
      
              练习：
                  1.在页面中创建两个div，尺寸都是200*200，分别设置不同的背景；
                    2.在第二个div中添加一个子元素div，设置其尺寸为100*100，同时设置其背景颜色；
                    3.并设置子元素的上外边距为50px，观察页面效果
      3.外边距溢出
              在特殊的条件下，为子元素设置上边距时会作用到父元素上：
                  1.父元素没有上边框
                    2.为第一个子元素设置上外边距时
        解决方案：
                  1.为父元素增加上边框
                      弊端：对父元素的高度有影响
          2.使用父元素的内边距取代子元素的上外边距
                      弊端：对父元素的高度有影响
          3.在父元素的第一个子元素位置处，增加一个空的<table></table>