于你可能沒有那么多的時(shí)間，所以我將從結(jié)論開篇。

你可以使用一個(gè)不常見，但是非常重要的CSS屬性來使文字垂直顯示，像下面這樣。

除了讓文字垂直顯示之外，你也可以讓圖標(biāo)和入口按鈕以這樣的方式呈現(xiàn)。當(dāng)然，可以讓你頁面上的任何內(nèi)容按這樣方式呈現(xiàn)。

我寫的css讓瀏覽器重新布局文字的方向，使元素的布局在正常流的基礎(chǔ)上旋轉(zhuǎn)90度。查看這個(gè)例子，突出標(biāo)題，并且看下現(xiàn)在光標(biāo)是什么樣子的。

查看這個(gè)例子 Writing Mode Demo — Headline 作者Jen Simmons (@jensimmons) 在CodePen上。 實(shí)現(xiàn)的代碼非常簡單。

h1 {

writing-mode:vertical-rl;

}

上面就是把web默認(rèn)的水平并由上至下的書寫方式轉(zhuǎn)變成垂直并由左至右的書寫方式所需要的全部代碼。如果你在html元素上使用這樣的代碼，那么整個(gè)網(wǎng)頁的書寫方式都會被改變，并且也會影響滾動(dòng)條的方向。

在我上面的例子，我告訴瀏覽器只有 h1元素會用vertical-rl這種書寫方式，網(wǎng)頁的其余部份保持默認(rèn)的horizontal-tb 的書寫方式。

這里餐前小點(diǎn)就結(jié)束了。讓我開始呈現(xiàn)整個(gè)大餐并且解釋下 CSS書寫模式規(guī)范。

1.為什么要學(xué)習(xí)書寫模式？

我教所有人包括西方的讀者學(xué)習(xí)書寫模式有三個(gè)原因，在此期間，我會解釋整個(gè)系統(tǒng)，而非簡單快速地展示一些小技巧。

• 我們生活在一個(gè)博大并且豐富多彩的世界。學(xué)習(xí)其他語言是非常迷人的。你們中的很多人用漢語，日語，韓語來展示你們的頁面。或者，你可能在未來受到鼓舞。

• 使用書寫模式來轉(zhuǎn)換字節(jié)的方向是很酷的。這個(gè)CSS 可以被用于各種富有創(chuàng)造性的方式，即使你只用英語工作。

• 最重要的是，我發(fā)現(xiàn)理解了書寫模式對理解FlexBox 和 CSS Grid 有著難以置信的幫助。在我學(xué)書寫模式之前，我感覺到在我知識面上仍有很大的不足，比如我壓根兒不能理解為什么Grid 和 FlexBox 會有那樣的效果。當(dāng)我理解了書寫模式，Grid 和 FlexBox 就變得簡單多了。突然地，align- 和 justify-這些對齊屬性，變得好理解多了。

無論你知道與否，書寫模式是我們創(chuàng)建的所有布局的首要基石。 你可以做我們已經(jīng)做了25年一直在做的事，并且舍棄你的頁面的默認(rèn)的從左至右的方向，水平的從上至下的書寫模式。或者，你可以進(jìn)入充滿新的可能性的新世界，在這里內(nèi)容布局流動(dòng)在另一個(gè)方向。

2.CSS 屬性

在本文，我的重點(diǎn)是CSS的 writing-mode屬性。它有以下五個(gè)可選值：

writing-mode:horizontal-tb;

writing-mode:vertical-rl;

writing-mode:vertical-lr;

writing-mode:sideways-rl;

writing-mode:sideways-lr;

CSS書寫模式規(guī)范 是為了支持一個(gè)廣泛的書寫語言在我們?nèi)祟惡驼Z言復(fù)雜度上來設(shè)計(jì)的。這個(gè)提醒出奇的復(fù)雜。書寫語言的全球范圍的進(jìn)化絕非簡單之事。

我已經(jīng)以解釋一些基本的網(wǎng)頁布局的概念和書寫系統(tǒng)作為開頭。接下來我會給你展示這些CSS屬性做了什么。

3.行內(nèi)方向，塊級方向和字符方向

在web的世界，有塊級和行內(nèi)的布局。如果你曾經(jīng)寫過display: block 或者display: inline,你就應(yīng)該了解這個(gè)概念。

