web基础

最新推荐文章于 2024-10-04 00:46:18 发布

CSDNweb92

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量95

点赞数 1

文章标签：字体图标前端开发居中布局 CSS 图标库

本文链接：https://blog.csdn.net/CSDNweb92/article/details/125228112

版权

一、字体图标的用法（三种）

1.本地使用字体图标：

<link rel="stylesheet" href="./fonts/iconfont.css">

例子：
  <i class="iconfont icon-auto class"></i>
    <i class="iconfont class">&#xe742;</i>
    <a href="#">
        <i class="iconfont">&#xe742;</i>
    </a>

2.线上字体图标：

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_3391737_27qg05rp516.css">
例子：
 <i class="iconfont icon-add-cart"></i>

3.子字体图标ucicode

  <i class="iconfont fonts"> &#xe7aa;</i>

拓展-字体图标的伪类使用：

  i::after{
            content: '\e7b2';
        }

<body>
    <i class="iconfont"></i>
</body>

二、盒子居中（三种方法）

1.marign居中

<style>
        .box{
            width: 600px;
            height: 600px;
            background-color: aqua;
            border: 1px solid red;
            margin: 0 auto  ;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin-left:200px ;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="son"></div>
    </div>
</body>

2.定位居中

<style>
        .box{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 0 auto  ;
            position: relative;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="son"></div>
    </div>

3.定位和marign

    <style>
        .box{
            width: 600px;
            height: 600px;
            background-color: aqua;
            margin: 0 auto  ;
            position: relative;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="son"></div>
    </div>
</body>