2. 程式人生 > >CSS學習—盒模型和佈局模型

CSS學習—盒模型和佈局模型

阿新 • • 發佈：2019-01-02

最近做的小專案需要搭建一個小網站，因此從 慕課網 上學習HTML+CSS的基礎知識，將接觸到的知識點用這個部落格總結出來。

一、盒模型

1.元素分類
在CSS中，html中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素：

塊狀元素：塊狀元素都自帶換行效果

  • < div>、< p>、< h1>…< h6>、
  • < ol>、< ul>、< dl>、
  • < table>、< address>、< blockquote> 、< form> 等

內聯元素：內聯元素都是定義行內小區域且不換行，但如果沒有內容就沒有意義，不佔空間

  • < a>、< span>、< br>、< i>、
  • < em>、< strong>、< label>、
  • < q>、< var>、< cite>、< code> 等

內聯塊狀元素：內聯塊狀元素除了不換行，即使沒有內容也會佔空間

  • < img>、< input> 等

PS：內聯元素不能被設定寬和高，但內聯塊狀元素可以。可以用 display:inline-block 將元素設定為內聯塊狀元素。
如：

......
<style type="text/css">
a{
    display:inline-block;/*將a從內聯元素變為內斂塊狀元素*/
    width:20px;/*在預設情況下寬度不起作用*/
    height:20px;/*在預設情況下高度不起作用*/
    background:pink;/*設定背景顏色為粉色*/
    text-align:center; /*設定文字居中顯示*/
}
</style>
</head>
<body>
<a>1</a>
<a>2</a>
<a>
 
3</a>
<a>4</a>
</body>
</html>

2.盒模型—邊框盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設定它的粗細、樣式和顏色(邊框三個屬性)

如下面程式碼為 div 來設定邊框粗細為 2px、樣式為實心的、顏色為紅色的邊框：

div{
    border:2px  solid  red;
}

上面是 border 程式碼的縮寫形式，可以分開寫：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

PS：

  • border-style（邊框樣式）常見樣式有：dashed（虛線）| dotted（點線）| solid（實線）。

  • border-color（邊框顏色）中的顏色可設定為十六進位制顏色，如：border-color : #888 ; //前面的井號不要忘掉。

  • border-width（邊框寬度）中的寬度也可以設定為：thin | medium | thick（但不是很常用），最常還是用畫素（px）

如果想為 p 標籤單獨為一邊設定邊框，而其它三邊都不設定邊框樣式怎麼辦呢？css 樣式中允許只為一個方向的邊框設定樣式：

div{ border-bottom : 1px solid red ; } //下
     border-top:1px solid red; //上
     border-right:1px solid red; //右
     border-left:1px solid red; //左

3.盒模型—寬度和高度：盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以裡的內容範圍。

因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界

如圖所示：
這裡寫圖片描述

舉個例子：

css程式碼：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html程式碼：

< body>
   < div>文字內容< /div>
< /body>

元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可檢視元素盒模型，如下圖：
這裡寫圖片描述

4.盒模型—填充：元素內容與邊框之間是可以設定距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。如下程式碼：

div{padding:20px 10px 15px 30px;}

上述程式碼可分開寫成：

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

如果上、右、下、左的填充都為10px;可以這麼寫

div{padding:10px;}

如果上下填充一樣為10px，左右一樣為20px，可以這麼寫：

div{padding:10px 20px;}

5.盒模型—邊界：元素與其它元素之間的距離可以使用邊界（margin）來設定。邊界也是可分為上、右、下、左。如下程式碼：

div{margin:20px 10px 15px 30px;}

PS: 邊界其他程式碼形式與填充相似

總結一下padding和margin的區別：padding在邊框裡，margin在邊框外（邊界可理解為框與框之間的間隔）

二、佈局模型

CSS的佈局模型分為以下三類：

  • 流動模型（Flow）
  • 浮動模型 (Float)
  • 層模型（Layer）

1.流動模型：流動（Flow）是預設的網頁佈局模式。也就是說網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。

流動佈局模型具有2個比較典型的特徵：

  • 第一點：塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。

實際上，塊狀元素都會以行的形式佔據位置。如右側程式碼編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示為100%：

示例程式碼：

<style type="text/css">
#box1{
    width:300px;
    height:100px;
}
div,h1,p{
    border:1px solid red;
}
</style>
</head>
<body>
    <div id="box2">box2</div><!--塊狀元素，由於沒有設定寬度，寬度預設顯示為100%--> 
    <h1>標題</h1><!--塊狀元素，由於沒有設定寬度，寬度預設顯示為100%--> 
    <p>文字段</p><!--塊狀元素，由於沒有設定寬度，寬度預設顯示為100%--> 

    <div id="box1">box1</div><!--塊狀元素，由於設定了width:300px，寬度顯示為300px-->