在默認(rèn)的書寫模式，塊垂直地從頁面的頂部開始向下工作。 想想一堆塊級元素是如何像一堆段落一樣堆疊，這就是塊級方向。

行內(nèi)方向是每一行的文本是如何讓流動(dòng)的。Web中默認(rèn)的方向是水平方向，從左至右。 想象下你現(xiàn)在正在閱讀的文本，它是在打印機(jī)上被逐字符打印出的。這就是行內(nèi)方向。

字符方向就是字符指向的方式。如果你鍵入一個(gè)字母“A”, 哪一側(cè)是這個(gè)字母的頂部？不同的語言可能指向不同的方向。大多數(shù)語言中規(guī)定，它們字符指向頁面的頂部，但也非絕對。

將這三個(gè)放在一起，你就會看到它們作為一個(gè)系統(tǒng)是怎么工作的。

web默認(rèn)的設(shè)置工作起來像這個(gè)樣子。

既然我們知道塊級，行內(nèi)和字符方向是什么意思，明天我們來看看它們在世界范圍內(nèi)的書寫系統(tǒng)的不同應(yīng)用。

繼續(xù)關(guān)注更新哦！

言

對于項(xiàng)目，那就是我們的親兒子啊，作為一個(gè)前端菜鳥，面向用戶就是將自己的兒子介紹給別人認(rèn)識，肯定要讓他白白凈凈，漂漂亮亮的啦，給別人一眼就喜歡上的感覺咯，哈哈哈~

常在河邊走，哪有不濕鞋，在我們編程的工程中，尤其是前端的同學(xué)，肯定少不了跟Css打交道，命名、縮寫、書寫順序等都是有一定規(guī)范，這個(gè)規(guī)范可能來源于你、我、或者瀏覽器等不定向人群（這個(gè)規(guī)范是我瞎編的），今天自己整合收集，以及個(gè)人項(xiàng)目用到的html+css的書寫規(guī)范送給在"編程界"奮斗的小伙伴，你 不是一個(gè)人在戰(zhàn)斗。

話不多說，鍋燒空氣，鍋熱放油，放入寫好的html+css炸一遍，撈出，控油，裹上雞蛋液，粘上面包糠，再炸，隔壁小孩都饞哭了，不好吃你來打我。

一 命名規(guī)則說明

1、所有的命名最好都小寫

2、屬性的值一定要用雙引號("")括起來，且一定要有值如class="app",id="app"

3、每個(gè)標(biāo)簽都要有開始和結(jié)束，且要有正確的層次，排版有規(guī)律工整例如：<div></div>

4、空元素要有結(jié)束的tag或于開始的tag后加上"/" <br />、<img />

5、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等

6、<h1>到<h6>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢,因此，請不要利用標(biāo)題標(biāo)簽來改變同一行中的字體大小。相反，我們應(yīng)當(dāng)使用層疊樣式表定義來達(dá)到漂亮的顯示效果。

7、給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記id

8、給圖片加上alt標(biāo)簽,alt屬性是一個(gè)必需的屬性，它規(guī)定在圖像無法顯示時(shí)的替代文本。假設(shè)由于下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：網(wǎng)速太慢、src 屬性中的錯(cuò)誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器。

9、盡量使用英文命名原則

10、盡量不縮寫，除非一看就明白的單詞如btn。

11、命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）。

12、scss中的變量、函數(shù)、混合、placeholder采用駝峰式命名

13、后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁面布局中使用，因?yàn)槲廴镜目赡苄暂^大；

14、減少id命名，id在JS是唯一的，不能多次使用，id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。

二 網(wǎng)頁外層重要部分CSS樣式命名

 wrap ------------------ 用于最外層 
 header ---------------- 用于頭部 
 main ------------------ 用于主體內(nèi)容（中部） 
 main-left ------------- 左側(cè)布局 
 main-right ------------ 右側(cè)布局 
 nav ------------------- 網(wǎng)頁菜單導(dǎo)航條 
 content --------------- 用于網(wǎng)頁中部主體 
 footer ---------------- 用于底部

三 樣式屬性順序

1. 定位：positionz-indexleftrighttopbottomclip等。

2. 自身屬性：widthheightmin-heightmax-heightmin-widthmax-width等。

3. 文字樣式：colorfont-sizeletter-spacing, colortext-align等。

