一天一个CSS属性

最新推荐文章于 2024-04-22 16:58:34 发布

rainbowdiary

最新推荐文章于 2024-04-22 16:58:34 发布

阅读量188

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43374360/article/details/110437254

版权

css 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

CSS单位

em

em:为css的相对单位，参照其父元素的fontSize；等于父元素的fontSize*em值

如果没有设置父元素的font-size；则参照html元素的font-size值；没有html则参照浏览器一般字体大小值16px。

rem

root em
rem也是css中相对单位，参照html的fontSize，没有则参照16px。
html:fontSize:12px ; fontSize:2rem==>24px

style{
	html{font-size:24px}
	div{height:10rem,width:10rem}
}
//div的宽高则都是240px，rem基于html的fontSize来的。
<html> <div>123</div> </html>

margin-top

div高度为0，如果设置了上边距，上边距会占据文档流。
如果该div下面的元素设置了margin-top会造成margin重叠

用于，一个页面，多个上下排列的模块，中间有间隔的，做统一的设置

父元素背景图片不包含第一个高度为0但是有上边距的元素

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-size

作用：设置背景图片大小；
初始值：

auto auto
以背景图片的比例缩放背景图片

值：

一个值：则是宽度值，高度值为auto
两个值：则第一个值为宽度值，第二个值为高度值

值的类型：

百分比：相对于背景区域的百分比
长度：在这里插入代码片
关键字：
- auto：以背景图片的比例缩放背景图片;如果背景图片比背景区域大很多，如果不设置background-size，则只会看到图片的左上角区域；
- contain：
- cover：

百分比
可以：

代码	含义
background-size: 100% 0.7rem;	设置背景图片的具体高度为0.7rem
background-size: 3rem;	设置背景图片的宽度为3rem，高度为auto（根据背景图片的比例缩放图片）
background-size: 100% 0.7rem;	设置背景的具体高度为0.7rem
background-size: 100% 0.7rem;	设置背景的具体高度为0.7rem

案例1：

背景图片比元素大，不设置background-size的情况下

元素大小：200&200；
背景图片900&900；
没有设置background-size；则默认background-size: auto auto; 即图片原始大小，不会进行缩放。
代码：

//样式
<style>
  .wrap{
        width: 200px;
        height: 300px;
        background-color: yellow;
        background-image: url('./img/1.png');
    }
</style>

//元素
 <div class="wrap">
       <div>元素大小：200*200</div>
       <div>背景图片：900*900</div>
 </div>

原图片：
查看样式：

只看到背景图片左上角

设置background-size: cover

cover英文意思：覆盖，盖住；指背景图片覆盖了整个背景区域
特点：

背景图片被缩放，图片的宽或者高覆盖背景区域
图片不会被压扁，保留了原来的宽高比
图片的宽或者高被剪裁，如果图片高覆盖的背景区域，图片宽度就会被剪裁
查看效果：

background-size: contain

contain英文翻译：包含,容纳；指的全部的背景图片包含在整个背景区域中

特点：

图片会被缩放
保留了图片的宽高比
图片全部被包含在背景区域
图片和背景区域大小不同时，背景区域会出现空白处，显示背景颜色

查看效果：

contain

background

不规则卡片效果
radial-gradient函数的效果

    <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()

滚动条

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ::-webkit-scrollbar {

      display: none
    }
  </style>
</head>

<body>
  <div style=" width:200px; height: 200px; overflow-y: scroll;">

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

    ckidzhh<br />

  </div>
</body>

</html>

面试题

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

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

rainbowdiary

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一天一个CSS属性

文章目录line-heightbackground-positionbackground-imagebackgroundradial-gradient函数理解一、pandas是什么？二、使用步骤1.引入库2.读入数据总结line-height属性值案例<div style="line-height:150%;font-size:16px;background-color: rosybrown;"> 父元素内容 <div style="font-size:30px;backg
复制链接

扫一扫