web開發中，html的每個元素都是盒子，盒子可以裝內容（content）、可以有填充物（padding）、有外殼（border） 和 外保護層（margin） 。下圖為控制台中的盒子詳解
：瀏覽器的控制台是我們了解乙個元素最好的乙個工具，下圖可以清晰的看出乙個盒子所擁有的屬性。
元素的實際寬高
上圖可清晰的看出 元素實際的寬=border-left+padding-left+元素內容寬+padding-right+border-right
元素實際的高=border-top+padding-top+元素內容高+padding-bottom+border-bottom
而margin則可以看作每乙個盒子之間的空隙並不是盒子實際的寬高
css3（box-sizing）
box-sizing有三個值：content-box:元素的寬高值只包換元素的寬高，padding+border會影響實際寬高。
border-box:元素的寬高包含了padding+border+content。
inherit:從父元素繼承 box-sizing 屬性的值。
什麼是包含塊
包含塊（containing block）是視覺格式化模型的乙個重要概念，它與盒模型類似，也可以理解為乙個矩形，而這個矩形的作用是為它裡面包含的元素提供乙個參考，元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。
包含塊簡單說就是定位參考框，或者定位座標參考係，元素一旦定義了定位顯示（相對、絕對、固定）都具有包含塊性質，它所包含的定位元素都將以該包含塊為座標系進行定位和調整。
如何尋找包含塊
根元素：
預設條件下，html元素為包含塊，一些瀏覽器把body設為包含塊。
非根元素：
1、非根元素，除非元素使用的是絕對位置，包含塊由最近的塊級祖先元素盒子的內容邊界組成。
2、非根元素有屬性 'position:fixed'，包含塊由視口建立。
3、非根元素有屬性
'position:absolute'，包含塊設定在最近的postion不是static的祖先元素(這裡的祖先元素可以是塊級元素，也可是內聯元素)：
a、如果祖先元素是塊級元素，包含塊設為該塊級元素的padding邊沿
b、如果祖先元素是內聯元素則包含塊設為該內聯元素的內容邊沿
float的使用
float(浮動)的框可以使元素向左或向右浮動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框 表現得就像浮動框不存在一樣。主要適用元素需要向左向右對齊的時候。
語法
float:none 不使用浮動 預設值
float:left 靠左浮動
float:right 靠右浮動
float
與position的差異
嚴格意思上講float只能叫布局，而position才叫定位。
float仍會佔據其位置，position會覆蓋文件流中的其他元素
css positon：屬性規定元素的定位型別
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移，同時它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。
值 描述
absolute：生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed：生成固定定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative：生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 left 位置新增 20 畫素。
static：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
inherit：規定應該從父元素繼承 position 屬性的值。
5.實現元素居中
元素水平居中
元素垂直居中
@keyframes 規則和所有動畫屬性animation 屬性是乙個簡寫屬性，用於設定六個動畫屬性animation-delay 規定在動畫開始之前的延遲。
transform
rotate
設定元素順時針旋轉的角度，用法是：
transform: rotate(x);
引數x必須是以deg結尾的角度數或0，可為負數表示反向。
scale
設定元素放大或縮小的倍數，用法包括：
transform: scale(a); 元素x和y方向均縮放a倍
transform: scale(a, b); 元素x方向縮放a倍，y方向縮放b倍
transform: scalex(a); 元素x方向縮放a倍，y方向不變
transform: scaley(b); 元素y方向縮放b倍，x方向不變
translate
設定元素的位移，用法為：
transform: translate(a, b); 元素x方向位移a，y方向位移b
transform: translatex(a); 元素x方向位移a，y方向不變
transform: translatey(b); 元素y方向位移b，x方向不變
skew
設定元素傾斜的角度，用法包括：
transform: skew(a, b); 元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b
transform: skewx(a); 元素x方向逆時針傾斜角度a，y方向不變
transform: skewy(b); 元素y方向順時針傾斜角度b，想方向不變
以上的引數均必須是以deg結尾的角度數或0，可為負數表示反向。
matrix
設定元素的變形矩陣，因為矩陣變形過於複雜，暫略。
origin
設定元素的懸掛點，用法包括：
transform-origin: a b; 元素的懸掛點為(a, b)
元素的懸掛點即為它旋轉和傾斜時的中心點。取值中的a、b可以是長度值、以%結尾的百分比或者left、top、right、bottom四個值。
transition
transition 屬性是乙個簡寫屬性，用於設定四個過渡屬性：
css學習初級入門
先體驗下css的魅力，哈哈 乙個簡單的html 頁面層容器 頁面頭部 側邊欄主體內容 頁面底部 基本資訊 body a link,a visited a hover 頁面層容器 container 利用padding 20px 20px 0 0來固定選單位置 menu 新增了float right使...
前端的學習之路 初級CSS 常用選擇器
lang en charset utf 8 name viewport content width device width,initial scale 1.0 常用選擇器title 將所有的段落設定為紅色 字型 標籤 元素 選擇器 作用 根據標籤名來選中指定的元素 語法 標籤名 例子 p h1 d...
前端學習 css
1.內聯 慕課網，超酷的網際網路 it技術免費學習平台，創新的網路一站式學習 實踐體驗 服務及時貼心，內容專業 有趣易學。專注服務網際網路工程師快速成為技術高手！2.嵌入式 嵌入式css樣式必須寫在之間，並且一般情況下嵌入式css樣式寫在之間。慕課網，超酷的網際網路 it技術免費學習平台，創新的網路...