CSS学习笔记

这篇非常水，肯定有很多不准确的表述，就是记录下一些我不知道还有一些常用的内容。

根据存放位置的优先级

位置	优先级
单独css文件	低
html头部	↓
标签属性	高

选择器

• 标签选择器

  div{
      
  }
  

• id选择器

  #id{
  
  }
  

• class选择器

  .class{
  
  }
  

• 层级选择器

  /*可以定位某一标签*/
  .class1 div p a{
      
  }
  /*也可以定位某一class*/
  .class1 div p .class2{
      
  }
  

• 组合选择器

  .class1,.class2,.class3{
      
  }
  

常用到的是后三种，id选择器最不常用。

一些样式

.class{
    /*颜色*/
    /*颜色有3种定义方法*/
    color: red;
    color: #44CCFF;
    color: rgb(0,0,0)
    /*背景色*/
    backgroud-color: aqua;
    /*字体大小*/
    font-size: 30px;
    /*高度没有百分比*/
    height: 200px;
    /*宽度可以有百分比,按照父亲相对占比*/
    width: 100%;
    
    /*背景图片相关*/
    /*背景图要显示需要给其修饰的div分配高度宽度，相当于用纸挡住图片，给其挖洞才能看到图片本身*/
    backgroud-image: url(xxx);
    /*如果图片不足以填充所谓的洞，默认是重复，可以修改填充规则，如下就是不重复*/
    backgroud-repeat: no-repeat;
    /*通过设置偏移量，可以控制显示图片的某部分。*/
    /*可以将几张小图片整成一张大图片，通过控制位置显示不同图片。为了减少图片请求次数、方便图片管理？*/
    backgroud-position: 50px 50px;
    
    /*display*/
    /*不仅不显示内容，还不占位置*/
    /*常用于模拟对话框、菜单栏*/
    display: none;
    /*只是不显示内容，但还是占相应位置*/
    visibility: hidden;
    
    /*让块级标签显示内联标签的特性*/
    display: inline;
    /*让内联标签显示块级标签的特性*/
    display: block;
    /*既显示内联标签特性又显示块级标签特性*/
    display: inline-block;
    
    /*z-index表示层级，数值越大越靠上面*/
    z-index: 10;
    
    /*透明度,范围在0-1*/
    opacity: 0.4;
    /*在定义backgroud-color时候也可以定义透明度,最后一个变量为透明度*/
    backgroud-color: rgba(..,..,..,..);
}

和float有关的一些知识

<div style="width: 500px;">
    <!--下面两个子标签宽度分别占父级标签宽度的20%和80%-->
    <div style="width: 20%; float: left"></div>
    <div style="width: 80%; float: left"></div>
    <!--使用float后，子标签无法撑起父标签体，用这个比较low的办法可以解决-->
    <div style="clear: both;"></div>
</div>

边距

• margin：外边距（本身不增加）
• padding：内边距（本身增加）

position

属性	用法
relative	与absolute配合使用，absolute会找父级标签中最近的带有relative标签，定位在这个标签对应的区域内的位置
absolute	固定位置，滚动移动
fixed	固定，窗口