</body>

執行截圖：
這裡寫圖片描述

  • 第二點：在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

2.浮動模型：塊狀元素這麼霸道都是獨佔一行，如果現在我們想讓兩個塊狀元素並排顯示，就得使用浮動模型了。

任何元素在預設情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。如下程式碼可以實現兩個 div 元素一行顯示。

......
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
......
< div id="div1">< /div>
< div id="div2">< /div>

這裡寫圖片描述

當然你也可以同時設定兩個元素右浮動也可以實現一行顯示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

這裡寫圖片描述

設定兩個元素一左一右在同一行顯示：

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

這裡寫圖片描述

3.層模型：層佈局模型就像是影象軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧。但是在網頁上區域性使用層佈局還是有其方便之處的。

為了讓html元素在網頁中精確定位，就像影象軟體PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作，CSS定義了一組定位（positioning）屬性來支援層佈局模型。

層模型有三種形式：

  • 絕對定位(position: absolute)

  • 相對定位(position: relative)

  • 固定定位(position: fixed)

絕對定位：如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。

如下面程式碼可以實現div元素相對於瀏覽器視窗向右移動100px，向下移動50px：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    /*下面三行*/
    position:absolute;
    left:100px;
    top:50px;
}
< div id="div1">< /div>

這裡寫圖片描述

相對定位：如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

如下程式碼實現相對於以前位置向下移動50px，向右移動100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

這裡寫圖片描述

**固定定位：**fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響，這與background-attachment:fixed;屬性功能相同。以下程式碼可以實現相對於瀏覽器檢視向右移動100px，向下移動50px，並且拖動滾動條時位置固定不變：

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
......
<div id="div1"></div>

Relative與Absolute組合使用：實現被設定元素相對於其他元素進行定位。需要遵守以下規範：

  • 參照定位的元素必須是相對定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>
  從上面程式碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。
  • 參照定位的元素必須加入position:relative;
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
  • 定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了（這裡注意參照物就可以不是瀏覽器了，而可以自由設定了）。
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

三、程式碼簡寫

1.盒模型：盒模型的外邊距(margin)、內邊距(padding)和邊框(border)設定上下左右四個方向的邊距是按照順時針方向設定的：上右下左。具體應用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/*上設定為10px、右設定為15px、下設定為12px、左設定為14px*/

2.顏色值：關於顏色的css樣式也是可以縮寫的，當你設定的顏色是16進位制的色彩值時，如果每兩位的值相同，可以縮寫一半。

