CSS的一些开发使用技巧（更新中......）

最新推荐文章于 2024-09-21 23:59:03 发布

洛阳处处是月明

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量92

点赞数

分类专栏： css 文章标签： css html 小程序

本文链接：https://blog.csdn.net/weixin_45929885/article/details/120424126

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS开发使用技巧

文章目录

正在填补中…

字符超出固定宽度后显示省略号

<div class="container">
<div class="one">洛阳处处是月明洛阳处处是月明</div>
</div>

    .one{
        width:12rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

注意:width可以不设置,但是其他内容不可省略

利用flex设置浮动效果

左浮动: justify-content:flex-start;

右浮动:justify-content:flex-end;

html:

  <div class="container">
    <div class="one">

    </div>
  </div>

scss:

.container {
display:flex;
justify-content: flex-end;
    .one {
        width: 100px;
        height: 100px;
        background-color: green;
    }
}

另外一个特点: 顺序排放

 <div class="container">
    <div class="one">
      1
    </div>
    <div class="one">
      2
    </div>
  </div>

和float不同的地方是,flex所设置的元素并没有脱离文档流,不需要clearfix的设置.

对于背景图片的一些常用操作.

很多时候图片对元素的填充并不一定全部符合图片的比例.

<div class="one"></div>

本人所用图片为:1944*1622.(此图片从某官网copy的,切记不可商用.)

但想要呈现出正方形的背景.在不剪切的情况下:

.one{
    background:url("./../images/open-source.png");
    width:200px;
    height:200px;
}

结果为:

事实上,由于图片太大,且没有进行缩放,所呈现的只是图片的边角,而边角又正好是空白.

缩放:background-size

想要缩放很容易:

background-size: xxx;

一个值

scss设置:

.one{
    background:url("./../images/open-source.png");
    width:200px;
    height:200px;
background-size:50%;
}

百分比% : 指定背景图片相对背景区（background positioning area）的百分比

也就是说相对于该元素的长和宽的百分比进行设计.

由于刚刚所设内容为50%,所以可以一行呈现两个.

但是你可以发现,最后还有一部分被剪切,说明其实比例没变,(这个值指定图片的宽度，那么图片的高度隐式的为auto,表示宽度改变,长宽比例没变.)

两个值

.one{
    background:url("./../images/open-source.png");
    border:1px solid red;
    width:200px;
    height:200px;
background-size:50% 50%;
}

横向两个,竖向两个.仔细看可以看出每个图片的长度被拉伸了.

说明都是按照比例来的.

第一个值是按照宽度的比例来设置,

第二个值是按照长度的比例被设置的.

其实,你也可以对这两个值都是用px,em,rem,vh,vw等单位,但是这种方法灵活性不是很高,尤其是在图片是动态的情况下,你无法分辨出后端给你的到底比例是什么,所以个人从来不用.

虽然大致已经操作好了,那么常用操作:让图片背景全部占用此元素.可以往下看

contain和cover

.one{
    background:url("./../images/open-source.png");
    border:1px solid red;
    width:200px;
    height:200px;
background-size:100% 100%;
}

相对于原来的图片,你可以完全的看到,图片被拉伸了,而体验的效果远远不及原来的比例好.这样的话,又衍生出来一个cover和contain(但是本图片利用contain效果不太好.)

contain

.one{
    background:url("./../images/open-source.png");
    border:1px solid red;
    width:200px;
    height:200px;
background-size:contain;
}

结果为

效果不太好,因为出现了两个图片.

contain: 大致就是:不论宽度和高度,只要一个宽度/高度的比例率先能够撑满此元素的宽度/高度,那么高度/宽度就只按照比例来进行auto设置.

官方说法:缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。

这种方法很适合和元素的宽高比例一样的图片.但换了其他比例的图片就会出现平铺的现象.

cover

.one{
    background:url("./../images/open-source.png");
    border:1px solid red;
    width:200px;
    height:200px;
background-size:cover;
}

结果是图片的有些内容被遮挡住了.

cover解释:图片的宽高比例不变,但是宽和高必须要撑满整个元素.

官方解释:缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁

你会发现这种效果在此图片的内容虽然不错,但是很多图片使用了此方法会出现遮挡了重要内容的状况.

这就比较难受了.那么还可以使用background-position:xxx;

调整图片位置:background-position

关键字 center，用来居中背景图片。
关键字 top, left, bottom, right 中的一个。
两个值的语法: 一个定义 x 坐标，另一个定义 y 坐标。
百分比：
百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。值50%则代表图片的中点和容器的中点重合。

.one {
    background: url("./../images/open-source.png");
    border: 1px solid red;
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
}