欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-06 13:48:15
...

盒模型常用属性

  • 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 鼠标悬停逐渐改变
    ``

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

  1. @media(min-width:480px){
  2. html{
  3. font-size:12px
  4. }
  5. }
  6. /*当宽的像素最小为480px时,就执行里面的样式。*/

CSS像素单位

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

CSS常用选择器


  • 这个是id类选择器

    1. <style>
    2. .id{
    3. color:red;
    4. }
    5. </style>
    6. <div id="id">
    7. </div>
  • 这个是class类选择器

    1. <style>
    2. .class{
    3. color:red;
    4. }
    5. </style>
    6. <div class="class">
    7. </div>

    注意权限: id > class > 标签


  • 顺序选择器,:not取消选择器(不能空格)
    注意:not()选择器只支持火狐、谷歌、苹果safari
    1. <style>
    2. ul > :nth-of-type(2):not(li:nth-of-type(2)) {
    3. color: red;
    4. border: solid 1px;
    5. }
    6. </style>
    7. <ul>
    8. <li>1</li>
    9. <li>2</li>
    10. <li>3</li>
    11. <p>p</p>
    12. <p>p2</p>
    13. <p>p3</p>
    14. </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)倒数选择