整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在前端界面設計中，會有那么一些布局，需要占滿整個父級容器，比如：
模態框（Modal）的背景
加載器（Spinner）的背景
以上兩種組件中，都是將背景完全填充到父級容器，區別在于模態框通常是背景填滿屏幕，通常使用 position: fixed; 用于定位，而加載器更多用于將其背景布滿父級容器，通常使用 position: absolute; 定位。
為了實現填充父級的需求，從正常的盒子模型的設計邏輯來講，我們的思路大體上很簡單：將子容器的高度、寬度設置為和父級一致
圍繞這個核心思路，我們可以嘗試設置 CSS 屬性： width: 100%; height: 100%;, 但在 CSS 中，% 這個單位僅用于用于參考父級已設置的寬度或高度，換句話說，如果父級容器并沒有設置寬度或高度，子容器設置的 100% 并不能產生相應的作用，而在實際的 UI 布局中，固定父級容器高度的情況是很少出現的，大部分都是由內容將父級容器給撐高，而這種情況下子級容器并不能通過設置 height: 100%; 來將高度設置為和父級一致。
如果使用 position: fixed 定位，width: 100%; height: 100%; 是可以設置高度和寬度布滿屏幕的，不過需要通過 left:0;top:0; 調整位置剛好和屏幕大小一致。
既然大部分情況下我們不能使用 height: 100% 來將子容器的高度設置為和父級一致，那我們應該怎樣來填充父級空間呢？
答案是通過 left, top, right, bottom 這四個屬性。
關于這四個屬性，我們都知道是配合 position 使用的，并且會隨著 position 設置的值不同，有著不同的特性：
通常我們都通過使用其中兩個非對立的屬性來進行定位，比如 left:0; top: 0; 在 position: fixed 中表示該容器對齊屏幕的左上角。我們可以通過類似的寫法對齊右上角，右下角，或者是左下角。
那如果我們設置一組對立的定位呢，比如在 position: fixed 的情況下設置 left: 0; right: 0;，在對該容器設置了指定 width 和 height 的情況下，我們會發現，該容器對齊在屏幕的左側，right: 0 似乎并沒有任何作用，在設置上下對立的定位 top: 0; bottom: 0; 時，該容器會對齊在屏幕的上方，仿佛 bottom 也沒有生效。
細心的同學肯定注意到了，這里有個前提條件：對該容器設置了指定 width 和 height，如果我們去掉容器的高度和寬度并設置 left: 0; right: 0; top: 0; bottom: 0;，那么神奇的事情發生了，該容器鋪滿了整個容器！那如果使用 position: absolute 呢，效果是顯而易見的，鋪滿了整個父級元素（前提是父級元素設置了 position: relative 、 position: fixed 或 position: absolute）。
總結一下，如果要鋪滿父級容器，我們可以將父級容器設置為 position: relative，并且為子級容器設置以下 CSS 屬性
.sub{
position: absolute;
width: auto; height: auto;
top: 0; right: 0; bottom: 0; left: 0;
}既然我們可以通過設置對立屬性為 0，讓沒有指定高度或寬度子級容器鋪滿父級容器，那么我們是不是也可以通過設置對立屬性為其它值從而拉扯子級容器的高度或寬度呢？
答案是肯定的，只要子級容器沒有指定高度或寬度，我們都可以設置對立屬性為任意值從而拉扯其容器高度或寬度
例子:
.sub{
position: absolute;
width: auto; height: auto;
top: 50px; right: 0; bottom: 50px; left: 0;
}習CSS是構建好看網頁的一種方式。但是，在學習過程中，我們傾向于（大部分時間）限制自己，一遍又一遍地使用相同的屬性。畢竟，我們是一種習慣性的動物，我們會使用自己習慣且熟悉的東西。
因此，在這篇文章中，向你介紹7個 比較少見且好用的 CSS 屬性，希望對你有所幫助。
CSS 的屬性 vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。
就像定義說的，這個屬性允許你垂直對齊文本。它對于順序指示器(st, nd等)、需要的輸入星號(*)或沒有正確居中的圖標特別有用。vertical-align取其中一個值:super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom，或從基線開始的長度(px，%， em, rem等等)。
baseline: 使元素的基線與父元素的基線對齊。HTML規范沒有詳細說明部分可替換元素的基線，如<textarea> ，這意味著這些元素使用此值的表現因瀏覽器而異。
sub：使元素的基線與父元素的下標基線對齊。
super：使元素的基線與父元素的上標基線對齊。
text-top：使元素的基線與父元素的上標基線對齊。
text-bottom：使元素的底部與父元素的字體底部對齊。
middle：使元素的中部與父元素的基線加上父元素x-height（譯注：x高度）的一半對齊。
注意 vertical-align 只對行內元素、表格單元格元素生效：不能用它垂直對齊塊級元素。
資源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align）。
writing-mode 屬性定義了文本水平或垂直排布以及在塊級元素中文本的行進方向。為整個文檔設置書時，應在根元素上設置它（對于 HTML 文檔應該在 html 元素上設置）。它采用以下值之一horizontal-tb (default) | vertical-rl | vertical-lr。
horizontal-tb：對于左對齊(ltr)腳本，內容從左到右水平流動。對于右對齊(rtr)腳本，內容從右到左水平流動。下一水平行位于上一行下方。
vertical-rl：對于左對齊(ltr)腳本，內容從上到下垂直流動，下一垂直行位于上一行左側。對于右對齊(rtr)腳本，內容從下到上垂直流動，下一垂直行位于上一行右側。
vertical-lr：對于左對齊(ltr)腳本，內容從上到下垂直流動，下一垂直行位于上一行右側。對于右對齊(rtr)腳本，內容從下到上垂直流動，下一垂直行位于上一行左側。
資源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode）。
font-variant-numeric CSS屬性控制數字，分數和序號標記的替代字形的使用。
它采用以下這些值之一：normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions。
此屬性對于設置數字樣式很有用。根據情況，你可能希望顯示老式的數字或帶有斜杠的零，對于這些情況，font-feature-settings很有用。
請注意，font-variant-numeric是font-feature-settings組屬性的一部分。諸如font-variant-caps或font-variant-ligatures之類的屬性也屬于該組。還要注意，像所有font-feature-settings屬性一樣，你的字體需要實現上述功能才能正常工作。我使用的字體是Fira Sans。
資源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric）。
每當我們有不想讓用戶選擇的文本，或者相反，如果發生了雙擊或上下文單擊，希望選擇所有文本時，user-select屬性將非常有用。
此屬性采用以下值之一：none | auto | text | all。
none：元素及其子元素的文本不可選中。請注意這個Selection 對象可以包含這些元素。從Firefox 21開始， none 表現的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新啟用選擇。
autoauto 的具體取值取決于一系列條件，具體如下：
text：用戶可以選擇文本。all：在一個HTML編輯器中，當雙擊子元素或者上下文時，那么包含該子元素的最頂層元素也會被選中。
資源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)。
clip-path CSS 屬性可以創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部svg的路徑，或者作為一個形狀例如circle()。clip-path屬性代替了現在已經棄用的剪切 clip屬性。
此屬性采用以下值之一:circle() | ellipse() | polygon() | path() | url()。
由于這是對該屬性的介紹，因此，這里不會深入研究每個值。
我使用最多的兩個值是circle和polygon。circle(radius at pair)值有兩個參數，第一個參數是圓的半徑，第二個參數是表示圓心的點。polygon(pair, pair, pair ...)值取3個或更多的點，表示一個三角形、一個矩形等等。
shape-outside的CSS 屬性定義了一個可以是非矩形的形狀，相鄰的內聯內容應圍繞該形狀進行包裝。默認情況下，內聯內容包圍其邊距框; shape-outside提供了一種自定義此包裝的方法，可以將文本包裝在復雜對象周圍而不是簡單的框中。它采用與clip-path相同的值。
clip-path定義用戶如何查看元素，shape-outside定義其他HTML元素如何查看元素。
資源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside)。
最后，backgroundclip CSS屬性設置元素的背景是否擴展到其border、padding 或content 框之下。
此屬性采用以下值之一：border-box (default) | padding-box | content-box | text
資源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip)。
下圖是結合上面 7 個屬性實現的布局，讓大家加深一下印象。
如果你還知道一些新奇的屬性，歡迎留言。
作者：Mustapha Aouas 譯者：前端小智 來源：dev
原文：https://dev.to/mustapha/7-amazing-css-properties-you-may-not-know-yet-eej
Web領域的一些基本概念。
Web（World Wide Web）叫全球廣域網，俗稱萬維網（www）。
W3C（World Wide Web Consortium）叫萬維網聯盟，是國際最著名的標準化組織，制定了web標準。
一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。
web標準包含了下面三個方面：
Html不是一種編程語言，而是描述性的標記語言，主要作用是定義內容的結構。
2014年10月萬維網聯盟（W3C）完成了HTML5標準制定，是目前最新的HTM版本。
HTML5的出世，標志著web進入一個富客戶端（具有很強的交互性和體驗的客戶端程序）時代，像APP網頁，小程序都是HTML5的應用場景。
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="關鍵詞" />
<meta name="Description" content="頁面描述" />
<title>頁面標題</title>
</head>
<body>
</body>
</html>viewport用戶網頁的可視區域，一個針對移動網頁優化的頁面 viewport meta 標簽如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">head區域元素：
meta title style link script base。
body區域元素：
塊級元素：每個元素都是獨占一行
行內元素：元素在同一行水平排列
inline-block：元素可以排列在同一行顯示，并且可以設置一些塊元素屬性
通過Css：display:inline-block 改變元素。
很多元素都自帶了默認樣式，不同瀏覽器下默認樣式表現不一致，為了統一或者滿足一些需求我們需求將所有默認樣式清空，這種處理方式又稱為 Css Reset，比如：
*{
margin: 0;
padding: 0;
}另外一種方案使用normalize.css，它將不同瀏覽器下的默認樣式進行了統一，
https://github.com/necolas/normalize.css
html中的單位是像素px
絕對單位
相對單位
屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）
p{
font-size: 20px; /*字體大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字體類型：顯示PingFang SC，沒有就顯示默認*/
font-style: italic ; /*italic表示斜體，normal表示不傾斜*/
font-weight: bold; /*粗體或寫（400｜500｜600）*/
font-variant: small-caps; /*小寫變大寫*/
}行高（line-height）
一般約定行高、字號都是偶數，這樣保證它們的差一定偶數除2得到整數，如下圖所示：
line-height
文本垂直居中
對于單行文本可以設置行高 = 盒子高度。
對于多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過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;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;內容溢出處理
filter:gray()理解優先級很重要，有助于我們排查一些問題。瀏覽器將優先級分為兩部分：HTML的行內樣式和選擇器的樣式。
行內樣式
行內樣式是直接作用在元素，它的優先級高于選擇器樣式，使用！important可以提高樣式表的優先級。
<div style="font-size:16px">
</div>選擇器樣式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">優先級規則如下：
優先級
我們通過下圖這種標記方式，就可以判斷出選擇器的優先級。
優先級
兩條經驗法則
由多個基礎選擇器組合成的復雜選擇器。
多個基礎選擇器連起來（中間沒有空格）組成一個復合選擇器（如：ul.nav）。復合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。
用于選中某種特定狀態的元素，優先級（0，1，0）。
:nth-child(an+b)
更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS
偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先級（0，0，1）。
屬性選擇器用于根據HTML屬性進行匹配元素，優先級（0，1，0）。
本文要點回顧，歡迎留言交流。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
