整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于你可能沒有那么多的時間，所以我將從結論開篇。
你可以使用一個不常見，但是非常重要的CSS屬性來使文字垂直顯示，像下面這樣。
除了讓文字垂直顯示之外，你也可以讓圖標和入口按鈕以這樣的方式呈現。當然，可以讓你頁面上的任何內容按這樣方式呈現。
我寫的css讓瀏覽器重新布局文字的方向，使元素的布局在正常流的基礎上旋轉90度。查看這個例子，突出標題，并且看下現在光標是什么樣子的。
查看這個例子 Writing Mode Demo — Headline 作者Jen Simmons (@jensimmons) 在CodePen上。 實現的代碼非常簡單。
h1 {
writing-mode:vertical-rl;
}
上面就是把web默認的水平并由上至下的書寫方式轉變成垂直并由左至右的書寫方式所需要的全部代碼。如果你在html元素上使用這樣的代碼，那么整個網頁的書寫方式都會被改變，并且也會影響滾動條的方向。
在我上面的例子，我告訴瀏覽器只有 h1元素會用vertical-rl這種書寫方式，網頁的其余部份保持默認的horizontal-tb 的書寫方式。
這里餐前小點就結束了。讓我開始呈現整個大餐并且解釋下 CSS書寫模式規范。
1.為什么要學習書寫模式？
我教所有人包括西方的讀者學習書寫模式有三個原因，在此期間，我會解釋整個系統，而非簡單快速地展示一些小技巧。
我們生活在一個博大并且豐富多彩的世界。學習其他語言是非常迷人的。你們中的很多人用漢語，日語，韓語來展示你們的頁面?；蛘撸憧赡茉谖磥硎艿焦奈琛?/p>
使用書寫模式來轉換字節的方向是很酷的。這個CSS 可以被用于各種富有創造性的方式，即使你只用英語工作。
最重要的是，我發現理解了書寫模式對理解FlexBox 和 CSS Grid 有著難以置信的幫助。在我學書寫模式之前，我感覺到在我知識面上仍有很大的不足，比如我壓根兒不能理解為什么Grid 和 FlexBox 會有那樣的效果。當我理解了書寫模式，Grid 和 FlexBox 就變得簡單多了。突然地，align- 和 justify-這些對齊屬性，變得好理解多了。
無論你知道與否，書寫模式是我們創建的所有布局的首要基石。 你可以做我們已經做了25年一直在做的事，并且舍棄你的頁面的默認的從左至右的方向，水平的從上至下的書寫模式。或者，你可以進入充滿新的可能性的新世界，在這里內容布局流動在另一個方向。
2.CSS 屬性
在本文，我的重點是CSS的 writing-mode屬性。它有以下五個可選值：
writing-mode:horizontal-tb;
writing-mode:vertical-rl;
writing-mode:vertical-lr;
writing-mode:sideways-rl;
writing-mode:sideways-lr;
CSS書寫模式規范 是為了支持一個廣泛的書寫語言在我們全人類和語言復雜度上來設計的。這個提醒出奇的復雜。書寫語言的全球范圍的進化絕非簡單之事。
我已經以解釋一些基本的網頁布局的概念和書寫系統作為開頭。接下來我會給你展示這些CSS屬性做了什么。
3.行內方向，塊級方向和字符方向
在web的世界，有塊級和行內的布局。如果你曾經寫過display: block 或者display: inline,你就應該了解這個概念。
在默認的書寫模式，塊垂直地從頁面的頂部開始向下工作。 想想一堆塊級元素是如何像一堆段落一樣堆疊，這就是塊級方向。
行內方向是每一行的文本是如何讓流動的。Web中默認的方向是水平方向，從左至右。 想象下你現在正在閱讀的文本，它是在打印機上被逐字符打印出的。這就是行內方向。
字符方向就是字符指向的方式。如果你鍵入一個字母“A”, 哪一側是這個字母的頂部？不同的語言可能指向不同的方向。大多數語言中規定，它們字符指向頁面的頂部，但也非絕對。
將這三個放在一起，你就會看到它們作為一個系統是怎么工作的。
web默認的設置工作起來像這個樣子。
既然我們知道塊級，行內和字符方向是什么意思，明天我們來看看它們在世界范圍內的書寫系統的不同應用。
繼續關注更新哦！
先，我們來學習CSS設置文本的對齊方式。
通過CSS，可以設置文本的水平和垂直對齊方式。（有案例的效果演示）
文本水平對齊，我們前面的課程曾經接觸過——使用 text-align 這個樣式屬性來實現。它的屬性值有三個：left，right，center，分別表示文本水平居左，居右，居中。
我們來舉個例子。
在 005 目錄下創建 alignment-spacing.html 文件，構建基礎代碼，添加一個 h1 元素和三個 p 元素，分別填入一些文本。
<h1>浠浠呀老師，學前端的大專生就業難嗎？</h1>
<p>
no, 不難，只要你能力過關、項目經驗過關、人品過關，企業就會錄用你。
</p>
<p>
你可以在面試的時候，著重介紹一下你的開發能力、技術能力以及你對技術理解，讓別人挑不出毛病，那學歷這塊是可以自動忽略的。
</p>
<p>
我在面試別人的時候也是這樣，如果這個人的技術能力和過往經驗真的征服了我，我不是很在他乎他的學歷。
</p>
我們可以給三個段落文本，設置不同的水平對齊方式，給三個 p 元素定義 class 屬性，值分別為 a，b，c。
在這個目錄下再創建一個 mystyle-2.css 文件，定義 p.a (讀作p點a) 選擇器，聲明樣式 text-align: left (不要讀冒號)。定義 p.b 選擇器，聲明樣式 text-align: center。定義 p.c 選擇器，聲明樣式 text-align: right。
p.a {
text-align: left;
}
p.b {
text-align: center;
}
p.c {
text-align: right;
}
在瀏覽器中預覽效果，三個段落分別左、中、右對齊了。
當 text-align 屬性被設置為 justify [?d??st?fa?]時，每一行都被拉長，使每一行都有相等的寬度，而且左右邊界是對齊的，就像雜志和報紙排版一樣。
注釋掉全部樣式，定義 p 選擇器，聲明樣式 text-align: justify。
我們看，貌似沒有什么效果。
為了演示，給第一個段落添加單詞 no, (讀作no 英文的逗號) 。再給 p 元素聲明一個樣式 width: 200px。
再看效果，三個段落的兩側都是對齊的。
假如注釋掉這個樣式，
很明顯，右側不再對齊顯示了。
除了水平對齊，還可以設置文本的垂直對齊。通過聲明 vertical-align 屬性來實現。值有五個：
baseline，基線對齊。
text-top，文本頂部對齊。
text-bottom，文本底部對齊。
sub，下角標對齊。
super，上角標對齊。
在 html 文件中添加一個 h1 元素，5個 p 元素。填入一些文本。在每個段首添加一個 img 元素，引入本地的一個小圖片，圖片的寬高都為 9px。給每個圖片元素定義 class 屬性，值分別為 a，b，c，d，e。
在樣式表中，定義 img.a 選擇器，聲明樣式 vertical-align: baseline。
baseline 是如何對齊的呢？看效果，在垂直方向好像是居中對齊。
實際上，baseline 是基于四線三格倒數第二行對齊的。對于英文文本才有意義。
比如，將 1 修改為 fight 1。
基線在這，文本中的圖片就基于它來對齊。
再定義 img.b，img.c，img.d，img.e 四個選擇器，給他們都聲明 vertical-align 屬性，值分別為 text-top，text-bottom，sub，super 。
看看效果，圖片垂直方向上，已經相對于文本頂部、底部、上角標、下角標的位置對齊了。
接下來，我們學習如何設置文本的間距。
通過 CSS，可以實現文本縮進、文字或字母間距、行高、單詞間距和處理空白。（有案例的效果演示）
聊起文本縮進，你還記得以前是如何實現自然段首行縮進的嗎？可以發彈幕告訴大家！
通過聲明 CSS 的 text-indent 屬性也可以實現。使?長度值或百分?來設置?本縮進。
長度值可以使?絕對單位或相對單位。絕對單位就是 px，比如縮進 50px；相對單位最常用的是 em，縮進的寬度為字符寬度的倍數，一般設置為 2em，就是空兩格。
字符寬度——如果是中文方塊字，也可以稱為字體大小，它是通過 font-size 屬性來設置的，這個屬性在后面 CSS 字體課程中會詳細介紹。
百分?縮進寬度，是根據?元素的寬度計算得到。這個很少使用。
給 p 元素聲明 text-indent 屬性，值為 2em。
仔細觀察，每個自然段縮進貌似不是2個字的寬度，這是為什么呢？
你應該想到了，把 text-align: justify 注釋一下，就是我們要的效果了。
letter-spacing 屬性用于指定中文文字或英文字母之間的空隙。
在樣式中，定義 h1 選擇器，聲明樣式 letter-spacing: 5px。
這樣，標題文字間就有了 5px 的空隙。
line-height 屬性用于指定行與行之間的高度，也就是行高。屬性值常用的有三個：
第一，normal，也是默認值，瀏覽器會根據字符大小自動設置一個行高。
第二，一個數字，比如 1.5。此數字與當前的字符大小相乘計算得到。推薦使用。
第三，絕對值，比如 20px，-5px。設置固定的行間距。
在沒有設置 line-height 屬性時，我們看到每一行的間距是這樣的。
回到樣式代碼，給 p 元素聲明樣式 line-height: normal。
我們看到效果沒有變化。
修改 line-height 屬性值為 1。
再來看，每個段落的行間距消失了。
再次修改 line-height 為 10px，行與行之間疊加到了一起。
是不是和你理解的行高不一樣呢？看來，我們得需要仔細研究一下：行高到底是如何計算的。
這是兩行中文和英文混合的文本。
在文字頂端畫一條線，取名叫頂線。在文字底端畫一條線，取名叫底線。在文字中間畫一條線，取名叫中線，再畫一條英文的基線。上一行文字的底線，到下一行文字的頂線，他們之間的空隙稱為行距。
實際上，line-height 設置的行高值，是兩行基線的距離。
這里你可能會問，基線不是英文文本才有的嗎？其實，不管文本里有沒有英文，基線都是一直存在的。
了解了這個原理，你就能理解 line-height: 1，為啥沒有行距了。因為 1 乘以文字的高度，結果還是文字的高度。而文字的高度，恰好等于兩行基線之間的距離，所以行距為 0。
word-spacing 屬性用于指定文本中單詞的間距，只對英文有效。
給 p 元素再聲明一個 word-spacing: 20px 樣式。
我們看，單詞 no 和 fight 后面就有了 20個像素的間距。
white-space 屬性指定了如何處理元素內部的空白。有一個常用的值，nowrap，不管包含文本的元素寬度是多少，文本都不會換行，直到遇見 <br> 標簽為止。
給 p 元素再聲明一個 white-space: nowrap 樣式。
此時，每個段落都在一行顯示了。雖然我們給 p 元素聲明了 width: 200px，他也會視而不見，繼續倔強的在一行顯示。
文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=63
言
對于項目，那就是我們的親兒子啊，作為一個前端菜鳥，面向用戶就是將自己的兒子介紹給別人認識，肯定要讓他白白凈凈，漂漂亮亮的啦，給別人一眼就喜歡上的感覺咯，哈哈哈~
常在河邊走，哪有不濕鞋，在我們編程的工程中，尤其是前端的同學，肯定少不了跟Css打交道，命名、縮寫、書寫順序等都是有一定規范，這個規范可能來源于你、我、或者瀏覽器等不定向人群（這個規范是我瞎編的），今天自己整合收集，以及個人項目用到的html+css的書寫規范送給在"編程界"奮斗的小伙伴，你 不是一個人在戰斗。
話不多說，鍋燒空氣，鍋熱放油，放入寫好的html+css炸一遍，撈出，控油，裹上雞蛋液，粘上面包糠，再炸，隔壁小孩都饞哭了，不好吃你來打我。
一 命名規則說明
1、所有的命名最好都小寫
2、屬性的值一定要用雙引號("")括起來，且一定要有值如class="app",id="app"
3、每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整例如：<div></div>
4、空元素要有結束的tag或于開始的tag后加上"/" <br />、<img />
5、表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
6、<h1>到<h6>的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢,因此，請不要利用標題標簽來改變同一行中的字體大小。相反，我們應當使用層疊樣式表定義來達到漂亮的顯示效果。
7、給每一個表格和表單加上一個唯一的、結構標記id
8、給圖片加上alt標簽,alt屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本。假設由于下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：網速太慢、src 屬性中的錯誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器。
9、盡量使用英文命名原則
10、盡量不縮寫，除非一看就明白的單詞如btn。
11、命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）。
12、scss中的變量、函數、混合、placeholder采用駝峰式命名
13、后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁面布局中使用，因為污染的可能性較大；
14、減少id命名，id在JS是唯一的，不能多次使用，id的優先級優先與class，所以id應該按需使用，而不能濫用。
二 網頁外層重要部分CSS樣式命名
wrap ------------------ 用于最外層 header ---------------- 用于頭部 main ------------------ 用于主體內容（中部） main-left ------------- 左側布局 main-right ------------ 右側布局 nav ------------------- 網頁菜單導航條 content --------------- 用于網頁中部主體 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的性能。
關注我的頭條號，分享更多的技術學習文章，我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
文檔加載完成到完全顯示之間瀏覽器的渲染流程為：
1）瀏覽器解析html構建dom樹，解析css構建cssom樹即css rule tree：將html和css都解析成樹形的數據結構；dom樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。2）構建render樹：DOM樹和cssom樹合并之后形成render樹。為了構建渲染樹，瀏覽器大體完成了下列工作：從DOM樹的根節點開始遍歷每個可見節點。對于每個可見節點，為其找到適配的CSSOM規則并應用它們。發射可見節點，連同其內容和計算的樣式。渲染樹中包含了屏幕上所有可見內容及其樣式信息。3）布局render樹：有了render樹，瀏覽器已經知道網頁中有哪些節點，各個節點的css定義以及它們的從屬關系，接著就開始布局，計算出每個節點在屏幕中的位置和大小。(html采用了一種流式布局的布局模型，從上到下，從左到右順序布局，布局的起點是從render樹的根節點開始的，對應dom樹的document節點，其初始位置為(0,0)，詳細的布局過程為：每個renderer的寬度由父節點的renderer確定。父節點遍歷子節點，確定子節點的位置(x,y)，調用子節點的layout方法確定其高度，父節點根據子節點的height, margin, padding確定自身的高度)。4）渲染，繪制render樹：瀏覽器已經知道啦哪些節點要顯示，每個節點的css屬性是什么，每個節點在屏幕中的位置是哪里。就進入啦最后一步，按照計算出來的規則，通過顯卡把內容畫在屏幕上。瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序按照dom樹的結構分布render樣式，完成第（2）步，然后開始遍歷每個樹節點的css樣式進行解析，此時的css樣式的遍歷順序完全是按照之前的的書寫順序，在解析過程中，一旦瀏覽器發現某個元素的定位變化影響布局，則需要倒回去重新渲染。例如css樣式：{width: 100px; height: 100px; background-color: red; position: absolute;}當瀏覽器解析到position的時候突然發現該元素是絕對定位元素需要脫離文檔流，而之前卻是按照普通元素進行解析的，所以不得不重新渲染，解除該元素在文檔中所占位置，然而由于該元素的占位發生變化，其他元素也可能會受到回流的影響而重新排位，最終導致（3）步驟花費時間太久而影響到（4）步驟的顯示，影響了用戶體驗。
注：render樹的結構不等同于DOM樹的結構，一些設置display:none的節點不會被放在render樹中，但會在dom樹中。
有些情況，比如修改了元素的樣式，瀏覽器并不會立刻回流(reflow)或重繪(repaint)，而是把這些操作積攢一批，然后做一次reflow，這也叫做異步reflow。但是在有些情況下，比如改變窗口大小，改變頁面默認字體等瀏覽器會馬上進行reflow。為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現在屏幕上，并不會等到所有html都解析完成之后再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在網絡上下載其余內容。
四 css樣式書寫規范
使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
去掉小數點前的“0”
簡寫命名(前提是要讓人看懂你的命名才能簡寫哦)
16進制顏色代碼縮寫
連字符CSS選擇器命名規范
1.長名稱或詞組可以使用中橫線來為選擇器命名。2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢？
功能
狀態
注釋的寫法
/* Header */ 內容區 /* End Header */
id的命名
1)頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center(2)導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
(3)功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標籤頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權：copyright
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
五 HTML5-語義化
距HTML5標準規范制定完成并公開發布已經有好些年了，但是多數公司還是用的不是很多，可能一部分原因是部分用戶在使用低版本瀏覽器吧。
什么是語義化？就是用合理、正確的標簽來展示內容，比如h1~h6定義標題。
語義化優點：
1、header
<header>定義文檔或者文檔的部分區域的頁眉，應作為介紹內容或者導航鏈接欄的容器。在一個文檔中，您可以定義多個<header>元素，但需要注意的是<header>元素不能作為<address>、<footer>或 <header>元素的子元素。
2、nav
<nav>描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表。在一個文檔中，可定義多個元素。
3、main
<main>定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站logo，搜索框（除非搜索框作為文檔的主要功能）。需要注意的是在一個文檔中不能出現多個<main>標簽。
4、article
<article>元素表示文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目。當<article>元素嵌套使用時，則該元素代表與外層元素有關的文章。例如，代表博客評論的元素可嵌套在代表博客文章的元素中。
5、aside
<aside>元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。
6、footer
<footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。使用footer插入聯系信息時，應在 footer 元素內使用 元素。注意不能包含<footer>或者<header>
7、section
<section>表示文檔中的一個區域（或節），比如，內容中的一個專題組。
如果元素內容可以分為幾個部分的話，應該使用 <article>而不是 <section>。不要把 <section>元素作為一個普通的容器來使用，特別是當<section>僅僅是為了美化樣式或方便腳本使用的時候，應使用<div>。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
