九、盒模型 與元素親密接觸
1、盒模型
css將每個元素都看做乙個盒子，包括以下屬性：
內容區content area：包含內容，內容可以決定大小，也可以自行設定寬度和高度。元素的width屬性指定的就是內容區寬度，可以按畫素指定也可以按百分比相對於元素所在容器如body div 的大小來指定。
內邊距padding：內容區外的透明區域，可以看做元素的一部分，對元素設定背景會延伸到內邊距。
邊框border：內邊距周圍的邊框。
外邊距margin：邊框外的透明區域，提供元素與元素之間的間隔，元素背景不會延伸到外邊距。元素的（內聯，如影象）左右外邊距會相加，（塊元素）上下外邊距會摺疊，取最大的，巢狀也是如此。另外，浮動元素的外邊距與正常流中的外邊距不會摺疊。
2、其他
背景影象屬性background-image: url(images/background.gif)
背景影象位置background-position：top left 可以按畫素、百分數和關鍵字指定，這個就是左上角的意思
背景影象重複background-repeat:有repeat 在水平和垂直方向重複，預設。no-repeat不重複，只顯示一次。repeat-x在水平方向上重複。repeat-y在垂直方向上重複。inherit繼承父元素設定。
邊框除了border-syle border-width border-color還可以設定圓角，border-radius:15px;或3em;可以用畫素也可以用比例（相對元素字型大小）來指定圓角半徑大小。也可指定一邊圓角，border-top-left-radius:3em;左上圓角。
id屬性：在html中加入
，在css中設定樣式，#footer或p#footer（類是用「.」）
多個樣式表：加入多個link，最下面的最優先。
樣式表針對**型別：瀏覽器會通過**型別來確定使用的規則，不匹配的忽略。
在link中增加乙個media屬性，，針對有螢幕且螢幕寬度不超過480px。
也可以直接在css中單獨指定，@media screen and (max-device-width: 480px)，在這個大括號裡放入針對此**的規則。
十、div與span 高階web建設
div劃分邏輯區，將一堆相關的塊元素放在一起。
子孫選擇器： #elixirs h2會選擇巢狀的所有h2，不論是直接子孫還是下級的，不用一層層往下寫，會自動選擇所有的，不管在多少層。
對屬性賦值可以有很多簡寫：font: normal/1.2em bold san-serif; 其中，字型大小/行間距，其他用空格隔開，順序無所謂。
span劃分邏輯區，將一堆相關的內聯內容放在一起。
1、偽類
偽類是直接在元素後面加「：」，例如a:hover，可直接在css中用而不用在html中像類一樣定義，因為是瀏覽器預先設定好的。
a:visited{}已訪問狀態鏈結
a:hover{}滑鼠懸停上時狀態
還有其他偽類，如first-child對應第乙個子元素，last-child最後乙個子元素，nth-child(even/2n)第偶數個子元素，nth-child(odd/2n+1)第奇數個子元素。
十
一、布局與定位 擺放元素
瀏覽器從html檔案最上面開始，從上到下，從左到右，逐個顯示遇到的元素，其中每個塊元素有乙個換行，這就是流flow。所以，塊元素是從上到下，內聯元素是從左上到右下。
1、浮動float
為元素設定float屬性（首先必須為該元素設定寬度width），瀏覽器會從流中刪除這個元素，其他元素繼續按照流擺放，當做沒有這個浮動的元素，但是後面的塊元素的內聯元素會繞著這個浮動元素。
為元素設定clear屬性，如clear:right;則該元素右邊不允許出現浮動元素，如果有就一直往下移，直到右邊沒有浮動元素。
2、三種布局
流體布局liquid layout，就是通過流，寬度不固定的設計，這樣瀏覽器調整寬度時，元素會跟著擴充套件，填滿瀏覽器。
凍結布局frozen layout，為整個內容區大div設定寬度，瀏覽器調整寬度時，內容區不會變，但右邊留白會越來越大。
凝膠布局jello layout，為整個內容區大div設定寬度，同時設定margin-left, margin-right: auto；這樣瀏覽器擴充套件時，內容區會保持大小不變，但始終居中。
3、四種定位position
屬性position: static; 靜態定位，是預設方式（不設定時），就是將元素放入正常的流中布置。
position: absolute;絕對定位，相對於頁面或最近的父元素固定，根據其他left top（可以用畫素也可以用百分數）屬性確定位置。從流中刪除，塊元素和內聯元素都不知道該元素的存在，內聯元素也不會繞著它擺放。
position:relative;相對定位，放入流中，是相對於該元素在流中本來的位置進行的偏移，left top 這些。
position:fixed;固定定位，相對於瀏覽器視窗固定，不在流中，對塊元素和內聯元素都沒有任何影響。
可以為絕對定位、相對定位和固定定位元素設定z-index屬性，值越大，越靠近你，越往上層。
4、利用**布局
**單元格內放置的都是塊元素。
外框div屬性設定為display: table;
行div屬性設定為display:table-row;
行內單元格div設定為display:table-cell;
可以在外框div屬性設定border-spacing:10px;為每個單元格統一增加10畫素的邊框間距，則單元格div不用設定margin外邊距。另外邊框間距會與**外塊元素的外邊距相加，不會摺疊。
還要在單元格div設定屬性vertical-align:top;確保單元格內容相對於上邊對齊。
Head First HTML與CSS 學習筆記
1 使用元素建立乙個超文字鏈結，鏈結到另乙個web頁面。元素的內容會成為web頁面中可單擊的文字。href屬性告訴瀏覽器鏈結的目標檔案。2 塊元素特立獨行，內聯元素隨波逐流。3 設計為沒有任何內容的元素成為void元素。需要使用void元素時，如 或，只需使用乙個開始標記。這是一種方便的簡寫形式，可...
html與css學習筆記
定位之absolute和relative 一般設定了absolute或relative時，才設定right left left 50px 意思是左邊線距離定位盒子的左邊線50px 一般父盒子設定了position absolute display inline block float left ri...
HTML與CSS學習筆記
恢復內容開始 計蒜客 恢復內容結束 css部分 html head style p p p style head body h1 老王的愛情 h1 p id first 為什麼要那麼痛苦地忘記乙個人，時間自然會使你忘記。如果時間不可以讓你忘記不應該記住的人，我們失去的歲月又有甚麼意義?p p id ...