三大特性

• 層疊性
• 優(yōu)先級
• 繼承性

恰當的使用繼承可以簡化代碼恤磷，color以及text- font- line-開頭的屬性可以被繼承句旱。

書寫順序

1. 布局定位屬性：display/position/float/clear/visibility/overflow
2. 自身屬性：width/height/margin/padding/border/background
3. 文本屬性：color/font/text-decoration/text-align/vertical-align/white-space/brea-kword
4. 其它屬性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...

權重

• !important：無窮大

• 行內樣式：1,0,0,0

• id：0,1,0,0

• class|偽類|屬性：0,0,1,0

• 標簽|偽元素：0,0,0,1

• 繼承|*：0,0,0,0

不存在進制提升呻待，即10個標簽不等于1個clalss

字體

• font簡寫形式：font-style|font-variant|font-weight|font-size|font-height|font-family必須按照此順序薇组，并且font-size和font-family不可省略

由于各瀏覽器默認字體大小不同恃泪，所以一般全局設置統(tǒng)一字體樣式郑兴。

a 鏈接偽類

• a:link
• a:visited
• a:hover
• a:active

書寫時，一定要按照link visited hover active的順序書寫贝乎，否則會有顯示錯誤

塊級元素

• 塊級元素寬度默認是父元素的100%
• p h1-h6 dt是塊元素情连，但其內部不能放其它塊元素

行內元素

• 行內元素寬度默認是它本身內容寬度
• 行內元素設置margin只有左右生效，上下無效

背景

• background-color默認值是transparent
• background-repeat默認值是repeat
• background-position若只設置一個方向览效，則在另一個方向上默認居中
• background簡寫形式：顏色却舀、圖片地址、平鋪锤灿、滾動挽拔、位置

盒模型

• 盒模型box-sizing默認值是content-box，需要注意的是：當設置為border-box時但校，要想文字垂直居中line-height的值應該減去邊框和padding
• 外邊距合并：上下相鄰的兩個塊元素篱昔，假如上面元素的margin-bottom和下面元素的margin-top都有值，則它們的間距為這兩個值中的最大值，所以盡量只給一個盒子添加margin值
• 外邊距塌陷：嵌套的兩個塊元素div1>div2州刽，如果子元素div2前面沒有內容空执，給div2設置margin-top時，效果會表現在父元素div1上穗椅，子元素div2沒有效果辨绊，解決這種情況，可以：
  • 設置父元素的padding-top
  • 設置父元素的border-top
  • 父元素設置overflow:hidden
  • 其它方法：設置position:fixed|absolute或float

布局

css 布局三種機制：

• 標準流
• 浮動
• 定位

在做重要的導航欄時匹表，不直接使用a鏈接门坷，而是li包裹a鏈接，這樣：

• 語義化更清晰
• 直接使用a袍镀，搜素引擎會認為是堆砌關鍵字默蚌，有降權的風險，影響網站排名

通常布局流程如下：

1. 根據測量確定頁面的版心——主要內容所在區(qū)域
2. 分析頁面中的行模塊苇羡，以及每個行模塊中的列模塊绸吸。
3. 制作HTML結構，先有結構后有樣式
4. 書寫CSS布局頁面

flex 布局

采用Flex布局的元素稱為Flex容器（flex container）设江，其所有子元素自動稱為容器成員（flex item）锦茁。當父元素設置flex布局后，子元素的float叉存、clear码俩、vertical-align屬性將失效。

flex布局的原理就是通過給父元素添加flex屬性來控制子元素的位置和排列方式歼捏。
定義了flex屬性的元素稿存，假如內部有::before或::after偽元素，會參與span-空間分配瞳秽。

父元素常見屬性：

• flex-direction：設置主軸(main axis)方向
• flex-wrap：設置子元素是否換行挠铲，默認nowrap
• justify-content：設置主軸上的子元素的排列方式
• align-content：設置副軸(cross axis)上子元素的排列方式，必須是多行才有效寂诱，和justify-content一樣都是設置內容的空間分配
• align-items：設置副軸上子元素的對齊方式
• flex-flow：復合屬性拂苹，相當于同時設置flex-direction和flex-wrap，用空格隔開

子項常見屬性：

• flex：分配剩余空間痰洒，子項占的份數瓢棒，可以設置百分比%
• align-self：控制子項自己在副軸的排列方式
• order：定義子項的排列順序，默認是0

浮動

• 子元素的浮動以父元素為基準
• 子元素浮動不會與父元素的border重疊丘喻，也不會超過父元素的padding
• 浮動只影響自身及其后的元素
• 浮動元素后面的文字脯宿、圖片、輸入框等元素不會被覆蓋泉粉，而是環(huán)繞