4. 背景：background-imageborder等。

5.文本屬性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。

6. css3中屬性：content、box-shadow、animation、border-radius、transform等

/* yes */ 
 .example { 
 z-index: -1;
 display: inline-block;
 font-size: 16px;
 color: red; 
 background-color: #eee; 
} 
/* no */ 
.example { 
 color: red; 
 background-color: #eee; 
 display: inline-block; 
 z-index: -1; 
 font-size: 16px; 
 } 

目的：減少瀏覽器reflow(回流)，提升瀏覽器渲染dom的性能。

關(guān)注我的頭條號，分享更多的技術(shù)學(xué)習(xí)文章，我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。

文檔加載完成到完全顯示之間瀏覽器的渲染流程為：

1）瀏覽器解析html構(gòu)建dom樹，解析css構(gòu)建cssom樹即css rule tree：將html和css都解析成樹形的數(shù)據(jù)結(jié)構(gòu)；dom樹的構(gòu)建過程是一個(gè)深度遍歷過程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。2）構(gòu)建render樹：DOM樹和cssom樹合并之后形成render樹。為了構(gòu)建渲染樹，瀏覽器大體完成了下列工作：從DOM樹的根節(jié)點(diǎn)開始遍歷每個(gè)可見節(jié)點(diǎn)。對于每個(gè)可見節(jié)點(diǎn)，為其找到適配的CSSOM規(guī)則并應(yīng)用它們。發(fā)射可見節(jié)點(diǎn)，連同其內(nèi)容和計(jì)算的樣式。渲染樹中包含了屏幕上所有可見內(nèi)容及其樣式信息。3）布局render樹：有了render樹，瀏覽器已經(jīng)知道網(wǎng)頁中有哪些節(jié)點(diǎn)，各個(gè)節(jié)點(diǎn)的css定義以及它們的從屬關(guān)系，接著就開始布局，計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置和大小。(html采用了一種流式布局的布局模型，從上到下，從左到右順序布局，布局的起點(diǎn)是從render樹的根節(jié)點(diǎn)開始的，對應(yīng)dom樹的document節(jié)點(diǎn)，其初始位置為(0,0)，詳細(xì)的布局過程為：每個(gè)renderer的寬度由父節(jié)點(diǎn)的renderer確定。父節(jié)點(diǎn)遍歷子節(jié)點(diǎn)，確定子節(jié)點(diǎn)的位置(x,y)，調(diào)用子節(jié)點(diǎn)的layout方法確定其高度，父節(jié)點(diǎn)根據(jù)子節(jié)點(diǎn)的height, margin, padding確定自身的高度)。4）渲染，繪制render樹：瀏覽器已經(jīng)知道啦哪些節(jié)點(diǎn)要顯示，每個(gè)節(jié)點(diǎn)的css屬性是什么，每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里。就進(jìn)入啦最后一步，按照計(jì)算出來的規(guī)則，通過顯卡把內(nèi)容畫在屏幕上。瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據(jù)css樣式的書寫順序按照dom樹的結(jié)構(gòu)分布render樣式，完成第（2）步，然后開始遍歷每個(gè)樹節(jié)點(diǎn)的css樣式進(jìn)行解析，此時(shí)的css樣式的遍歷順序完全是按照之前的的書寫順序，在解析過程中，一旦瀏覽器發(fā)現(xiàn)某個(gè)元素的定位變化影響布局，則需要倒回去重新渲染。例如css樣式：{width: 100px; height: 100px; background-color: red; position: absolute;}當(dāng)瀏覽器解析到position的時(shí)候突然發(fā)現(xiàn)該元素是絕對定位元素需要脫離文檔流，而之前卻是按照普通元素進(jìn)行解析的，所以不得不重新渲染，解除該元素在文檔中所占位置，然而由于該元素的占位發(fā)生變化，其他元素也可能會受到回流的影響而重新排位，最終導(dǎo)致（3）步驟花費(fèi)時(shí)間太久而影響到（4）步驟的顯示，影響了用戶體驗(yàn)。

注：render樹的結(jié)構(gòu)不等同于DOM樹的結(jié)構(gòu)，一些設(shè)置display:none的節(jié)點(diǎn)不會被放在render樹中，但會在dom樹中。

