02css学习笔记

一、选择器：

      1、标签选择器：作用范围，当前页面中所有该类型的标签
      2、类选择器： a、使用.操作符进行定义，类名在后，没有空格，如：.blue
                  b.为应用该样式的标签纸添加 class，值为该类，注意类名没有点
      3、id选择器：使用#+元素的id值，注意#和id值之间没有空格（id值唯一）
          选择器优先级：id>类>标签
      4、交集选择器：span.left{}(没有空格)
      5、并集选择器：span,.left{}
      6、后代选择器：span .left{}(有空格)

二、字体：
     font-size：大小，单位px 还有em，rem，%
     font-weight：粗体100-900 bold
     font-style:是否斜体
     font-familly:字体库
     color:字体颜色
     opacity:透明度，0-1
三、文本：
        line-height:用于设置文字在容器中垂直居中，值为容器的高度值
        text-align:设置文字在容器中水平对齐方式，left/center/right
        overflow:溢出，用于设置当内容大于容器时，如何显示
        white-space:nowrap，当文本大于容器宽度时，设置不换行
        text-decoration:文本装饰，常用于取出a的下划线：none
        text-indent:缩进
        letter-spacing:字符间距////根据效果记属性
四、背景属性;
        background-color:背景色
        background-image：背景图，优先级高于背景色
        background-repeat；当容器大于背景图片是，背景图片的重复方式默认为x，y都平铺
        background-position；背景图片的位置，默认起始点为容器的左上角，记为（0.0）
        水平向右为x的正轴，垂直向下为y的正轴
        主要利用背景偏移进行截图展示，css sprites
        1、容器大小正好能够容纳要展示的图片
        2、要正确计算偏移量，偏移量为坐标
        3、讲重复的css代码提取，单独成为一个类样式、针对每一个图标编写对应的背景偏移css类
        4、在对应的容器内使用公共得类和专有的类class=“bg gg”

五、列表样式：list-style：设置列表的样式，最常用的值是none，记取消列表的符号或序号，噶属性用在ol、ul上。
六、超链接四种状态：
        a:link:未访问
        a:visited 已访问
        a:hover 鼠标悬浮
        a:active:鼠标点击不动  注意书写顺序
        其他元素可以使用：hover  active
七、盒子模型:
    ①盒子模型：-外边距：margin是指盒子与同级元素或父及之间的距离
    1/1个值：代表四个方向
    2/2个值：代表第一个上下 第二个左右
    3，3个值：.第一个是上第二个左右第三个下
    4.4个值：上 下 左 右
    技巧：1，布局时将盒子在浏览器水平居中：margin：0 auto；或者margin-left：auto；margin-right：auto；
          2，去除body与浏览器的间隙；body：{margin：0px；}
          -边框border：分四个方向border-left right top buttom；
          border-left-width：10px；
          border-left-color：blue；
          border-left-style：solid；
   缩写： border-left：10px blue solid：
         一个或四个边框：颜色可省略；位置可变
         padding:内容与盒子边框的距离‘用法和margin一样；
         3.对css进行reset、、*{margin:0px;padding:0px:}
   ②浮动：
     1，浮动会产生什么影响？
        如果一个元素的所以子元素都使用浮动，则该父元素的高度为0，后续布局受影响。
     2，如何消除浮动带来的影响？
       ①在父元素中添加一个块级元素；并设置clear：both
       ②为【父元素】添加如下样式类：.fix:after{content:""; 
                                          display:table: 
                                          clear:both:}
           <div class="fix"></div>
     浮动的两种情况：
           1兄弟节点：可以设置clear属性使标准流中其他盒子不受之前盒子的浮动影响
           2.父子节点：
               父级盒子中的所有盒子都采用浮动形式，
               若父级盒子未指定高度则父级盒子的高度为0，
               因为所有盒子都是浮动已脱离标准流。
                a\解决办法增加一个标准流的盒子
                b\ .fix:after{}
   ③边框：
      border-radius:边框圆角，俩个参数，以/分割x/y
      如果/后没有参数，则y和x值一样
      第一个为x 第二个为y
      1、代表4个角角度
      2、第一个左上+右下，第二个为右上+左下】
      3、第一个为左上 ，第二个为右上+左下，第三个右下
      4、顺时针一次
      box-shadow:盒子阴影
      1、第一个x轴偏移量，可正负
      2、第二个y轴偏移量，可正负
      3、blur-radius模糊半径，只为正，越大越模糊
      4、spread扩展半径，可正负 正外延大，负外延内向
      5、color 模糊颜色
      outline：轮廓(不占空间)在元素边框之外
      outline：宽度 颜色 样式
      outline：none；去掉输入元素的外框/轮廓线；
   ④负边距的使用户
      display：black；将行级标签变成块级标签
      display：none；隐藏；
      display:inline:将块级元素显示为行级元素
      display:inline-black:行内快
八、定位：
    1、相对定位：参照对象，元素的原始位置
       position：relative；
       方位属性的配合使用：top left z-index；
    2、fixed定位：参照对象：浏览器窗口
           属性：top left bottom right；
    3、绝对定位：绝对参照对象：参照最近的定了位的父元素，如果没有则为初始包含块html
       position：absolute；
       top left botton right；
       脱离文档流 不占位。
九、变形效果：transform：
      1、缩放函数scale（x，y）scaleX,scaleY
       大于1放大，小于1缩小
      2.平移函数translate（x，y）相对于元素的原始位置进行平移
      3、旋转函数rotate（角度）