p{color:#000000;}
/*可以縮寫為：*/
p{color: #000;}

p{color: #336699;}
/*可以縮寫為：*/
p{color: #369;}

3.字型縮寫：網頁中的字型css樣式程式碼也有他自己的縮寫方式，下面是給網頁設定字型的程式碼：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}
/*這麼多行的程式碼其實可以縮寫為一句：*/
body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
}

一般情況下因為對於中文網站，英文還是比較少的，所以下面縮寫程式碼比較常用：

body{
    font:12px/1.5em  "宋體",sans-serif;
}

只是有字號、行間距、中文字型、英文字型設定。

OK，關於盒模型與佈局模型的基本知識學習到此結束。今天下雨了，大黑山灰濛濛的，景色很好。就喜歡這種灰暗的天氣。
———————————————————————————————————— 8:48am , 2017/7/7 於圖書館

相關推薦

CSS學習—盒模型和佈局模型

最近做的小專案需要搭建一個小網站，因此從 慕課網 上學習HTML+CSS的基礎知識，將接觸到的知識點用這個部落格總結出來。 一、盒模型 1.元素分類 在CSS中，html中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素

CSS盒子模型和佈局

CSS盒子模型 網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具備這些屬性。 這些屬性我們可以用日常生活中

機器學習之---生成模型和判別模型

  監督學習方法可分為兩大類，即生成方法與判別方法，它們所學到的模型稱為生成模型與判別模型。 判別模型：判別模型是學得一個分類面（即學得一個模型），該分類面可用來區分不同的資料分別屬於哪一類； 生成模型：生成模型是學得各個類別各自的特徵（即可看成學得多個模型），可用這些

判別模型和生成模型——機器學習

轉載自：https://www.cnblogs.com/zeze/p/7047630.html    判別式模型（discriminative model） 產生式模型（generative model）

【機器學習】生成模型和判別模型

定義： 生成方法由資料學習聯合概率分佈P(x, y)，然後求出條件概率分佈P(y|x)作為預測的模型。 包括樸素貝葉斯，貝葉斯網路，高斯混合模型，隱馬爾科夫模型等。 判別方法由資料直接學習決策函式

Css三種基本的佈局模型包含層模型的三種定位

在網頁中，元素有三種佈局模型：流動模型（Flow）、浮動模型(Float)、層模型(Layer)。 流動模型 流動模型是預設的網頁佈局模式。 具有兩個典型特徵：1、塊級元素都會在所處的包

Python機器學習筆記：深入理解Keras中序貫模型和函式模型

　 先從sklearn說起吧，如果學習了sklearn的話，那麼學習Keras相對來說比較容易。為什麼這樣說呢？ 　　我們首先比較一下sklearn的機器學習大致使用流程和Keras的大致使用流程： sklearn的機器學習使用流程： 1 2 3 4

深度學習筆記(六)：Encoder-Decoder模型和Attention模型

這兩天在看attention模型，看了下知乎上的幾個回答，很多人都推薦了一篇文章Neural Machine Translation by Jointly Learning to Align and Translate 我看了下，感覺非常的不錯，裡面還大

機器學習---生成模型和判別模型

【摘要】判別式模型，就是隻有一個模型，你把測試用例往裡面一丟，label就出來了，如SVM。生成式模型，有多個模型(一般有多少類就有多少個)，你得把測試用例分別丟到各個模型裡面，最後比較其結果，選擇

機器學習基礎--判別模型和生成模型

判別模型（Discriminative model）和生成模型（generative model）   監督學習又可以分為兩類，（只有監督學習才會有判別和生成的概念）   1）判別模型（Discriminative model）：SVM和邏輯迴歸   2）生成模

網路程式設計中select模型和poll模型學習(linux)

一、概述 併發的網路程式設計中不管是阻塞式IO還是非阻塞式IO，都不能很好的解決同時處理多個socket的問題。作業系統提供了複用IO模型：select和poll，幫助我們解決了這個問題。這兩個函式都能夠允許程序指示核心等待多個事件中的任何一個發生，並只在有一個或多個事件發

監督學習：生成模型和判別模型

生成模型與判別模型        一直在看論文的過程中遇到這個問題，折騰了不少時間，然後是下面的一點理解，不知道正確否。若有錯誤，還望各位前輩不吝指正，以免小弟一錯再錯。在此謝過。 一、決策函式Y=f(X)或者條件概率分佈P(Y|X)        監督學習的任務就是從

監督學習中的“生成模型”和“判別模型”

ref: http://blog.csdn.net/zouxy09/article/details/8195017  講的非常清晰了。該內容部分來自於維基百科。兩者都是概率統計模型，從維基上的解釋來看生成模型（Generative Model）：定義了在觀測{X}和結果{Y}

機器學習：生成模型和判別模型

經典提問：Navie Bayes和Logistic迴歸區別是什麼？ Navie Bayes是生成式模型，Logistic迴歸是判別式模型，二者的區別就是生成式模型與判別式模型的區別。 首先，Navie Bayes通過已知樣本求得先驗概率P(Y), 及條件概率P(X|Y),

深度學習---深度學習筆記(七)：Encoder-Decoder模型和Attention模型

這兩天在看attention模型，看了下知乎上的幾個回答，很多人都推薦了一篇文章Neural Machine Translation by Jointly Learning to Align and Translate 我看了下，感覺非常的不錯，裡面還大概闡述了encoder

生成模型和判別模型(《統計學習方法》截圖)

技術分享 img http htm mage info alt 統計學 www. 有一篇博客寫的很好，給上鏈接： https://www.cnblogs.com/xiaoshayu520ly/p/9079435.html生成模

判別模型和生成模型

使用 sin cow ria regress gauss 生成 == 給定 【摘要】 - 生成模型：無窮樣本==》概率密度模型 = 產生模型==》預測 - 判別模型：有限樣本==》判別函數 = 預測模型==》預測 【簡介】 簡單的說，假設o是觀察值，

生成模型和判別模型

特征 數據 學習方法 最大 mem 針對 表示 不能 問題 1、定義： 生成模型（或稱產生式模型）和判別模型（或稱判別式模型）的本質區別在於模型中觀測序列x和狀態序列y的決定關系。前者假設y決定x，後者假設x決定y。 2、生成模型特點 2.1、生成模型以“狀態序列y按照一定

對星型模型和雪花模型的簡單理解

alt 存在 body 所有 維度 info 多層 分享 post 星形模型 雪花模型 星型模型是所有維度表都是連接在一個事實表上面，雪花模型是將維度表拆分地更加詳細，是多層次的。 在星型模型的維度表裏面，一張維度表儲存了眾多存在冗余的信息，為什麽冗余，在哪裏冗余，我

Actor模型和CSP模型的區別

　　Akka/Erlang的actor模型與Go語言的協程Goroutine與通道Channel代表的CSP(Communicating Sequential Processes)模型有什麼區別呢？ 　　首先這兩者都是併發模型的解決方案，我們看看Actor和Channel這兩個方案的不同：