由于開發(fā)中父元素不方便給出固定高度连霉，而子元素浮動后脫離文檔流榴芳，導致父元素內部高度為0，后面正常文檔流的塊元素就會占據原來的位置跺撼。所有要清除浮動造成的影響窟感，使父元素根據浮動的子元素自動檢測高度，父元素有了高度歉井，就不會影響下面的標準文檔流了柿祈。

清除浮動的方法有：

• 在最后一個浮動元素后添加一個空標簽div，設置clear屬性
• 設置父元素的overflow屬性
• 設置父元素::after偽元素
• 設置父元素::before和::after偽元素

定位

絕對定位/固定定位/浮動的盒子不能通過設置margin:auto來達到水平居中哩至。

絕對定位的元素實現水平居中的方法：

1. left:50%;
2. transform:translateX(-50%)

z-index只能用于相對定位躏嚎、絕對定位、固定定位的元素菩貌，其它標準流卢佣、浮動、靜態(tài)定位都無效箭阶。

絕對定位虚茶、固定定位和浮動都會改變元素的默認顯示模式，類似于inline-block尾膊，所以全屏寬度需要設置width:100%媳危。假如一個設置了浮動/固定定位/絕對定位的行內元素荞彼，不需要設置display就可以設置寬度和高度冈敛。

絕對定位、固定定位和浮動都不會觸發(fā)margin合并和塌陷問題鸣皂。

高級技巧篇

• outline:0|none;可以用來取消input默認對焦后輪廓高亮的效果抓谴。

• input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; } 可以用來去除瀏覽器自動填充表單后的默認背景色。

• resize:none防止文本域textarea拉伸寞缝。

• ul默認的margin癌压、padding記得要清除，否則就會出現莫名其妙的間距荆陆。

• transition對于display:none的元素無效滩届，因為 transition是對于元素現有的樣式計算的，而元素設為display:none后不在文檔流中被啼，所以過渡不起效果帜消，看情況可以使用opacity或visibility代替。

• vertical-align只對行內元素和行內塊元素有效浓体，通常用來控制圖片泡挺、表單、文字的對齊命浴。比如A設置為middle娄猫，那么前面或者后面的元素要和A的middle對齊贱除。

• 由于文字、圖片媳溺、表單默認是基線對齊月幌，所以img元素會和盒子底部有空白縫隙。設置vertical-align不是默認的baseline來解決褂删，也可以設置圖片的display:block飞醉，但這種產生的副作用過大。

• 文字溢出隱藏：white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

• 滑動門技術：給父子兩個元素分別設置同一背景圖片屯阀，背景位置相反缅帘，兩邊固定，寬度由內容撐開难衰，背景自動適應钦无。

• 設置了兩個相鄰的浮動盒子border寬度，中間就會有兩條邊框盖袭，設置盒子margin左或右為負的border寬度來隱藏一條邊框失暂。但這樣設置:hover時顯示邊框，則會少一條邊鳄虱，通過設置position:relative來解決弟塞，假如盒子原本已經設置了相對定位，則直接設置z-index即可拙已。垂直方向同理决记。

• 對于簡單的內容（如分頁）布局，可以使用div>span>a的結構來布局倍踪，這樣只需要給div設置text-align:center就可以實現居中效果系宫，不需要額外設置寬度。

• 在文字布局時建车，假如內容不固定扩借，而且和下面盒子有間距，可以只設置一個較大的height值缤至，這樣文字多了可以換行潮罪，不需要設置margin就可以保持和下面盒子的間距。

• video視頻自動播放zutoplay由于瀏覽器為了體驗领斥，默認禁止嫉到，添加添加靜音muted屬性即可。

• e:first-child指的是第一個子元素是e的元素戒突，而不是e的第一個子元素屯碴，而且只要父元素的第一個子元素不是e就選不到。假如子元素的類型都相同e:first-child等同于e:first-of-type膊存，假如子元素的類型不同导而，使用e:first-of-type更準確忱叭。e:nth-child(1)同理

• e:nth-child(3n+1)指的是每3個一組中的第一個，而不是第3*n+1個今艺≡铣螅可以使用-n+2表示前兩個。

• 對偽元素添加:hover屬性虚缎，應該寫為div:hover::after撵彻。

• 使用translate移動元素位置不會影響周圍其它元素的位置，它的百分比單位是相當于自身的实牡，translate對行內元素沒有效果陌僵。

• 要實現>這種圖標可以給一個盒子設置border然后通過rotate旋轉。

• 使用scale縮放既可以設置中心點创坞，又不會影響其它元素碗短，而直接修改寬高則會影響其它元素。