有些情況，比如修改了元素的樣式，瀏覽器并不會立刻回流(reflow)或重繪(repaint)，而是把這些操作積攢一批，然后做一次reflow，這也叫做異步reflow。但是在有些情況下，比如改變窗口大小，改變頁面默認(rèn)字體等瀏覽器會馬上進(jìn)行reflow。為了更好的用戶體驗(yàn)，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)在屏幕上，并不會等到所有html都解析完成之后再去構(gòu)建和布局render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在網(wǎng)絡(luò)上下載其余內(nèi)容。

四 css樣式書寫規(guī)范

使用CSS縮寫屬性

CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。

去掉小數(shù)點(diǎn)前的“0”

簡寫命名(前提是要讓人看懂你的命名才能簡寫哦)

16進(jìn)制顏色代碼縮寫

連字符CSS選擇器命名規(guī)范

1.長名稱或詞組可以使用中橫線來為選擇器命名。2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢？

• 輸入的時(shí)候少按一個(gè)shift鍵；
• 瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的）
• 能良好區(qū)分JavaScript變量命名（JS變量命名是用“_”）

功能

狀態(tài)

注釋的寫法

/* Header */ 
 內(nèi)容區(qū)
 
 /* End Header */

id的命名

1)頁面結(jié)構(gòu)

容器: container

頁頭：header

內(nèi)容：content/container

頁面主體：main

頁尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體佈局寬度：wrapper

左右中：left right center(2)導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainnav

子導(dǎo)航：subnav

頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar

菜單：menu

子菜單：submenu

標(biāo)題: title

摘要: summary

(3)功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊：register

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動(dòng)：scroll

標(biāo)籤頁：tab

文章列表：list

提示信息：msg

當(dāng)前的: current

小技巧：tips

圖標(biāo): icon

注釋：note

指南：guild

服務(wù)：service

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright

CSS樣式表文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css

五 HTML5-語義化

距HTML5標(biāo)準(zhǔn)規(guī)范制定完成并公開發(fā)布已經(jīng)有好些年了，但是多數(shù)公司還是用的不是很多，可能一部分原因是部分用戶在使用低版本瀏覽器吧。

什么是語義化？就是用合理、正確的標(biāo)簽來展示內(nèi)容，比如h1~h6定義標(biāo)題。

語義化優(yōu)點(diǎn)：

• 易于用戶閱讀，樣式丟失的時(shí)候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。
• 有利于SEO，搜索引擎根據(jù)標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
• 方便其他設(shè)備解析，如盲人閱讀器根據(jù)語義渲染網(wǎng)頁
• 有利于開發(fā)和維護(hù)，語義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧。

1、header

<header>定義文檔或者文檔的部分區(qū)域的頁眉，應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器。在一個(gè)文檔中，您可以定義多個(gè)<header>元素，但需要注意的是<header>元素不能作為<address>、<footer>或 <header>元素的子元素。

2、nav

<nav>描述一個(gè)含有多個(gè)超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁面或頁面內(nèi)部其他部分的鏈接列表。在一個(gè)文檔中，可定義多個(gè)元素。

3、main

<main>定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框（除非搜索框作為文檔的主要功能）。需要注意的是在一個(gè)文檔中不能出現(xiàn)多個(gè)<main>標(biāo)簽。

4、article

<article>元素表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，是可獨(dú)立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。當(dāng)<article>元素嵌套使用時(shí)，則該元素代表與外層元素有關(guān)的文章。例如，代表博客評論的元素可嵌套在代表博客文章的元素中。

5、aside

<aside>元素表示一個(gè)和其余頁面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來而不會影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。

6、footer

<footer>定義最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)元素的頁腳。一個(gè)頁腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。使用footer插入聯(lián)系信息時(shí)，應(yīng)在 footer 元素內(nèi)使用 元素。注意不能包含<footer>或者<header>

7、section

<section>表示文檔中的一個(gè)區(qū)域（或節(jié)），比如，內(nèi)容中的一個(gè)專題組。

如果元素內(nèi)容可以分為幾個(gè)部分的話，應(yīng)該使用 <article>而不是 <section>。不要把 <section>元素作為一個(gè)普通的容器來使用，特別是當(dāng)<section>僅僅是為了美化樣式或方便腳本使用的時(shí)候，應(yīng)使用<div>。