CSS总结（四）

最新推荐文章于 2021-12-22 11:14:11 发布

aojinkun2397

最新推荐文章于 2021-12-22 11:14:11 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/chen88/p/11587272.html

版权

精灵图的使用

精灵图：将很多的小图片集成做成一张大图

background-position: 第一个表示水平方向，第二个表示垂直方向

.box {
   width: 28px;
   height: 28px;
   border: 1px solid #000;
   background: url('./images/sprite_fs@1x.png') no-repeat;
 }
 .box:nth-child(2) {
   background-position: -46px 0;
 }

字体图标的使用

阿里妈妈矢量图

选择合适的图标：

然后点击右上角购物车下载代码：

第一种使用方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <style>
    .iconfont {
      font-size: 100px;
      font-weight: 600;
      color: pink;
    }

    /*这种使用方式作为了解 ，一般不用*/
  </style>
</head>
<body>
  <i class="iconfont icon-all"></i>
  <i class="iconfont icon-back"></i>
  <i class="iconfont icon-delete"></i>
</body>
</html>

第二种使用方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="fonts/iconfont.js"></script>
  <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
       color: pink;
    }
    /*注意：这种方式不推荐使用*/
  </style>
</head>
<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-all"></use>
    <!-- <use xlink:href="#icon-back"></use> -->
  </svg>
  <svg class="icon" aria-hidden="true">
    <!-- <use xlink:href="#icon-all"></use> -->
    <use xlink:href="#icon-back"></use>
  </svg>
</body>
</html>

第三种使用方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /*第一步：先自定义字体图标的类型   特别注意文件路径*/
    @font-face {
      font-family: 'iconfont';
      src: url('./fonts/iconfont.eot');
      src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('./fonts/iconfont.woff') format('woff'),
      url('./fonts/iconfont.ttf') format('truetype'),
      url('./fonts/iconfont.svg#iconfont') format('svg');
  }
  /*第三步：将自定义的字体图标类型应用到引入的字体图标上*/
  .iconfont {
    font-family: 'iconfont';
    font-style: normal;
    color: pink;
    font-weight: 600;
  }
  </style>
</head>
<body>
  <!-- 第二步：挑选相对的字体图标的Unicode编码 -->
  <i class="iconfont">&#xe696;</i>
  <i class="iconfont">&#xe866;</i>
</body>
</html>

定位

组成：
1.定位模式
1）静态定位
2）相对定位
3）绝对定位
4）固定定位

2.偏移量元素在页面上移动的距离（水平方向、垂直方向）

偏移量的表示：
      top:  定位的元素距离参考的元素的上面的距离
      left: 定位的元素距离参考元素左边的距离
      bottom: 定位元素距离参考元素下面的距离
      right:定位元素距离参考元素右边的距离

静态定位：

HTML标准流中的元素的默认定位就是静态定位

静态定位的特点：

1.静态定位的元素遵循HTML的规范

2.静态定位的元素不能设置有效的偏移量

相对定位：

.box {
   width: 200px;
   height: 200px;
   background: blue;
   /*设置一个相对定位*/
   position: relative;
  /* top: 200px;
   left: 200px;*/
   /*right: 50px;*/
   left: -50px;
}

相对定位的特点：

1.相对定位的元素不脱标，仍然占据标准流中的位置

2.相对定位不能改变元素的显示方式

3.相对定位的元素是参照元素本身原来的位置来移动的

绝对定位:

.one {
  width: 200px;
  height: 200px;
  background: pink;
  /*设置一个绝对定位、   absolute:绝对的，决定的*/
  position: absolute;
  top: 100px;
  left: 100px;
}

绝对定位的特点：

1.脱标，不占位置

2.绝对定位改变元素的显示方式（针对行内元素）

3.如果元素有嵌套关系，子元素绝对定位，而父辈元素都是静态定位，那么这个绝对定位的子元素参照body移动位置；

如果父辈元素中有非静态定位的元素，那么这个绝对定位的子元素参照这个非静态定位的父辈元素移动位置

如果父辈元素中有多个非静态定位的元素，那么这个绝对定位的子元素参照离自身最近的父辈元素移动位置（就近原则）

子绝父相：

定位的日常用法：子元素绝对定位，父辈元素相对定位

这样可以父元素脱标从而造成页面布局混乱

固定定位：

.box {
  width: 100%;
  height: 100px;
  background: pink;
  /*设置固定定位*/
  position: fixed;
  top: 10px;
}

固定定位的特点:

1.脱标，不占位置

2.改变元素呢的显示方式（行内元素）

3.固定定位始终都是参照body来移动位置

圆角边框

/*设置圆角边框*/
  border-radius: 50%;/*圆*/

  /*border-radius: 20px; 表示元素四个方向的圆角大小都是20px*/

  /*border-radius: 5px 30px;第一个值表示左上角和右下角，第二个值表示右上角和左下角 */

  /*border-radius: 10px 50px 100px; 第一个值表示左上角，第二个值表示右上角和左下角（对角），第三个值表示右下角。*/

  /*border-radius: 10px 30px 50px 100px;左上角、右上角、右下角、左下角的圆角大小*/

.box1 {
  width: 500px;
  height: 200px;
  background: blue;
  /*border-radius: 50%;*/
  border-radius: 100px;
  /*background-image: radial-gradient(red,yellow,blue,green,pink);*/

}

转载于:https://www.cnblogs.com/chen88/p/11587272.html

aojinkun2397

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结（四）

精灵图的使用精灵图：将很多的小图片集成做成一张大图background-position: 第一个表示水平方向，第二个表示垂直方向.box { width: 28px; height: 28px; border: 1px solid #000; background: url('./images/sprite_fs@1x.png') no-repeat...
复制链接

扫一扫