營銷策略分享
Share value, record our development, and let you gain knowledge
本篇文章給大家介紹一下css的佈局模型和常見代碼縮寫與長度單位。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
知識點一：css佈局模型：佈局模型是建立在盒模型基礎之上，在網頁中，元素有三種佈局模型：1.流動模型（Flow）2.浮動模型(Float)3.層模型（Layer） 。
一、流動模型：默認的網頁佈局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的‘；特徵1.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，原因？默認狀態下，塊狀元素的寬度都為100%，導致塊狀元素都會以行的形式佔據位置。特徵2.內聯元素都會在所處的包含元素內從左到右水平分佈顯示。
二、浮動模型：塊狀元素獨占一行，如果想讓兩個塊狀元素並排顯示，怎麼辦呢？通過浮動使元素脫離默認文檔流。拓展閱讀：float佈局打破標準流,神助攻clear清浮動
三、層佈局模型：層佈局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧。但是在網頁上局部使用層佈局還是有其方便之處的。如何讓html元素在網頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>流動模型、浮動模型</title>
<style type="text/css">
#box1,#box2{
width: 100px;
height: 100px;
border: 1px solid red;
margin:50px 0px;
float: left;/*如果現在我們想讓兩個塊狀元素並排顯示，怎麼辦呢？ */
}
</style>
</head>
<body>
<!-- 流動模型flow -->
<div class="box1" title="流動模型">
塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在默認狀態下，
塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。
如右側代碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示為100%。
</div>
<p>在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。 </p>
<!-- 浮動模型float -->
<div id="box1">欄目一</div>
<div id="box2">欄目二</div>
</body>
</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如何使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>層模型</title>
<style type="text/css">
.box1,.box2,.box3,.box4,.box5{
width: 100px;
height: 100px;
}
.box1{
border: 2px solid red;
/*這條語句的作用將元素從文檔流中拖出來，
然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。
如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。 */
position: absolute;
left: 100px;
top: 100px;
}
.box2{
border: 2px solid blue;
}
.box3{
border: 2px solid deepskyblue;
/*相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，
偏移前的位置保留不動*/
position: relative;
top: 10px;
left: 300px;
}
.box4{
border: 2px solid #008000;
}
.box5{
border: 2px solid #000000;
/*由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，
除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，
因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，
這與background-attachment:fixed?屬性功能相同。 */
position: fixed;
right: 0;
bottom: 0;
}
.box6{
height: 1000px;
background-color: #00FFFF;
color: #fff;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<p>box1與box2是絕對定位對比，box3和box4相對定位對比</p>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">
我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示
我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示
我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示
</div>
</body>
</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.一般情況下因為對於中文網站。
上一篇： 暫無
