知識點一：css布局模型：布局模型是建立在盒模型基礎之上，在網頁中，元素有三種布局模型：1.流動模型（Flow）2.浮動模型 (Float)3.層模型（Layer），
一、流動模型：默認的網頁布局模式，也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的‘；特征1.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，原因？默認狀態下，塊狀元素的寬度都為100%，導致塊狀元素都會以行的形式占據位置，特征2.行內元素都會在所處的包含元素內從左到右水平分布顯示，
二、浮動模型：塊狀元素獨占一行，如果想讓兩個塊狀元素并排顯示，怎么辦呢？通過浮動使元素脫離默認檔案流， 拓展閱讀：float布局打破標準流,神助攻clear清浮動
三、層布局模型：層布局模型就像是影像軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由于網頁大小的活動性，層布局沒能受到熱捧，但是在網頁上區域使用層布局還是有其方便之處的，如何讓html元素在網頁中精確定位，就像影像軟體PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作，
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>流動模型、浮動模型</title> 6 <style type="text/css"> 7 #box1,#box2{ 8 width: 100px; 9 height: 100px; 10 border: 1px solid red; 11 margin:50px 0px; 12 float: left;/*如果現在我們想讓兩個塊狀元素并排顯示，怎么辦呢？*/ 13 } 14 </style> 15 </head> 16 <body> 17 <!-- 流動模型flow --> 18 <div class="box1" title="流動模型"> 19 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%，實際上，塊狀元素都會以行的形式占據位置，如右側代碼編輯器中三個塊狀元素標簽(div，h1，p)寬度顯示為100%， 20 </div> 21 <p>在流動模型下，行內元素都會在所處的包含元素內從左到右水平分布顯示，</p> 22 <!-- 浮動模型float --> 23 <div id="box1">欄目一</div> 24 <div id="box2">欄目二</div> 25 </body> 26 </html>
知識點二：定位屬性position來支持層布局模型=>層模型有三種形式：1.絕對定位(position: absolute)2.相對定位(position: relative)3.固定定位(position: fixed) 拓展閱讀：position屬性值4缺一帶你了解相對還是絕對抑或是固定定位 absoulue與relative配合定位盒子居中問題
A.如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條陳述句的作用將元素從檔案流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位，如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器視窗，
B.相對定位:如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常檔案流中的偏移位置，相對定位完成的程序是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動，
C.固定定位:它與absolute定位型別類似，但它的相對移動的坐標是視圖（螢屏內的網頁視窗）本身，由于視圖本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢屏中移動瀏覽器視窗的螢屏位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位于瀏覽器視窗內視圖的某個位置，不會受檔案流動影響，這與background-attachment:fixed?屬性功能相同，以下代碼可以實作相對于瀏覽器視圖向右移動100px，向下移動50px，并且拖動滾動條時位置固定不變，拓展閱讀：css常用樣式背景background如何使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>層模型</title> 6 <style type="text/css"> 7 .box1,.box2,.box3,.box4,.box5{ 8 width: 100px; 9 height: 100px; 10 } 11 .box1{ 12 border: 2px solid red; 13 position: absolute;/*這條陳述句的作用將元素從檔案流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位，如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器視窗，*/ 14 left: 100px; 15 top: 100px; 16 } 17 .box2{ 18 border: 2px solid blue; 19 } 20 .box3{ 21 border: 2px solid deepskyblue; 22 position: relative;/*相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動*/ 23 top: 10px; 24 left: 300px; 25 } 26 .box4{ 27 border: 2px solid #008000; 28 } 29 .box5{ 30 border: 2px solid #000000; 31 position: fixed;/*由于視圖本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢屏中移動瀏覽器視窗的螢屏位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位于瀏覽器視窗內視圖的某個位置，不會受檔案流動影響，這與background-attachment:fixed?屬性功能相同，*/ 32 right: 0; 33 bottom: 0; 34 } 35 .box6{ 36 height: 1000px; 37 background-color: #00FFFF; 38 color: #fff; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="box1">box1</div> 44 <div class="box2">box2</div> 45 <p>box1與box2是絕對定位對比，box3和box4相對定位對比</p> 46 <div class="box3">box3</div> 47 <div class="box4">box4</div> 48 <div class="box5">box5</div> 49 <div class="box6">我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示</div> 50 </body> 51 </html>
知識點三：盒模型代碼簡寫/顏色值縮寫/字體縮寫/（雖然CSS檔案或者嵌入的CSS都純文本檔案，為了減少css樣式代碼的撰寫量，代碼縮寫是很有必要的，這樣可以使用戶訪問你的網頁的時候占用更少的帶寬，）
- 盒模型代碼簡寫閱讀：css排版常用樣式、三種不同html型別、css布局盒模型介紹
- 顏色值縮寫/*關于顏色的css樣式也是可以縮寫的，當你設定的顏色是16進制的色彩值時，如果每兩位的值相同，可以縮寫一半*/比方：p{color:#000000;}與p{color: #336699;}可寫成p{color:#000}與p{color:#369}
- 字體縮寫閱讀:css常用樣式font控制字體的多種變換 注意：body{font:italic small-caps bold 12px/1.5em "宋體",sans-serif;}a.使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值，b.在縮寫時 font-size 與 line-height 中間要加入“/”斜扛，c.一般情況下因為對于中文網站，英文還是比較少的，所以下面縮寫代碼比較常用：body{font:12px/1.5em "宋體",sans-serif;}只是有字號、行間距、中文字體、英文字體設定
知識點四：顏色值/長度值
- 顏色值概述為：在網頁中的顏色設定是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設定顏色的方法也有很多種：(1).英文命令顏色:p{color:red;}(2).RGB顏色:這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色，p{color:rgb(133,45,200);}每一項的值可以是 0~255 之間的整數，也可以是 0%~100% 的百分數，如：p{color:rgb(20%,33%,25%);}(3).十六進制顏色:這種顏色設定方法是現在比較普遍使用的方法，其原理其實也是 RGB 設定，但是其每一項的值由 0-255 變成了十六進制 00-ff，p{color:#00ffff;}詳情閱讀：css常用樣式font控制字體的多種變換
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>長度值</title> 6 </head> 7 <body> 8 <div>目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位，</div> 9 <h5>1、像素</h5> 10 <p>像素為什么是相對單位呢？因為像素指的是顯示幕上的小點（CSS規范中假設“90像素=1英寸”），實際情況是瀏覽器會使用顯示幕的實際像素值有關，在目前大多數的設計者都傾向于使用像素（px）作為單位，</p> 11 <h5>2、em</h5> 12 <p>就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px，如下代碼：</p> 13 <code>p{font-size:12px;text-indent:2em;}</code> 14 <p>上面代碼就是可以實作段落首行縮進 24px（也就是兩個字體大小的距離）</p> 15 <h5>下面注意一個特殊情況：</h5> 16 <p>但當給 font-size 設定單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎，如下代碼：</p> 17 <p>html:</p> 18 <code><p>以這個<span>例子</span>為例，</p></code> 19 <p>css:</p> 20 <code>p{font-size:14px} 21 span{font-size:0.8em;}</code> 22 <p>結果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px），</p> 23 <h5>3、百分比</h5> 24 <code>p{font-size:12px;line-height:130%}</code> 25 <p>設定行高（行間距）為字體的130%（12 * 1.3 = 15.6px），</p> 26 </body> 27 </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63810.html
標籤：Html/Css
上一篇：定位與錨點