【乾貨】Html與CSS入門學習筆記9-11

標籤：top   cin   好的   ref   ica   ges   size   一個   位置   

九、盒模型 與元素親密接觸

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中加入<p id="footer">  </p>，在css中設定樣式，#footer{color:red;}或p#footer{color:red;}（類是用“.”）

多個樣式表：加入多個link，最下面的最優先。

樣式表針對媒體類型：瀏覽器會通過媒體類型來確定使用的規則，不匹配的忽略。

在link中增加一個media屬性，<link rel="stylesheet" href="loung-mobile.css" media="screen and (max-device-width: 480px)">，針對有螢幕且螢幕寬度不超過480px。

也可以直接在css中單獨指定，@media screen and (max-device-width: 480px){       }，在這個大括弧裡放入針對此媒體的規則。

 

十、div與span 進階web建設

div劃分邏輯區，將一堆相關的塊元素放在一起。

子孫選取器： #elixirs h2會選擇嵌套的所有h2，不論是直接子孫還是下級的，不用一層層往下寫，會自動選擇所有的，不管在多少層。

對屬性賦值可以有很多簡寫：font: normal/1.2em bold san-serif; 其中，字型大小/行間距，其他用空格隔開，順序無所謂。

span劃分邏輯區，將一堆相關的內聯內容放在一起。<span class="cd"></span>

1、偽類

偽類是直接在元素後面加“：”，例如a:hover，可直接在css中用而不用在html中像類一樣定義，因為是瀏覽器預先設定好的。

a一般順序是：a:link{} 未訪問狀態連結

a:visited{}已訪問狀態連結

a:hover{}滑鼠移至上方上時狀態

還有其他偽類，如first-child對應第一個子項目，last-child最後一個子項目，even（2n）第偶數個子項目，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;確保儲存格內容相對於上邊對齊。

 

【乾貨】Html與CSS入門學習筆記9-11