css盒子模型
-
在W3C模型中: 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
-
在IE模型中: 總寬度 = margin-left + width + margin-right
在CSS3中引入了box-sizing屬性, 它可以允許改變默認的CSS盒模型對元素寬高的計算方式.
共包括兩個選項：
-
content-box：標准盒模型，CSS定義的寬高只包含content的寬高
-
border-box：IE盒模型，CSS定義的寬高包括了content，padding和border
定位機制
css有三種基本定位機制：標准文流(Normal flow)，浮動(Floats)和絕對定位(Absolute positioning)。
- 標准文檔流
- 從左到右，從上到下，輸出文檔內容
- 有會計元素（從做導游撐滿頁面，獨占一行，觸碰到頁面邊緣時自動換行的元素，div,ul,li,dl,dt,p）和行級元素組成（能在同一行內顯示並且不會改變html文檔結構，如span,input）
- 浮動
- 設置為浮動的元素將會往左或者往右漂移，知道遇到阻礙-其他元素或者父級元素的邊框。浮動元素不在標准文檔流中占空間，但會隨其后的浮動元素造成影響
- 絕對定位
- 設置為絕對定位的元素將從標准文檔流中刪除，不占據空間，然后通過top,left,right,bottom屬性對其相對父元素進行定位。
網頁布局
- 流動布局
- 需了解實現塊居中的幾種方式
- 浮動布局
- 當設置float:left或float:right時，元素會左移或右移直到觸碰容器位置，仍然處於標准文檔流中。當元素沒有設置寬度值，而設置了浮動屬性，元素的寬度歲內容的變化而變化。當元素設置為浮動屬性后，會對緊鄰后的元素造成影響，緊鄰之后的元素會挨着該元素顯示。當父元素包含塊縮成一條時，用clear:both方法無效，它一般用於緊鄰氣候的元素的清除浮動，要用overflow屬性。清除浮動的方法有兩種：使用clear屬性-clear:both;同時設置width:100%(或固定寬度)+overflow:hidden。
- 浮動布局可實現橫向多列布局
- 絕對定位布局
- position:static,relative,absoulte,fixed
- static是默認值
- 相對定位relative
- 相對於自身原有位置進行偏移
- 仍處於標准文檔流中
- 隨即擁有偏移屬性和z-index屬性
- 固定定位fixed
- 一個固定定位元素會相對於視窗來定位，這意味着即便頁面滾動，它還是會停留在相同的位置。一個固定定位元素不會保留它原本在頁面擁有的空隙
- 絕對定位absolute
- 相對於最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標准。如果無已定位祖先元素, 以body元素為偏移參照基准, 並且它會隨着頁面滾動而移動。
- 完全脫離了標准文檔流。
- 隨即擁有偏移屬性和z-index屬性。
- 實現橫向兩列布局
- 常用於一列固定寬度，另一列寬度自適應的情況
- relative - 父元素相對定位
- absolute - 自適應寬度元素定位
- 能夠實現橫向多列布局
- position:static,relative,absoulte,fixed
常見布局實現
常見的布局有以下幾種: 單列水平居中布局, 一列定寬一列自適應布局, 兩列定寬一列自適應布局, 兩側定寬中間自適應三列布局。
重點介紹一下常見的三列布局之: 聖杯布局和雙飛翼布局。
聖杯布局和雙飛翼布局
兩者都屬於三列布局，是一種很常見的頁面布局方式，三列一般分別是子列sub、主列main和附加列extra，其中子列一般是居左的導航，且寬度固定；主列是居中的主要內容，寬度自適應；附加列一般是廣告等額外信息，居右且寬度固定。
聖杯布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { min-width: 600px; /* 2*sub + extra */ } .container { padding-left: 210px; padding-right: 190px; } .main { float: left; width: 100%; height: 300px; background-color: rgba(255, 0, 0, .5); } .sub { position: relative; left: -210px; float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); } .extra { position: relative; right: -190px; float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); } </style> </head> <body> <div class="container"> <div class="main"></div> <div class="sub"></div> <div class="extra"></div> </div> </body> </html>
雙飛翼布局(淘寶使用的布局方式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .main-wrapper { float: left; width: 100%; } .main { height: 300px; margin-left: 210px; margin-right: 190px; background-color: rgba(255, 0, 0, .5); } .sub { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); } .extra { float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); } </style> </head> <body> <div class="main-wrapper"> <div class="main"></div> </div> <div class="sub"></div> <div class="extra"></div> </body> </html>
總結:
-
倆種布局方式都是把主列放在文檔流最前面，使主列優先加載。
-
兩種布局方式在實現上也有相同之處，都是讓三列浮動，然后通過負外邊距形成三列布局。
-
兩種布局方式的不同之處在於如何處理中間主列的位置：聖杯布局是利用父容器的左、右內邊距定位；雙飛翼布局是把主列嵌套在div后利用主列的左、右外邊距定位。
Flex布局
Flexbox又叫彈性盒模型。它可以簡單使用一個元素居中（包括水平垂直居中），可以讓擴大和收縮元素來填充容器的可利用空間，可以改變源碼順序獨立布局，以及還有其他的一些功能。Flex布局是我最喜歡的布局，合理使用它能夠大大減少布局方面的工作, 例如以上列舉的三列布局也可以使用flex輕松實現。此外在移動端使用flex也比較常見。
響應式布局(Responsive Web Design)
響應式布局是指，網頁可以自動識別設備屏幕寬度，根據不同的寬度采用不同的CSS的樣式，從而達到兼容各種設備的效果。響應式布局使用媒體查詢(CSS3 Media Queries), 根據不同屏幕分辨率采用不同CSS規則, 使用方式如下:
@media screen and (max-width:1024px) { /* 視窗寬度小於1024px時 */ .... }
Bootstrap grid系統的實現
Bootstrap是很受歡迎的HTML, CSS和JS框架, 用於開發響應式布局和移動設備優先的Web項目。它提供了一套響應式，移動優先的流式柵格系統(grid system)，將屏幕分成12列來實現響應式的。它的實現原理非常簡單，Media Query加上float布局，如果想了解實現細節，請參考我另外一篇博客Boostrap網格系統。
CSS reset
CSS reset的目的是為了將不同瀏覽器自帶樣式重置，達到保持瀏覽器一致性的目的;reset.css通常是樣式設計開始之前第一個引用的CSS文件。
TODO:
CSS hacks
不同的瀏覽器對CSS的解析結果是不同的，因此會導致相同的CSS輸出的頁面效果不同，這就需要CSS Hack來解決瀏覽器局部的兼容性問題。而這個針對不同的瀏覽器寫不同的CSS 代碼的過程，就叫CSS Hack。CSS Hack常見的有三種形式：CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack， Hack主要針對IE瀏覽器。
TODO:
-
常用css hacks技巧
CSS sprite
把網頁中的一些零星背景圖片整合到一張圖片當中，再利用CSS背景圖片定位屬性定位到要顯示的位置，因此也叫圖片拼合技術。
好處：減少文件體積和服務器請求次數，從而提高開發效率。一般情況下保存為PNG-24，可以設計出豐富多彩的圖標。
難處：你需要預先確定每個圖標的大小。注意小圖標與小圖標之間的距離。
實現方式: background-image + background-position。
TODO:
-
如何制作CSS sprite圖
iconfont字體
iconfont是指使用字體文件取代圖片文件，來展示圖標和一些特殊字體等元素。它使用CSS3中的@font-face屬性，它允許加載自定義字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。它有很多優勢: 首先它的體積要比圖片小得多; 特定的屬性(顏色,大小,透明)等修改起來就像是操作字體一樣簡單;iconfont具有矢量性, 放大縮小不會失真;使用步驟:
-
設計師設計出Icon矢量圖,需要保存為多種格式(可以使用一些online webfont工具完成)。
-
EOT(Embedded OpenType Fonts) IE專用格式
-
WOFF(The Web Open Font Format) Web字體最佳格式, 它是一個開放的TrueType/OpenType的壓縮版本。09年被開發, 如今是W3C阻止的推薦標准。
-
TTF(TrueType Fonts) MacOS和WIN操作系統中最常見格式。
-
SVG(SVG Fonts) 用於SVG字體渲染的一種格式, W3C制定的開放標准圖形格式。
-
-
制作完成之后，進行字體聲明。由於各個瀏覽器支持的字體文件不同, 所以要聲明多種字體達到瀏覽器兼容的目的。聲明格式如下:
@font-face {
font-family: <font-family-name>; src: [<url> [format(<string> #)]?| <font-face-name>] #; font-weight: <weight>; font-style: <style>;
}
- 在網頁中使用字體。主要有兩種方式: 一種是直接在網頁中輸入相應的Icon所代表的字體;另一種是使用CSS after偽類, 這樣可以通過CSS直接控制Icon類別，只是IE6不兼容。
第一種方式:<li>\01FD</li>
第二種方式:
.icon:after{ content: '\01FD'; } <li class="icon"></li>
推薦:
CSS3常見新特性
新的元素選擇器
E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)
@font-face
見上文中iconfont部分。
border-radius
又稱圓角屬性，通常使用該屬性將圖片圓角化，如頭像。
word-wrap & text-overflow
word-wrap屬性用來指出瀏覽器在單詞內進行斷句，防止字符串太長而找不到它的自然斷句點時產生的溢出。
word-wrap:break-word;
text-overflow用於文本溢出:
單行縮略的實現如下:
.oneline { white-space: nowrap; //強制文本在一行內輸出 overflow: hidden; //隱藏溢出部分 text-overflow: ellipsis; //對溢出部分加上... }
多行縮略實現如下(主要針對webkit內核):
.multiline { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
background
主要是以下三個屬性:
-
background-clip 規定背景的繪制區域, 取值為border-box | padding-box | content-box | no-clip
-
background-origin 規定背景的定位區域, 取值為border | padding | content
-
background-size 規定背景圖片的尺寸, 取值為[<length> | <percentage> | auto]{1,2} | cover | contain