「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 代碼：

第二步：挑選相應圖標并獲取類名，應用于頁面：

<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小時內與您取得聯系。

整合營銷服務商