整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
品|開(kāi)源中國(guó)
Chrome 106 已發(fā)布，Chrome 博客顯示，Chrome 106 中有 20 個(gè)安全修復(fù)程序。其中有 5 個(gè) “高” CVE 級(jí)別的安全漏洞和 8 個(gè) “中等” 嚴(yán)重性漏洞。其次，Chrome 106 中包含大量新功能，比如：
Chrome 106 添加了一系列新的 Intl API ，包含大量數(shù)字格式功能，有助于以本地化格式顯示內(nèi)容（貨幣符號(hào)的解析、格式化日期和時(shí)間的標(biāo)準(zhǔn)等...）。
與其他 Intl API 一樣，新的 Intl API 將解析內(nèi)容的負(fù)擔(dān)轉(zhuǎn)移給了系統(tǒng)，無(wú)需向每個(gè)用戶發(fā)送或維護(hù)復(fù)雜的本地化代碼。
查看 MDN 上的 Intl Number Format 文檔以獲取更多信息
CSS 'ic' 長(zhǎng)度單位
新的長(zhǎng)度單位：ic，ic 類似于 ch。但是 ic 專門用于以使用表意文字的語(yǔ)言（漢字屬于表意文字，因此中日韓三種語(yǔ)言都適用 ic 長(zhǎng)度）編寫的文本，它根據(jù)這個(gè)字符 [某個(gè)點(diǎn)] 的寬度或高度來(lái)測(cè)量長(zhǎng)度。
無(wú)論文本大小如何，ic 單位都能提供可預(yù)測(cè)的控制。例如，如果設(shè)置 max-width 容器的長(zhǎng)度是 10ic，則容器最多只能包含 10 個(gè)全角字形，無(wú)論字體大小如何。
CSS Grid 即將支持 grid-template-columns 和 grid-template-rows 的插值，它計(jì)劃在 106 中，但已延遲，并將在 Chrome 107 中推出。
在 requestFileSystem () 中棄用對(duì) window.PERSISTENT 配額類型的支持。
棄用 cookie 域?qū)傩灾械姆?ASCII 字符
為了與 RFC 6265bis 中的最新規(guī)范保持一致，Chromium 將拒絕具有包含非 ASCII 字符的 “域” 屬性的 cookie（例如 Domain=é xample.com）。
SerialPort BYOB 閱讀器支持
將 SerialPort 提供的 ReadableStream 的基礎(chǔ)數(shù)據(jù)源更新為可讀字節(jié)流。此更改與調(diào)用不帶參數(shù)的 port.readable.getReader () 的現(xiàn)有代碼向后兼容。開(kāi)發(fā)人員可以通過(guò)調(diào)用 getReader ({ mode: 'byob'}) 來(lái)檢測(cè)對(duì) BYOB 閱讀器的支持，因?yàn)榕f實(shí)現(xiàn)在傳遞新參數(shù)時(shí)會(huì)拋出 TypeError。
取消前綴 -webkit-hyphenate-character CSS 屬性
此更改支持不帶前綴的連字符，而不僅是 -webkit - 連字符。根據(jù) csswg 的討論，https://github.com/w3c/csswg-drafts/issues/6887，hyphenate-character css 屬性足夠穩(wěn)定可以發(fā)布。
Chrome 106 中的其他更改：
Chrome DevTools 中的新功能 (106)
Chrome 106 棄用和刪除
ChromeStatus.com 針對(duì) Chrome 106 的更新
Chromium 源代碼庫(kù)更改列表
Chrome 發(fā)布日歷
于在CSS中實(shí)現(xiàn)容器的長(zhǎng)寬比最初的創(chuàng)意是來(lái)自于在Web中如何實(shí)現(xiàn)縱橫比。主要是用于響應(yīng)式設(shè)計(jì)中的iframe、img和video之類的元素。隨之?dāng)U展為適用于任何容器的長(zhǎng)寬比。那在CSS中到底有多少種方案可以實(shí)現(xiàn)呢？我一向喜歡做這樣的事情，到處搜集多種解決方案。
如果你看到前面的兩篇文章，或許你知道一些方法，或者說(shuō)所有的方案你都想到了。如果是這樣的話，你可以停止閱讀這篇。如果沒(méi)有的話，你可以繼續(xù)往下閱讀。
長(zhǎng)寬比在影視制作中又被稱之為寬高比，指的是一個(gè)視頻的寬度除以它的高度所得到的比例，通常表示為x:y或x×y，其中的冒號(hào)和叉號(hào)表示中文的“比”之意。目前，在電影工業(yè)中最常被使用的是anamorphic比例（即2.39:1）。傳統(tǒng)的4:3仍然被使用于現(xiàn)今的許多電視畫面上，而它成功的后繼規(guī)格16:9則被用于高清晰度電視或數(shù)字電視上。常見(jiàn)的比例：
使用CSS實(shí)現(xiàn)容器長(zhǎng)寬比，常見(jiàn)的HTML模板結(jié)構(gòu)有兩種：
<div class="aspectration" data-ratio="16:9">
<div class="content"></div>
</div>另外一種結(jié)構(gòu)是：
<div class="aspectration" data-ratio="16:9"> </div>具體使用的時(shí)候，根據(jù)自己的使用場(chǎng)景采用不同的結(jié)構(gòu)。
前面也提到過(guò)了，使用CSS實(shí)現(xiàn)長(zhǎng)寬比方案有多種，下面簡(jiǎn)單的羅列一下這些方案。不過(guò)每種方案都不會(huì)詳細(xì)介紹，因?yàn)榇a非常簡(jiǎn)單，看一眼代碼就能明白其中原理。
這是最早提出的一種實(shí)現(xiàn)方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，實(shí)現(xiàn)容器長(zhǎng)寬比。在CSS中padding-top或padding-bottom的百分比值是根據(jù)容器的width來(lái)計(jì)算的。如此一來(lái)就很好地實(shí)現(xiàn)了容器的長(zhǎng)寬比。采用這種方法，需要把容器的height設(shè)置為0。而容器內(nèi)容的所有元素都需要采用position:absolute，不然子元素內(nèi)容都將被padding擠出容器（造成內(nèi)容溢出）。
比如我們?nèi)萜鞯拈L(zhǎng)寬比是16:9，那么根據(jù)比例計(jì)算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么對(duì)應(yīng)的就是100% * 3 / 4。
具體的CSS代碼如下：
.aspectration {
position: relative; /*因?yàn)槿萜魉凶釉匦枰^對(duì)定位*/
height: 0; /*容器高度是由padding來(lái)控制，盒模型原理告訴你一切*/
width: 100%;
}
.aspectration[data-ratio="16:9"] {
padding-top: 56.25%;
}
.aspectration[data-ratio="4:3"]{
padding-top: 75%;
}通過(guò)通配符*選擇器，讓其子元素的寬高和容器.aspectration一樣大?。?/span>
.aspectration > * {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}padding & calc()
這個(gè)方案采用的是padding和calc()配合在一起使用。其實(shí)原理和第一個(gè)方案是一樣的。只不過(guò)在第一個(gè)方案中，我們每次都需要對(duì)padding的值進(jìn)行計(jì)算，如果使用calc()可以通過(guò)瀏覽器直接計(jì)算出padding的百分比值。
.aspectration[data-ratio="16:9"] {
padding-top: calc(100% * 9 / 16);
}padding & CSS變量
對(duì)于變量而言，以前是其他計(jì)算器語(yǔ)言和CSS處理器的特性，不過(guò)值得特性的是，現(xiàn)在也是CSS的特性。接下來(lái)的這個(gè)方案也是基于padding原理，只不過(guò)是借助于CSS變量特性，讓前面的方案變得更為靈活一些。使用CSS的變量時(shí)，可以把HTML中data-ratio去掉了。換成style="--aspect-ratio:16/9"，也可以是style="--aspect-ratio:1.4;"。同時(shí)也可以借助于第二個(gè)方案中的calc()。因?yàn)镃SS的變量和calc()函數(shù)的結(jié)合是一種完美的結(jié)合。
.aspectration[style*="--aspect-ratio"] {
padding-top: calc(100% / (var(--aspect-ratio)));
}padding & 偽元素
前面的方案都是在.aspectration元素上使用padding值。但在CSS中，還可以使用CSS的偽元素::before或::after來(lái)?yè)伍_(kāi)容器。
.aspectration {
position: relative;
}
.aspectration:after {
content: "";
display: block;
width: 1px;
margin-left: -1px;
background-color: orange;
}
.aspectration[data-ratio="16:9"]:after {
padding-top: 56.25%;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}CSS新特性中提供了一種新的單位vw。了解過(guò)這個(gè)單位的同學(xué)都知道，瀏覽器100vw表示的就是瀏覽器的視窗寬度(Viewport)。打個(gè)比方說(shuō)，如果你的瀏覽器是1334px，那么對(duì)就的100vw=1334px。這個(gè)時(shí)候也就是說(shuō)1vw=13.34px。這里的100vw也對(duì)應(yīng)前面方案中的100%。這樣我們就可以把前面的%單位換成vw的單位。打個(gè)比方說(shuō)，16:9對(duì)應(yīng)的就是100vw * 9 / 16=56.25vw。這個(gè)值可以用在padding-top或者padding-bottom中。但這里演示的不再是padding了，而是把這個(gè)值給height。
.aspectration[data-ratio="16:9"] {
width: 100vw;
height: 56.25vw;
}上面的示例中width的值是30vw,那么對(duì)應(yīng)的height值就是30vw * 9 / 16=16.875vw。
這是一個(gè)很有創(chuàng)意的解決方案，使用的都是CSS新特性：視窗單位和CSS Grid Layout。簡(jiǎn)單說(shuō)一下其中的實(shí)現(xiàn)原理：將容器.aspectration通過(guò)display:grid聲明為一個(gè)網(wǎng)格容器，并且利用repeat()將容器劃分為橫向比例，比如16，那么每一格的寬度對(duì)應(yīng)的就是100vw * 9 / 16=6.25vw。同樣使用grid-auto-rows，將其設(shè)置的值和橫向的值一樣。在子元素上通過(guò)grid-column和grid-row按比例合并單元格。
.aspectration {
display: grid;
grid-template-columns: repeat(16, 6.25vw);
grid-auto-rows: 6.25vw;
}
.aspectration[data-ratio="16:9"] .content {
grid-column: span 16;
grid-row: span 9;
}在WICG的討論上，有人提出來(lái)了原生的長(zhǎng)寬比屬性aspect-ratio。例如，給定一個(gè)容器元素它的width和height都設(shè)置為auto，并且aspect-ratio的值為2/1，max-height:200px。一個(gè)容器寬度為500px時(shí)，元素首先會(huì)設(shè)置width:500px，然后根據(jù)aspect-ratio比例將height設(shè)置為250px。這個(gè)時(shí)候其實(shí)違反了max-height的約束。相反，容器大小會(huì)變成height: 200px和width:400px。另外，如果元素的max-width是450px時(shí)，長(zhǎng)寬比將會(huì)完全被忽視，因?yàn)闊o(wú)法滿足。
如果把width設(shè)置為一個(gè)百分比，高度不設(shè)置一個(gè)固定值:
.aspectration[data-ratio="16:9"] {
width: 100%;
height: aspect-ratio(16/9);
}現(xiàn)在討論討論趨勢(shì)是把a(bǔ)spect-ratio屬性值變成屬性，比如：
.aspectration[data-ratio="16:9"] {
width: 100%;
aspect-ratio: calc(16/9);
}到目前為止，還沒(méi)有任何瀏覽器支持該屬性，但我們可以借助PostCSS Aspect Ratio插件來(lái)實(shí)現(xiàn)上述的功能：
Web領(lǐng)域的一些基本概念。
Web（World Wide Web）叫全球廣域網(wǎng)，俗稱萬(wàn)維網(wǎng)（www）。
W3C（World Wide Web Consortium）叫萬(wàn)維網(wǎng)聯(lián)盟，是國(guó)際最著名的標(biāo)準(zhǔn)化組織，制定了web標(biāo)準(zhǔn)。
一個(gè)網(wǎng)頁(yè)包含了html元素 Css JavaScript，Html元素決定了網(wǎng)頁(yè)結(jié)構(gòu)，Css進(jìn)行了修飾美化，JavaScript控制了交互行為和動(dòng)態(tài)效果。
web標(biāo)準(zhǔn)包含了下面三個(gè)方面：
Html不是一種編程語(yǔ)言，而是描述性的標(biāo)記語(yǔ)言，主要作用是定義內(nèi)容的結(jié)構(gòu)。
2014年10月萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成了HTML5標(biāo)準(zhǔn)制定，是目前最新的HTM版本。
HTML5的出世，標(biāo)志著web進(jìn)入一個(gè)富客戶端（具有很強(qiáng)的交互性和體驗(yàn)的客戶端程序）時(shí)代，像APP網(wǎng)頁(yè)，小程序都是HTML5的應(yīng)用場(chǎng)景。
Html5新特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--字符集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="關(guān)鍵詞" />
<meta name="Description" content="頁(yè)面描述" />
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
</body>
</html>viewport用戶網(wǎng)頁(yè)的可視區(qū)域，一個(gè)針對(duì)移動(dòng)網(wǎng)頁(yè)優(yōu)化的頁(yè)面 viewport meta 標(biāo)簽如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">head區(qū)域元素：
meta title style link script base。
body區(qū)域元素：
塊級(jí)元素：每個(gè)元素都是獨(dú)占一行
行內(nèi)元素：元素在同一行水平排列
inline-block：元素可以排列在同一行顯示，并且可以設(shè)置一些塊元素屬性
通過(guò)Css：display:inline-block 改變?cè)亍?/span>
很多元素都自帶了默認(rèn)樣式，不同瀏覽器下默認(rèn)樣式表現(xiàn)不一致，為了統(tǒng)一或者滿足一些需求我們需求將所有默認(rèn)樣式清空，這種處理方式又稱為 Css Reset，比如：
*{
margin: 0;
padding: 0;
}另外一種方案使用normalize.css，它將不同瀏覽器下的默認(rèn)樣式進(jìn)行了統(tǒng)一，
https://github.com/necolas/normalize.css
html中的單位是像素px
絕對(duì)單位
相對(duì)單位
屬性：字體、行高、顏色、大小、背景、邊框、滾動(dòng)、換行、修飾屬性（粗體、斜體、下劃線）
p{
font-size: 20px; /*字體大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字體類型：顯示PingFang SC，沒(méi)有就顯示默認(rèn)*/
font-style: italic ; /*italic表示斜體，normal表示不傾斜*/
font-weight: bold; /*粗體或?qū)懀?00｜500｜600）*/
font-variant: small-caps; /*小寫變大寫*/
}行高（line-height）
一般約定行高、字號(hào)都是偶數(shù)，這樣保證它們的差一定偶數(shù)除2得到整數(shù)，如下圖所示：
line-height
文本垂直居中
對(duì)于單行文本可以設(shè)置行高=盒子高度。
對(duì)于多行元素的垂直對(duì)齊，我們可以使用vertical-align: middle屬性，不過(guò)vertical-align 僅適用inline、inline-block 和 table-cell 元素。
vertical-align
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長(zhǎng)度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;內(nèi)容溢出處理
filter:gray()理解優(yōu)先級(jí)很重要，有助于我們排查一些問(wèn)題。瀏覽器將優(yōu)先級(jí)分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。
行內(nèi)樣式
行內(nèi)樣式是直接作用在元素，它的優(yōu)先級(jí)高于選擇器樣式，使用！important可以提高樣式表的優(yōu)先級(jí)。
<div style="font-size:16px">
</div>選擇器樣式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">優(yōu)先級(jí)規(guī)則如下：
優(yōu)先級(jí)
我們通過(guò)下圖這種標(biāo)記方式，就可以判斷出選擇器的優(yōu)先級(jí)。
優(yōu)先級(jí)
兩條經(jīng)驗(yàn)法則
由多個(gè)基礎(chǔ)選擇器組合成的復(fù)雜選擇器。
多個(gè)基礎(chǔ)選擇器連起來(lái)（中間沒(méi)有空格）組成一個(gè)復(fù)合選擇器（如：ul.nav）。復(fù)合選擇器選中的元素將匹配其全部基礎(chǔ)選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。
用于選中某種特定狀態(tài)的元素，優(yōu)先級(jí)（0，1，0）。
:nth-child(an+b)
更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS
偽元素選擇器可以向HTML標(biāo)記中未定義的地方插入內(nèi)容，優(yōu)先級(jí)（0，0，1）。
屬性選擇器用于根據(jù)HTML屬性進(jìn)行匹配元素，優(yōu)先級(jí)（0，1，0）。
本文要點(diǎn)回顧，歡迎留言交流。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