• 同時設置transform多個值题涨，要注意順序偎谁，由于旋轉rotate會改變坐標軸方向，當有位移translate和其它屬性時纲堵，要將translate放在最前面巡雨。

• 透視perspective，即觀察點離屏幕的距離席函，要寫在被觀察元素的父元素上铐望，單位是px，值越大向挖，被觀察元素越小蝌以。

• transform-style炕舵， 指定嵌子元素怎樣在三維空間中呈現何之。 默認值是flat，要想元素呈現3d效果咽筋，需要給父元素設置transform-style:preserve-3d溶推。

• 針對不同屏幕引入不同css文件<link rel="stylesheet" href="*320.css" media="screen and (min-width:320px)">，由小到大引入奸攻。

移動端布局

視口(viewport)是瀏覽器顯示頁面內容的屏幕區(qū)域蒜危。視口可分為：

• 布局視口（layout viewport），一般移動設備瀏覽器都默認設置了一個布局視口睹耐，分辨率為980px辐赞，所以pc頁面在手機上被縮小顯示了。

• 視覺視口（visual viewport）硝训，用戶看到的網站區(qū)域响委，即手機屏幕新思，通過滑動滾動條來查看完整內容。

• 理想視口（ideal viewport）赘风，需要手動設置meta視口標簽通知瀏覽器操作夹囚，使布局視口寬度與設備寬度一致。

標準的視口設置邀窃，<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">：

• 視口寬度與設備一致
• 視口的默認縮放比例1.0
• 不允許用戶自行縮放
• 最大允許縮放的比例1.0
• 最小允許縮放的比例1.0

二倍圖或多倍圖荸哟，由于視網膜屏（Retina）中物理像素是css像素的兩倍或多倍，所以為了在解決高清屏放大后模糊的問題瞬捕，使用多倍的高分辨率的圖片鞍历，然后通過css來設置顯示的大小。這樣即使在高清屏中放大肪虎，由于圖片本身就是高分辨率的圖片堰燎，可以正常顯示。

移動端特殊樣式設置：

/*盒子模型*/
box-sizing: border-box;
/*清除點擊高亮效果*/
-webkit-tap-highlight-color: transparent;
/*去除按鈕和輸入框默認樣式*/
/*禁用長按頁面時彈出菜單*/
-webkit-touch-callout: none;
-webkit-appearance: none;

移動端布局常見技術選型：

• 單獨制作移動頁面（主流）：
  • 流式布局（百分比布局）笋轨，通過設置百分比值根據屏幕寬度伸縮秆剪，一般還會設置最大/最小值。
  • flex彈性布局（推薦）
  • less+rem+媒體查詢（推薦flexible.js+rem）爵政，rem元素大小取值方法：
    1. 選擇一套標準尺寸仅讽，如750px
    2. 屏幕尺寸750 除以要劃分的份數，如15钾挟，得到html基礎的font-size:50px(750/15=50px)
    3. 假如寬度為100的頁面元素的rem值就等于：頁面元素width:100px / html的font-size:50px即2rem
  • 混合布局
• 響應式頁面
  • 媒體查詢
  • bootstrap

SEO 站內優(yōu)化

網頁標題 title

title具有不可替代性洁灵，是搜索引擎了解網頁的入口和對網頁主題歸屬判斷的最佳依據。

• 標題的長度：Google（70kb）掺出，35個中文徽千；百度（56kb），28個中文
• 關鍵字分布：最先出現的詞語權重越高
• 關鍵字詞頻：主關鍵字出現3次汤锨，輔關鍵字出現一次

首頁標題：網站名（產品名）-網站介紹

網站描述 description

主要描述網站的總體業(yè)務双抽，多采用“我們是...“、”我們提供...”闲礼、“xxx網作為...”牍汹、”電話：...“之類語句。

• 描述中出現的關鍵字與正文內容相關柬泽，主要給人看慎菲，要詳細，吸引人
• 遵循簡短原則锨并，字數含空格在內不超過120個漢字
• 補充在title和keywords中未能充分說明的內容
• 用英文逗號,

關鍵字 keywords

keywords是頁面關鍵字露该，應該限制在6~8個關鍵字左右，電商網站可多點第煮。

logo 優(yōu)化

1. 為了提高權重解幼，在 logo 里放置h1標簽
2. h1里放一個a鏈接闸拿，可以返回首頁，給a設置大小和logo背景圖片
3. 為了搜索引擎收錄书幕，a里要寫上網站名稱新荤。為了美觀有兩種方法可以隱藏文字：
   1. 給text-indent設置負值如-999px，然后設置overflow:hidden
   2. 設置font-size:0
4. 給鏈接設置title屬性