CSS盒模型常用属性,单位，选择器

盒模型常用属性

• width 宽
• height 高
• border 边框
• padding 边框内填充
• margin 边框外填充
• color 颜色
• background-color 背景颜色
• background-clip:content-box 背景被裁剪到内容框
• box-sizing:border-box 通过收缩内容大小，保证盒子占的大小不变
• overflow 内容溢出控制属性
• box-shadow 内容阴影
• outline: red solid 5px 绘制边框的外围的一个框,不会占据空间
• :hover{cursor:pointer} 鼠标悬停
• opacity:0.8 透明度
• transition：0.3s 鼠标悬停逐渐改变
  ``

---

媒体查询(适用于手机端像素大小来切换内容大小)

@media(min-width:480px){
    html{
        font-size:12px
    }
}
/*当宽的像素最小为480px时，就执行里面的样式。*/

---

CSS像素单位

• 10px(10像素)
• 1em(1*当前font-sizi或者根元素font-sizi大小)
• 1rem(1*根元素font-sizi大小)
• 50vh(始终占当前窗口50%高)
• 50vw(始终占当前窗口50%宽)

CSS常用选择器

---

• 这个是id类选择器

  
  <style>
    .id{
    color:red;
    }
  </style>
  <div id="id">
  </div>
  

• 这个是class类选择器

  
  <style>
    .class{
    color:red;
  }
  </style>
  <div class="class">
  </div>
  

  注意权限: id > class > 标签

---

• 顺序选择器，:not取消选择器(不能空格)

  注意：not()选择器只支持火狐、谷歌、苹果safari

  
  <style>
      ul > :nth-of-type(2):not(li:nth-of-type(2)) {
        color: red;
        border: solid 1px;
      }
  </style>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <p>p</p>
      <p>p2</p>
      <p>p3</p>
    </ul>
  

  :nth-of-type(1n+2)第二开始选择所有，1n+2等于1*0+2=2

  :nth-of-type(2)按顺序选择2

  :not(li:nth-of-type(2))取消选择

  :first-of-type{}选择第一个

  :last-of-type{}选择最后一个

  :nth-last-of-type(2)倒数选择

---