「CSS」常用單位，box-sizing，字體圖標(biāo)，定位原理

m 單位

.CSS { font-size:16px; }

上下文定義 font-size rem 就會(huì)按這個(gè)值定義
em: 根據(jù)元素的上下文來(lái)確定它的值 1em = 16px

rem 單位

html{ font-size:16px; }

根元素定義 font-size rem 就會(huì)按這個(gè)值定義
rem: 根據(jù)根元素的字號(hào)來(lái)設(shè)置 1rem = 10px;

box-sizing

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

包含 padding 和 border 的值

box-sizing:content-box

轉(zhuǎn)為標(biāo)準(zhǔn)盒子，不含 padding 和 border 的值（默認(rèn)）

CSS 初始化

一般我們寫(xiě) CSS 樣式都會(huì)先寫(xiě)初始化

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
</style>

推薦 CSS 樣式初始化寫(xiě)法

vh 和 vw 視口單位

瀏覽器用于顯示文檔的界面就是視口
手機(jī)端為了顯示全 PC 界面，默認(rèn)為 980px

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width 寬度對(duì)于當(dāng)前設(shè)備寬度

瀏覽器設(shè)備當(dāng)前界面默認(rèn)被等分為 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>

字體圖標(biāo)

參考網(wǎng)址：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");
  }
  /* 定義一個(gè)類(lèi)來(lái)引用自定義的字體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 方式

第一步：引入項(xiàng)目下面生成的 fontclass 代碼：

第二步：挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，應(yīng)用于頁(yè)面：

<span class="iconfont icon-xxx">

定位原理與應(yīng)用

https://www.php.cn/code/36264.html
position:statkic 默認(rèn)定位
控制偏移：

top: 5em;
left: 4em;
right: 3em;
bottom: 2em;

相對(duì)定位
position:relative
相對(duì)于他在的文檔流中的父級(jí)或上級(jí)進(jìn)行定位
<style> .box { position: relative; top: 5em; left: 4em; } </style>

SS 單位

1. 相對(duì)長(zhǎng)度單位

相對(duì)長(zhǎng)度單位指的是這個(gè)單位沒(méi)有一個(gè)固定的值, 它的值受到其它元素屬性(例如瀏覽器窗口的大小、父級(jí)元素的大小)的影響, 在響應(yīng)式布局方面相對(duì)長(zhǎng)度單位非常適用。下表中列舉了 CSS 中支持的相對(duì)長(zhǎng)度單位:

單位描述示例

em 相對(duì)于自身 font-size(字體大小)屬性的值, 如果自身沒(méi)有設(shè)置, 則繼承父元素 font-size 屬性的值, 1em 等同于 font-size 屬性值, 例如 font-size 的值為 16px, 那么 1em 就等于 16px, 2em 就等于 32px p{line-height:2em;}

rem 相對(duì)于根元素<html>的 font-size 屬性的大小, 比如根元素的 font-size 是 100px, 那么 1.2rem 就相當(dāng)于 120px p{font-size: 1.2rem;}

ex 相對(duì)于所用字體中小寫(xiě)英文字母 x 的高度, 若無(wú)法確定 x 的高度則使用 0.5em 計(jì)算 p{font-size: 1ex;}

ch 相對(duì)于所用字體中數(shù)字 0 的高度, 若無(wú)法確定 0 的高度則使用 0.5em 計(jì)算 p{line-height: 3ch}

vw 相對(duì)于瀏覽器窗口的寬度, 1vw = 窗口寬度的 1% p{font-size: 5vw;}

vh 相對(duì)于瀏覽器窗口的高度, 1vh = 窗口高度的 1% p{font-size: 5vh;}

vmin vw 與 vh 中較小的值 p{font-size: 5vmin;}

vmax vw 與 vh 中較大的值 p{font-size: 5vmax;}

% 相對(duì)于父元素寬度或字體大小的百分比 div{width: 55%}

常用的單位: em、vw、vh、%

使用案例:

SS 有幾個(gè)不同的單位用于表示長(zhǎng)度。

一些設(shè)置 CSS 長(zhǎng)度的屬性有 width, margin, padding, font-size, border-width, 等。

長(zhǎng)度有一個(gè)數(shù)字和單位組成如 10px, 2em, 等。

數(shù)字與單位之間不能出現(xiàn)空格。如果長(zhǎng)度值為 0，則可以省略單位。

對(duì)于一些 CSS 屬性，長(zhǎng)度可以是負(fù)數(shù)。

有兩種類(lèi)型的長(zhǎng)度單位：相對(duì)和絕對(duì)。

瀏覽器支持

下表中的數(shù)字表示支持該長(zhǎng)度單位的最低瀏覽器版本。

長(zhǎng)度單位
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	9.0*	19.0	6.0	20.0
vmax	26.0	不支持	19.0	不支持	20.0

注意: Internet Explorer 9 通過(guò)不標(biāo)準(zhǔn)的名稱 vm 來(lái)支持 vmin 。

相對(duì)長(zhǎng)度

相對(duì)長(zhǎng)度單位指定了一個(gè)長(zhǎng)度相對(duì)于另一個(gè)長(zhǎng)度的屬性。對(duì)于不同的設(shè)備相對(duì)長(zhǎng)度更適用。

單位	描述	在線實(shí)例
em	它是描述相對(duì)于應(yīng)用在當(dāng)前元素的字體尺寸，所以它也是相對(duì)長(zhǎng)度單位。一般瀏覽器字體大小默認(rèn)為16px，則2em == 32px；	嘗試一下
ex	依賴于英文子母小 x 的高度	嘗試一下
ch	數(shù)字 0 的寬度
rem	根元素（html）的 font-size
vw	viewpoint width，視窗寬度，1vw=視窗寬度的1%	嘗試一下
vh	viewpoint height，視窗高度，1vh=視窗高度的1%	嘗試一下
vmin	vw和vh中較小的那個(gè)。	嘗試一下
vmax	vw和vh中較大的那個(gè)。	嘗試一下
%

絕對(duì)長(zhǎng)度

絕對(duì)長(zhǎng)度單位是一個(gè)固定的值，它反應(yīng)一個(gè)真實(shí)的物理尺寸。絕對(duì)長(zhǎng)度單位視輸出介質(zhì)而定，不依賴于環(huán)境（顯示器、分辨率、操作系統(tǒng)等）。

提示:

rem與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。

單位	描述	在線實(shí)例
cm	厘米	嘗試一下
mm	毫米	嘗試一下
in	英寸 (1in = 96px = 2.54cm)	嘗試一下
px *	像素 (1px = 1/96th of 1in)	嘗試一下
pt	point，大約1/72英寸； (1pt = 1/72in)	嘗試一下
pc	pica，大約6pt，1/6英寸； (1pc = 12 pt)	嘗試一下

像素或許被認(rèn)為是最好的"設(shè)備像素"，而這種像素長(zhǎng)度和你在顯示器上看到的文字屏幕像素?zé)o關(guān)。px實(shí)際上是一個(gè)按角度度量的單位。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：筆記篇-如何靈活地使用HTML標(biāo)簽？
下一篇：“圖片滑動(dòng)樣式”修改HTML教程

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商