CSS基礎之盒子模型及浮動佈局

時間 2019-11-18

標籤 css 基礎盒子模型浮動佈局欄目 CSS 简体版

原文原文鏈接

盒模型

談到盒模型，有經驗的小夥伴必定倒背如流，無非就是 內容(content)、填充(padding)、邊框(border)、邊界(margin)；css

這些屬性咱們能夠把它轉移到咱們平常生活中的盒子（箱子）上來理解，平常生活中所見的盒子也就是能裝東西的一種箱子，也具備這些屬性，因此叫它盒子模式。html

先上圖：瀏覽器

上圖清晰的代表了盒模型的具體表現樣式； margin外邊距+border邊框+padding內邊距+content內容；編輯器

既然盒模型叫作盒模型~那麼咱們能夠把它比做一個液晶屏幕包裝盒子（樓主剛剛買了一臺，因此拿它來比喻了，你們都知道的這玩意兒快遞的時候padding可很多啊）拆快遞的時候，裏面的顯示屏就是內容（content）而泡沫呢？就是內邊距（padding）外面的殼子就是（border）而後呢就是盒子與其餘盒子之間的距離（margin）這就組成了咱們css中的盒模型；佈局

css中盒模型有不少種表現形式：其中 block（塊狀）、inline（行內）、（inline-block以塊狀形式表現的行內元素）設置css display能夠改變盒子的表現形式下面會詳細介紹post

我的以爲css能夠這麼去理解：它規定了盒子的包裝樣式，盒子的擺放位置，盒子的長寬高等等等等，瀏覽器就像是一個房子，等待人們用箱子填滿它；spa

下面呢，樓主簡單介紹一下 內容(content)、填充(padding)、邊框(border)、邊界(margin)在css中的具體表現，以及他們所帶的看似bug的另類屬性。ssr

1.內容(content)3d

　　內容包括了文本，塊狀盒子，圖片，內容盒子的盒模型等等......栗子：code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>demohtml</title>
    
</head>
    <body>
        <style type="text/css">
            .div1{ background: red;}
        </style>
        <div class="div1">
            div標籤默認是一個塊狀（block）盒子
        </div>
    </body>
    
</html>

上圖代碼獲得的結果是：（樓主直接敲在編輯器裏了）

div標籤默認是一個塊狀（block）盒子

div標籤其默認的表現形式是block，經過觀察咱們能夠獲得 block塊狀盒子默認的寬度是100%，而高度右文字撐開，文字就是它的（content內容）；若是沒有文字，而且沒有規定高度，那麼它的高度爲0；

看圖文字的高度是21 邊框內邊距外邊距都爲0 寬度爲100% （樓主屏幕14寸的小啊）；

block（塊狀），它一般是一個外部容器用來承載須要的內容經常使用的塊級元素有 div，p，h1 ， header，footer，nav 等等......

inline（行內）

行內元素，顧名思義，一行內的元素，塊狀裏面的元素，常見的有a標籤，i（傾斜標籤），em，span，s（刪除線），strong（加粗），b等等等等

行內元素的表現形式主要在於填充內容，它默認是沒有上下外邊距的，只能夠左右；

<div class="div1">
            div標籤默認是一個塊狀（block）盒子
           <a href="#">這是一個超級連接</a>
   </div>

上圖與代碼表示了行內元素的表現形式其寬高等於內容的寬高且，不能夠直接設置它的寬度和高度，設置寬度和高度並無什麼卵用；

咱們可使用 display：block；來讓它變成塊狀。block也可使用display：inline；來讓塊狀變成行內；

這裏因爲篇幅過長，樓主點到即止，關於block與inline 傳送門：block，inline和inline-block概念和區別

2.內邊距(padding)

內邊距規定了內容與邊框之間的填充距離，栗子：

<style type="text/css">
            .div2{  padding: 20px; border: 1px solid #000099;}
            .div2 a{ background: red;}
        </style>
        <div class="div2">
            <a href="#">div標籤默認是一個塊狀（block）盒子</a>
        </div>

div標籤默認是一個塊狀（block）盒子

樓主將div2的內邊距設爲上下左右各20px，須要注意的是如今div2的高度是 padding+content+邊框，20x2+2= 42px 這在某些時候會產生一些使人疑惑的問題，可是以盒模型的概念，它是正確的；

即盒子的高度包括內邊距但 css屬性設置的是content的高度好比div3高度設爲100px，注意這個時候 div3的實際高度等於 100+40+2=142px

<style type="text/css">
            .div3{  padding: 20px; border: 1px solid #000099; height:100px;}/*注意這個時候 div1的實際高度等於  100+40+2=142px*/
            .div3 a{ background: red;}
        </style>
        <div class="div3">
            <a href="#">div標籤默認是一個塊狀（block）盒子</a>
        </div>

div標籤默認是一個塊狀（block）盒子

3.邊框(border)

border默認爲0；你能夠隨意指定它的某一個邊的邊框；其屬性樓主也就不一一介紹了，再來一個傳送門：CSS border邊框屬性教程(color style)

4.外邊距(margin)

外邊距規定了盒子與盒子之間的距離，所以它不會被計算到盒子的整體寬高之中，盒子內的盒子的外邊距則會影響父級元素的寬度和高度；

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於佈局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段「呼吸距離」。這裏也是直接給一個傳送門吧，寫起來這篇博文可就太長了...... css外邊距詳解

浮動

w3shool對浮動的解釋：

　　浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

　　因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

以推箱子游戲爲例，將箱子往左推直到它碰到邊界或者另一個箱子就會中止下來看圖：

藍色盒子往左浮動（float:left）紅色箱子緊跟着往左浮動（float:left;）橙色箱子往右浮動(float:right;) 藍色在遇到邊界以後，中止在左上角。紅色緊跟着左浮動，它遇到了一樣是左浮動元素的藍色，因此它中止在藍色的結尾。而橙色方塊向右浮動直到遇到邊界或者一樣右浮動的元素則中止；

浮動元素會脫離當前文檔流，以一種特殊的形式存在，由於它再也不處於文檔流中，因此它不佔據空間；

框1向左浮動，由於框1再也不存在文檔流中，框2被框1遮蓋，圖2當三個框同時向左浮動時，它們同是float元素，成列狀排列；

另一個特性是：若是包含框寬度小於內部浮動元素的總寬度，浮動元素會向下移動，直到有足夠的空間；

若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」：

行框和清理

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

所以，建立浮動框可使文本圍繞圖像：

<style type="text/css">
            .div1{height:200px; width: 100px; float: left; background: #ff9000;}
            .div1 a{ background: red;}
            .div2{height:200px; width: 100px; float: left; background: red;}
            .div3{height:200px; width: 100px; float: right; background: #002A80;}
        </style>
        <div class="div1">
            
        </div>
        <div class="div2">
            
        </div>
        <div class="div3">
            
        </div>
        <div class="text">
            這是文本
        </div>

若是要想文本另換一行，與浮動框互不干擾，須要對該框應用 clear 屬性。clear 屬性的值能夠是 left、right、both 或 none，它表示框的哪些邊不該該挨着浮動框。

<style type="text/css">
            .div1{height:200px; width: 100px; float: left; background: #ff9000;}
            .div1 a{ background: red;}
            .div2{height:200px; width: 100px; float: left; background: red;}
            .div3{height:200px; width: 100px; float: right; background: #002A80;}
        </style>
        
        <div class="div1">
            
        </div>
        <div class="div2">
            
        </div>
        <div class="div3">
            
        </div>
        <div style="clear: both;"></div>  //清除上面浮動元素的影響
        <div class="text">
            這是文本
        </div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。