<CSS>总结：知识点

2018-05-29 本文已影响21人玉圣

一、引入：

1、站点图标（logo）的引入

在HTML中的<head> 标签中，通过link进行引入
快捷方式：link:favicon + TAB键 可直接生成
示例：

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    .......
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="img/logo.ico" type="image/x-icon">
    ........
</head>

二、标签样式：

1、textarea 的边框等

在使用textarea 的时候，系统会自动添加边框和四边线条（一般显示为蓝色），而且可以自由调整大小，这些可以通过css去除掉

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 400px;
            height: 100px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .content {
            width: 400px;
            height: 100px;
            border: none;   /*去除边框*/
            resize: none;   /*大小不可改变*/
            outline: none;  /*去除元素周围的线条*/
        }
    </style>
</head>
<body>
<div>
    <textarea class="content"></textarea>
</div>
</body>
</html>

textarea样式修改.gif

2、字体样式（@font-face）：

2.1、准备工作：

需要先将美工切好的图标，生成字体相关的文件
生成地址：https://icomoon.io/app/#/select
生成图标

2.2、设置样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体图标</title>

    <style>
        @font-face {
            font-family: myfont;
            src:
                url("../fonts/icomoon.eot") format("embedded-opentype"),
                url("../fonts/icomoon.svg") format("svg"),
                url("../fonts/icomoon.ttf") format("truetype"),
                url("../fonts/icomoon.woff") format("woff");
        }

        [class^="icon-"],
        [class*=" icon-"] {
            width: 100px;
            height: 50px;
            font-family: myfont;
            font-style: normal;
        }

        .icon-1::before {
            content: "\e900";
            font-size: 13px;
        }
        .icon-2::before {
            content: "\e926";
            font-size: 13px;
        }
        .icon-3::before {
            content: "\e927";
            font-size: 13px;
        }
        .icon-4::before {
            content: "\e94a";
            font-size: 13px;
        }

    </style>

</head>
<body>
<div>
    <div class="icon-1"> 00001</div>
    <div class="icon-2"> 00002</div>
    <div class="test icon-3"> 00003</div>
    <div class="icon-4"> 00004</div>
</div>
</body>
</html>

显示效果

3、样式穿透：

如果当前的页面中引入了其他的js框架，要修改其中的样式，而当前页面的样式又是被scoped （限定当前页面使用）修饰，则可以通过样式穿透的符号>>> 来不受scoped 的约束，如下：

/*.swapper-active表示其他引入的框架使用的样式*/
 .wrapper >>> .swapper-active {
     width: 100%;
     height: 100%;
     overflow: hidden;
     
     /*其他样式代码...*/
 }

三、图片样式：

1、轮播图中图片的适配

1.1、说明：

在开发中，如果需要考虑到不同设备（PC或手机客户端）图片的适配，就需要进行大小图片的宽高适配和变换处理。
一般需要准备两套图片，一套（超大尺寸）用于PC等大屏页面中，另一套（小尺寸）用于手机等小屏页面中
样式的设置：
- 大屏页面中需要设置background-size: cover 样式等
- 小屏页面中需要设置background-size: 80% 样式等 (注：这里的百分比依据实际情况设定)

1.2、示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图的图片适配问题</title>
    <style>
        div {
            width: 1000px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        @media screen and (max-width: 768px){
            .test {
                background: url("imgs/pic_650x400.png") no-repeat center center;
                background-size: 100%;
            }
        }

        @media screen and (min-width: 768px){
            .test {
                background: url("imgs/pic_2000x400.png") no-repeat center center;
                background-size: cover;
            }
        }
    </style>

</head>
<body>
<div class="test"></div>
</body>
</html>

1.3、轮播图宽高适配方式二

如果当网速较差时，当图片还未加载出来的时候，轮播图下面的内容可能会被显示在轮播图的位置，就可以尝试使用如下方式：
（比如一张640x240大小的图片，其高宽之比为：240/640*100%=37.5%）

  .wrapper {
      width: 100%;
      height: 0;
      overflow: hidden;
      padding-bottom: 37.5%;
  }