彙總css佈局模型和常見代碼縮寫與長度單位

時間 2020-03-07

原文原文鏈接

知識點一：css佈局模型：佈局模型是創建在盒模型基礎之上，在網頁中，元素有三種佈局模型：1.流動模型（Flow）2.浮動模型 (Float)3.層模型（Layer）。css

1、流動模型：默認的網頁佈局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的‘；特徵1.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，緣由？默認狀態下，塊狀元素的寬度都爲100%，致使塊狀元素都會以行的形式佔據位置。特徵2.內聯元素都會在所處的包含元素內從左到右水平分佈顯示。html

2、浮動模型：塊狀元素獨佔一行，若是想讓兩個塊狀元素並排顯示，怎麼辦呢？經過浮動使元素脫離默認文檔流。拓展閱讀：float佈局打破標準流,神助攻clear清浮動瀏覽器

3、層佈局模型：層佈局模型就像是圖像軟件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如何使用spa

 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;}只是有字號、行間距、中文字體、英文字體設置

知識點四：顏色值/長度值code

顏色值概述爲：在網頁中的顏色設置是很是重要，有字體顏色（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>一、像素</h5>
10         <p>像素爲何是相對單位呢？由於像素指的是顯示器上的小點（CSS規範中假設「90像素=1英寸」）。實際狀況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向於使用像素（px）做爲單位。</p>
11         <h5>二、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>&lt;p&gt;以這個&lt;span&gt;例子&lt;/span&gt;爲例。&lt;/p&gt;</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>三、百分比</h5>
24         <code>p{font-size:12px;line-height:130%}</code>
25         <p>設置行高（行間距）爲字體的130%（12 * 1.3 = 15.6px）。</p>
26     </body>
27 </html>