整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

「CSS」常用单位，box-sizing，字体图标，

「CSS」常用单位，box-sizing，字体图标，定位原理

m 单位

.CSS { font-size:16px; }
  • 上下文定义 font-size rem 就会按这个值定义
  • em: 根据元素的上下文来确定它的值 1em=16px

rem 单位

html{ font-size:16px; }
  • 根元素定义 font-size rem 就会按这个值定义
  • rem: 根据根元素的字号来设置 1rem=10px;

box-sizing

盒模型, 定义边界是否包含 padding 和 border 的值
box-sizing:border-box

  • 包含 padding 和 border 的值

box-sizing:content-box

  • 转为标准盒子，不含 padding 和 border 的值（默认）

CSS 初始化

一般我们写 CSS 样式都会先写初始化

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
</style>
  • 推荐 CSS 样式初始化写法

vh 和 vw 视口 单位

浏览器用于显示文档的界面就是视口
手机端为了显示全 PC 界面，默认为 980px

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • width=device-width 宽度对于当前设备宽度

浏览器设备当前界面默认被等分为 100

  • vh: 1vh=视口高度的 1/100 ， vh(view hgight)
  • vw: 1vw=视口宽度的 1/100 ， vw(viem width)
<!--  例：定义宽为 50%，高为 25% -->
<style>
  .box {
    background-color: lightgreen;
    width: 50vw;
    height: 25vh;
  }
</style>

字体图标

参考网址：https://www.iconfont.cn/

方法一：Unicode 方式

