【CSS】易忘知识点-课程笔记

一. 精灵图（sprites）的使用

移动背景图片位置，此时可以使用 background-position 。
移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
因为一般情况下都是往上往左移动，所以数值是负值。
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

css 复制代码

span {
    display: inline-block;
    background: url(images/abcd.jpg) no-repeat;
}
.p {
    width: 100px;
    height: 112px;
    /* background-color: pink; */
    background-position:  -493px -276px;
}
.i {
    width: 60px;
    height: 108px;
    /* background-color: pink; */
    background-position: -327px -142px;
}
.n {
    width: 108px;
    height: 109px;
    /* background-color: pink; */
    background-position: -215px -141px;
}
.k {
    width: 105px;
    height: 114px;
    /* background-color: pink; */
    background-position: -495px -142px;
}

二. 字体图标

字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用。

把下载包里面的 fonts 文件夹放入页面根目录下

字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2).Web Open Font Format( .woff )格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；

4).SVG( .svg )格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

2.在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。

一定注意字体文件路径的问题

 @font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

html 标签内添加小图标。
给标签定义字体。

span {
font-family: "icomoon";
}

注意：务必保证这个字体和上面@font-face里面的字体保持一致

三.CSS 三角制作

css 复制代码

 div {
 	width: 0; 
    height: 0;
    border: 50px solid transparent;
	border-color: red green blue black;
	line-height:0;
    font-size: 0;
 }

我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

四. 溢出的文字省略号显示

单行文本溢出显示省略号

单行文本溢出显示省略号--必须满足三个条件：

css 复制代码

  /*1. 先强制一行内显示文本*/
   white-space: nowrap;  （ 默认 normal 自动换行）
   
  /*2. 超出的部分隐藏*/
   overflow: hidden;
   
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;

多行文本溢出显示省略号（了解）

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

css 复制代码

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

五. 其他

鼠标样式 cursor

css 复制代码

 li {
 	cursor: pointer; 
 }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

css 复制代码

 input {
 	outline: none; 
 }

防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

css 复制代码

 textarea{ 
 	resize: none;
 }

vertical-align 属性应用

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式 ，但是它只针对于行内元素或者行内块元素有效。

语法：

css 复制代码

vertical-align : baseline | top | middle | bottom

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）

2.把图片转换为块级元素 display: block;

六.案例

1.京东价格条显示

html 复制代码

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    .price {
      margin: 10px auto;
      width: 160px;
      height: 24px;
      line-height: 24px;
      border: 1px solid red;
    }

    /* 加上浮动才能红色充满格子 */
    .price .miaosha {
      position: relative;
      float: left;
      height: 100%;
      width: 90px;
      text-align: center;
      background-color: red;
      color: #ffF;
      font-size: 14px;
      font-weight: 700;
      margin-right: 10px;

    }

    .price p {
      position: absolute;
      top: 0;
      right: 0;
      border-color: transparent white transparent transparent;
      border-style: solid;
      border-width: 24px 10px 0 0;
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
    }

    .old {
      font-size: 10px;
      color: gray;
      text-decoration: line-through;
      padding: 0 auto;
    }
  </style>
</head>

<body>
  <div class="price">
    <span class="miaosha">
      ￥1233
      <p></p>
    </span>
    <span class="old">￥2455</span>
  </div>

</body>

</html>

2.淘宝轮播图

左右箭头和下面原点表示

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>淘宝广告</title>
  <style>

    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    .tb-promo {
      position: relative;
      width: 846px;
      height: 472px;
      margin: 15px auto;
      background-color: pink;
    }



    .prev {
      position: absolute;
      top: 50%;
      margin-top: -20px;
      left: 0px;
      width: 30px;
      height: 40px;
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      background: rgba(255, 255, 255, .3);
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      border: 0;
    }

    .next {
      position: absolute;
      top: 50%;
      right: 0px;
      margin-top: -20px;
      width: 30px;
      height: 40px;
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      background: rgba(255, 255, 255, .3);
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
      border: 0;

    }

    .promo-nav {
      position: absolute;
      bottom: 16px;
      left: 50%;
      margin-left: -100px;
      width: 200px;
      height: 20px;
      background: rgba(255, 255, 255, .3);
      border-radius: 16px;

    }

    .promo-nav ul {
      text-align: center;
    }

    .promo-nav ul li {
      float: left;
      width: 16px;
      height: 16px;
      line-height: 16px;
      border-radius: 8px;
      margin: 2px 8px 2px 8px;
      background-color: #fff;
    }

  </style>
</head>

<body>
  <div class="tb-promo">
    <img src="images/tb.png" alt="">
    <button class="prev">&lt;</button>
    <button class="next">&gt;</button>
    <div class="promo-nav">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

</body>

</html>

3.页码显示

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页码</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      margin: 10px;
      text-align: center;
    }

    .box a {
      display: inline-block;
      height: 36px;
      width: 40px;
      line-height: 36px;
      background-color: rgb(196, 192, 192);
      border: 1PX solid gray;
      text-align: center;
      text-decoration: none;
      color: rgb(77, 76, 76);
    }

    .box .prev,
    .box .next {
      width: 80px;
      font-size: 14px;
    }

    .box .active {
      background-color: #fff;
      border: none;
    }

    .box input {
      width: 40px;
      height: 34px;
    }

    .box button {
      width: 40px;
      height: 36px;
      background-color: rgb(196, 192, 192);
      border: 1PX solid gray;
    }
  </style>
</head>

<body>
  <div class="box">
    <a href="#" class='prev'>&lt;&lt;上一页</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">...</a>
    <a href="#" class="next">&gt;&gt;下一页</a>到第
    <input type="text">页
    <button>确定</button>
  </div>
</body>

</html>