Vue-CSS

发表于 更新于 分类于 阅读次数：

一、从背景图片中截取一段小图

在制作网页的时候如果要使用一幅图的某一部分的时候，可以用css里有一个非常有用的功能：background-position。

如下图：

YaQmE8.jpg

当我们要使用其中的某一个小图片来作为超链接的按钮的时候，就可以使用background-position来实现。

工作原理

背景图片默认放置在div的左上角，通过background-position可以改变图片的位置。

background-position有两个参数，第一个参数是将图片从div的左上角向左移动多少尺寸，第二个参数是将图片向上移动多少尺寸。

例如选取上图中第二幅小图 ，小图的宽度为20px 高度为25px 则：

1
2
3
4
5
6
7
<style>
    div {
          width:20px;
          height:25px;
          background:url(image.png)no-reapte 0 25px;
         }
</style>

二、消除a标签的默认留白间距

设置font-size: 0

1
2
3
4
<div class="demo">
    <a href="#">底部链接1</a>
    <a href="#">底部链接2</a>
</div>
1
2
3
4
5
6
.demo{
    font-size: 0;
}
.demo a{
    font-size: 14px;/*这里一定要设置，不然文本内容将不显示*/
}

如果是图片链接的话，则不需要设置.demo a。


三、通过链接定位页面中的元素

通常情况下，将网站的导航放在左侧的栏中，有时用来定位页面中的元素。

想链接到同一个Web页面中的多个不同部分时，可以使用锚点来命名。如果想创建一个指向另一个Web页面中的某个特定部分的链接，可在目标页面的文件名和锚点名称之间用一个#分隔。

1、在被定位元素中添加id="fruit"属性，在导航链接中定义href="#fruit"，便可以定位到id为fruit的div块。

2、要指向另一个Web页面中的某个特定部分，定义导航链接为href="index#fruit"。


四、内部元素超出外部元素定义的范围

box-sizing属性：允许您以特定的方式定义匹配某个区域的特定元素。

1
box-sizing: content-box|border-box|inherit;
值 描述
content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。

可以通过将box-sizing: border-box把框内元素限制在框内。


隐藏浏览器滚动条

1
2
3
body::-webkit-scrollbar {
  width: 0;
}

transition 同时指定多个属性过渡

1
transition: color 0.25s ease-in, border-color 0.25s ease-in;

防止图片溢出

1
2
3
img {
    max-with: 100%
}

让元素的宽度自适应内容的宽度

让元素（div p 等）根据字数的变化自动变宽，且元素始终紧紧包裹着内容。可以通过将元素 display 设置为 table 即可：

1
display: table

选择相同元素的第 n 个元素

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

下面我们来举例说明：

1
2
3
4
5
6
p:nth-child(1) // 匹配第一个 p 元素
p:nth-child(n) // 匹配每一个 p 元素
p:nth-child(n+4) // 匹配第 5，6，... 个 p 元素
p:nth-child(3n) // 匹配第 3，6，9，... 个 p 元素
p:nth-child(3n+1) // 匹配第 4，7，10，... 个 p 元素
...

另外还有 :first-child 选择第一个元素；:last-child 选择最后一个元素；:nth-last-child(n) 选择倒数第 n 个元素。

一般我们在列表中会用到这个属性来消除边界元素的 margin。


object-fit

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。常用于 img 和 video 标签。

  1. fill：不保证保持原有的比例，内容全部显示铺满容器。
  2. contain：保持原有尺寸比例，使图片的宽度完整的显示，高度自动缩放。
  3. cover：保持原有尺寸比例。高度铺满容器，宽度等比缩放，超出部分被剪掉。
  4. none：图片原有宽高不变，超出部分被剪掉，保留下来的内容使图片的正中央。

去除移动端点击时元素产生的背景色

1
-webkit-tap-highlight-color: transparent;

阻止选中文本

1
-webkit-user-select: none;