標籤 ： 前端
css 布局模型
顏色和長度
設定小技巧
參考資料
css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成。
選擇器
內聯式 > 嵌入式 > 外部式。
例子這裡文字是紅色。
type="text/css">
span
style>
類選擇器和id選擇器都可以應用於任何元素，但id 選擇器只能在文件中使用一次，可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式，id 選擇器是不可以的。
子選擇器和包含選擇器區別：>作用於元素的第一代後代，空格作用於元素的所有後代。
另外還有兩種選擇符：
文字排版
段落排版
在 css 中，html 中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
、、...、、、、、、、
每個塊級元素都從新的一行開始，並且其後的元素也另起一行。
元素的高度、寬度、行高以及頂和底邊距都可設定。
元素寬度在不設定的情況下，是它本身父容器的 100%（和父元素的寬度一致），除非設定乙個寬度。
設定display:block就是將元素顯示為塊級元素，從而使元素具有塊狀元素特點。
注：img 標籤與 div 層之間會有空隙的解決方法是：使用display:block就可以消除間隙。
、、
、、、、、、、、
和其他元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設定；
元素的寬度就是它包含的文字或的寬度，不可改變。
塊狀元素也可以通過**display:inline將元素設定為內聯元素。
和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設定。
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，**display:inline-block就是將元素設定為內聯塊狀元素。
盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設定它的粗細、樣式和顏色(邊框三個屬性)。
div
div
divcss 內定義的寬（width）和高（height），指的是填充以里的內容範圍。乙個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
w3c 的標準 box model:
/*外盒尺寸計算（元素空間尺寸）*/
element空間高度 = content height + padding + border + margin
element 空間寬度 = content width + padding + border + margin
/*內盒尺寸計算（元素大小）*/
element height = content height + padding + border （height為內容高度）
element width = content width + padding + border （width為內容寬度）
box-sizing: border-box;來避免計算內部元素大小
參考 css3 box-sizing
元素內容與邊框之間是可以設定距離的，稱之為「填充」。填充也可分為上、右、下、左(順時針)。
例子：
/*上、右、下、左(順時針)，順序不要搞混*/
divdiv
/*上、右、下、左的填充都為10px;*/
div/*上下填充一樣為10px，左右一樣為20px*/
div
css 包含 3 種基本的布局模型，用英文概括為：flow、layer 和 float。
在網頁中，元素有三種布局模型：
流動模型（flow）
浮動模型 (float)
層模型（layer）
流動模型，流動（flow）是預設的網頁布局模式。
流動布局模型具有2個比較典型的特徵：
塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為 100%。實際上，塊狀元素都會以行的形式佔據位置。
在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。
任何元素在預設情況下是不能浮動的，但可以用 css 定義為浮動。例子：#div1
css 定義了一組定位（positioning）屬性來支援層布局模型。
層模型有三種形式：
1. 絕對定位(position: absolute)
2. 相對定位(position: relative)
3. 固定定位(position: fixed)
可參考這篇文章輔助理解 《css絕對定位、相對定位和文件流的那些事》
官方文件: mdn - position如果想為元素設定層模型中的絕對定位，需要設定
position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用 left、right、top、bottom 屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於 body 元素，即相對於瀏覽器視窗。
如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過 left、right、top、bottom 屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成乙個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
簡單來說，就是相對元素原來的位置進行移動，元素本身所佔的位置會保留。
設定position:fixed;。fixed：表示固定定位，與 absolute 定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響，這與background-attachment:fixed;屬性功能相同。
relative 與 absolute 組合使用,必須遵守下面規範：
參照定位的元素必須是相對定位元素的前輩元素
參照定位的元素必須加入position:relative;定位元素加入position:absolute，便可以使用 top、bottom、left、right 來進行偏移定位了
例子(html 和 css **分別為)：
id="box1">
id="box2">相對參照元素進行定位div>
div>
#box1
#box2
長度單位總結一下，目前比較常用到px（畫素）、em、% 百分比，要注意其實這三種單位都是相對單位。
另外，為元素設定以下兩個屬性之一會**改變 display 型別，元素的display顯示型別就會自動變為以display:inline-block（塊狀元素）的方式顯示，當然就可以設定元素的 width 和 height 了，且預設寬度不佔滿父元素。
position: absolutefloat: left或float:right
更詳細的居中布局技巧可以參考我另外一篇文章：css 布局經典問題初步整理
|csdn|oschina 前端基礎 2 CSS
選擇器 注釋用 這裡是注釋 在html標籤中用style屬性值設定 key value1，value2.key value1，value2.我是內容 在html 的head標籤中用style標籤來定義css樣式 要用到選擇器,這裡先用標籤選擇器 把css樣式寫成單獨的css檔案 要用到選擇器 再在h...
前端基礎（2）css
1.浮動高度坍塌 原因 父元素的高度是被子元素撐開的，當設定浮動後，會脫離文件流，子元素無法撐起父元素，所以導致高度坍塌 解決方法 clearfix before,clearfix after 2.父子兄弟聯動 解決方法1 padding 解決方法2 float 但是有條件 解決方法3 positi...
前端2 CSS 更新完畢
1 css是什麼？2 css的發展史 3 為什麼要學這個東西？3 css的語法格式 4 簡單的體驗一把css 目前看這個體驗看不懂也沒事，慢慢就懂了 5 css的優勢 實現了html 和 css結構分離的思想 即 內容 結構 和 表現分離 網頁結構 表現統一，可以實現復用 樣式十分的豐富 6 css...