一天一个CSS属性

CSS单位

em

em:参照其父元素的fontSize；等于父元素的fontSize*em值

rem

html:fontSize:12px ; fontSize:2rem==>24px
rem是参照html的fontSize

line-height

属性值
案例

<div style="line-height:150%;font-size:16px;background-color: rosybrown;">
  父元素内容
  <div style="font-size:30px;background-color: sienna;">
    Web前端开发
  </div>
</div>

百分比
    根据父元素字体大小计算
    先计算父元素的行高，然后让子元素继承
    行高=16px*150%=24px，子元素继承行高
em
    根据父元素字体大小计算
    先计算父元素的行高，然后让子元素继承
    行高=16px*1.5em=24px，子元素继承行高
数字
    根据子元素字体大小计算
    行高30px*1.5=45px

---

背景图像

background-image

值：

• url(’’) 引入本地图片

理解：

• 设置元素的背景图片

默认显示效果：

• 如果图片太大，会充满整个元素，元素的背景可能只会看到图片的一部分
• 如果图片大小比元素小，则repeat排列在元素的背景
• 背景图像在不占据border-box，占据content-box/padding-box，background-color之上

---

background-repeat

理解：

• 应用在background-image的图像上，设置图像的平铺效果，就像平时设置电脑桌面图片一样

值：

• repeat 【默认】
• no-repeat 【如下图所示，是了no-repeat之后的效果，background-color出来了】

---

background-position

理解：

• 应用在background-image背景图像上
• 控制背景图像在背景区域中的起始显示位置

CSS1:

• 2个参数值
• 默认值0%，0%；
• 第一个横坐标，第二个值纵坐标【背景区域的左上角】

三种值方式：

• xpos ypos: 关键字定位，应用的对齐规则；

  • xpos：
    • left【图像的左边与与元素的左边对齐】
    • center:背景图像的中心与元素的中心对齐
    • right；

• ypos：top|center|bottom

• x% y%： 百分比定位，应用坐标轴定位
  x = (对象的宽度 - 图像的宽度) * x%;y = (对象的高度 - 图像的高度) * y%;
  3
  . x y：表示使用长度值定位，应用坐标轴定位；是将背景图像的左上角，放置在对象的背景区域中（x, y）

• 值可以省略

  • 有一个值：则第二个值是center；
  • 有两个值：第一个是水平偏移【长度或百分比】，第二个垂直偏移【长度或百分比】
  • 所有值得方式都是简写成长度值得方式，默认0px 0px

• 相关写法：

  • background-position: left 10px top 15px; 【表示图像在左上角区域，且左边偏移10px，上边偏移15px，可以简写成10px 15px】
  • background-position: left top ; 【表示图像在左边边区域，偏移0px，上边偏移0px，可以简写成0px 0px】
  • background-position: left 10px ;【可以简写成：0px 10px】

  

---

background

不规则卡片效果

    <style>
      main {
    
    
        padding: 80px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }

      .progress-outer {
    
    
        width: 60%;
        height: 12px;
        border-radius: 8px;
        /* background-color: pink; */
        overflow: hidden;
        position: relative;
      }

      .progress-enter {
    
    
        height: inherit;
        background: rgba(180, 160, 120, .2);
      }

      .progress-bg {
    
    
        width: 60%;
        height: inherit;
        border-radius: 6px;
        background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%,
            #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
        background-size: 16px 16px;
        animation: panoramic 20s linear infinite;
      }

      @keyframes panoramic {
    
    
        to {
    
    
          background-position: 200% 0;
        }
      }

    </style>

   <main>
      <div class="progress-outer">
        <!--更好的扩展-->
        <div class="progress-enter">
          <div class="progress-bg"></div>
        </div>
        <!-- <span>60%</span> -->
      </div>
    </main>

radial-gradient函数

属于background-image属性，border之下，background-color之上

理解

radial-gradient() 径向渐变函数，CSS函数创建一个图像，该图像是由从原点发出的两种或多种颜色之间的逐步过渡组成的，他的形状是圆形或椭圆形
重复的径向渐变函数：repeating-radial-gradient()

---

面试题

如何实现左侧宽度固定，右侧宽度自适应的布局

小提示：这个问题面试官会要求说出几种解决方法。