<style>
  /* 自定义字体 */
  @font-face {
    font-family: "my_iconfont";
    src: url("font_ico/iconfont.eot");
    src: url("font_ico/iconfont.eot?#iefix") format("embedded-opentype"), url("font_ico/iconfont.woff2")
        format("woff2"), url("font_ico/iconfont.woff") format("woff"), url("font_ico/iconfont.ttf")
        format("truetype"), url("font_ico/iconfont.svg#iconfont") format("svg");
  }
  /* 定义一个类来引用自定义的字体my_iconfont */
  .iconfont2 {
    font-family: "my_iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

引入到 html 中
<span class="iconfont2"></span>

方法二：Font class 方式

  • 第一步：引入项目下面生成的 fontclass 代码：

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

  • 第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx">

定位原理与应用

https://www.php.cn/code/36264.html
position:statkic 默认定位
控制偏移：

top: 5em;
left: 4em;
right: 3em;
bottom: 2em;
  • 相对定位
    position:relative
    相对于他在的文档流中的父级或上级进行定位
  • <style> .box { position: relative; top: 5em; left: 4em; } </style>

用图像覆盖图标可以为你的网站交互细节或一组功能加深印象。本文内容将分为两部分，第一部分创建结构并附加图标的链接。在第二部分中，我们将使用CSS进行设计。

创建结构：在本节中，我们将创建一个基本结构，并为这些图标附加Font-Awesome的CDN链接，这些图标将用作悬停时的图标。

“字体真棒”中的图标的CDN链接：

<link rel=” stylesheet” href=““ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

HTML代码：

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        Image Overlay Icon using HTML and CSS  
    </title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
<body> 
    <div class="container"> 
        <h1>GeeksforGeeks</h1> 
        <b>Image Overlay Icon using HTML and CSS</b> 
        <div class="img"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
                 alt="Geeksforgeeks"> 
            <div class="overlay"> 
                <a href="#" class="icon"> 
                   <i class="fa fa-user"></i> 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 

</html>

设计结构：在上面内容中，我们创建了将用作图像叠加图标的基本网站的结构。在这部分内容中，我们将设计图像叠加图标的结构。

CSS代码：

<style> 
    body { 
        text-align: center; 
    } 

    h1 { 
        color: green; 
    } 

    /* Image styling */
    img { 
        padding: 5px; 
        height: 225px; 
        width: 225px; 
        border: 2px solid gray; 
        box-shadow: 2px 4px #888888; 

    } 

    /* Overlay styling */
    .overlay { 
        position: absolute; 
        top: 23.5%; 
        left: 32.8%; 
        transition: .3s ease; 
        background-color: gray; 
        width: 225px; 
        height: 225px; 
        opacity: 0; 

    } 

    /* Overlay hover */
    .container:hover .overlay { 
        opacity: 1; 
    } 

    /* Icon styling */
    .icon { 
        color: white; 
        font-size: 92px; 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        text-align: center; 
    } 
</style>

最终解决方案：这是结合以上两部分内容后的最终代码。它将显示图像叠加图标。

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        Image Overlay Icon using HTML and CSS  
    </title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <style> 
        body { 
            text-align: center; 
        } 

        h1 { 
            color: green; 
        } 

        /* Image styling */ 
        img { 
            padding: 5px; 
            height: 225px; 
            width: 225px; 
            border: 2px solid gray; 
            box-shadow: 2px 4px #888888; 
        } 

        /* Overlay styling */ 
        .overlay { 
            position: absolute; 
            top: 23.5%; 
            left: 32.8%; 
            transition: .3s ease; 
            background-color: gray; 
            width: 225px; 
            height: 225px; 
            opacity: 0; 
        } 

        /* Overlay hover */ 
        .container:hover .overlay { 
            opacity: 1; 
        } 

        /* Icon styling */ 
        .icon { 
            color: white; 
            font-size: 92px; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            text-align: center; 
        } 
</style> 
</head> 

<body> 
    <div class="container"> 
        <h1>GeeksforGeeks</h1> 
        <b>Image Overlay Icon using HTML and CSS</b> 
        <div class="img"> 
            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
                 alt="Geeksforgeeks"> 
            <div class="overlay"> 
                <a href="#" class="icon"> 
                   <i class="fa fa-user"></i> 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 

</html>

最终输出效果：

最后送福利了，自己是从事了五年的前端工程师，整理了一份最全面前端学习资料，只要私信：“前端"等3秒后即可获取地址，

里面概括应用网站开发，css，html，JavaScript，jQuery，Ajax，node，angular等。等多个知识点高级进阶干货的相关视频资料，等你来拿

作为一个前端，经常写html文档，但是却很少去在意头部的标签有哪些，也很少在意每个标签的作用，下面我们来详细了解下。

头部的标签，也就是写在<head><head/>里。通常会有6个标签：　

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>

<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">

body {font-size:16px}
p {color:blue}
</style>
<script> document.write("Hello World!") </script>
</head> 
<body> 文档内容...... </body> 
</html>


一、<title>元素。

1.title 标签定义了文档的标题，在HTML文档中是必须的。它会展示在浏览器的工具栏上。

2.如果要展示一个图标，可以再加一个<link>标签，<link>标签的 rel属性为“icon”,后面的

href跟上图片的地址。

<link rel="icon" href="图片url">


二、<base>元素。

base标签描述了基本的链接地址，该标签作为HTML文档中所有的链接的默认链接

　<head>
　　<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" /> 
  </head> 　　
  <body> 　
   　<img src="banner7.jpg"/>
  </body>　

上面的img标签的src链接的地址就是base里的地址加上img里的地址。


三、<link>元素。

link标签定义了文档与外部资源之间的关系，它通常用于链接到样式表。

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>


四、<style>元素。

style标签定义了HTML文档的样式，这个我们经常会使用到，都不会陌生。


五、<meta>元素。

meta标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。它常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

// 编码格式定义
<meta charset="utf-8"> 
// 为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
// 为网页定义描述内容:
<meta name="description" content="头部标签 & 使用">
// 定义网页作者:
<meta name="author" content="Runoob">
// 每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

// 视图层的参数定义
<meta
name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
 //    content属性值 :
  //    width:可视区域的宽度，值可为数字或关键词device-width
  //    height:同width
  //    intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
  //   maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
  //   maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
  //   user-scalable:是否可对页面进行缩放，no 禁止缩放


六、<script>元素。

script标签用于加载脚本文件，比如说javascript,可以直接书写js,也能用于链接外部的js文件。

<script>
    document.write("Hello World!")
</script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

在线咨询
上一篇：如何撰写网站页面title标题
下一篇：sublime当中创建自定义代码段

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 疏勒县 长顺县 融水苗族自治县 南海区 洪湖市 天水 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服