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把框内元素限制在框内。