css盒子模型與盒模型的浮動

三歲九年發表於2020-12-09
CSS模型

CSS盒子

1.盒子

盒子：容器
盒子模型 英文： box model。
最常見的盒子是div span

盒子中的區域：content
在這裡插入圖片描述

  1. 寬 width px content
  2. 高 height content
  3. 內邊距 padding
  4. 邊框 border
  5. 外邊距 margin

盒子的寬度 = 內容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距
盒子的高度 = 內容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距

用程式碼來表示就是

盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

【注】標準盒模型的寬和高和盒子真實佔有的寬高不是一個概念。
盒子的寬不設定時，預設為100%；但是寬度一般會做設定，高度卻不一定。

2.內邊距

內容與邊框的距離。
內邊距的區域也會被背景渲染。
padding有四個方向：上下左右。
寫法：

  1. 小屬性
  • padding-left 左內邊距
  • padding-right 右內邊距
  • padding-top 上內邊距
  • padding-bottom 下內邊距
  1. 複合屬性寫法
    四種寫法
  • 一寫法
    padding:20px; 上下左右的padding相等。
  • 二寫法
    padding:20px 10px; 上下 左右。
  • 三寫法
    padding:20px 10px 30px; 上 左右 下。
  • 四寫法
    padding：10px 20px 30px 40px; 上 右 下 左 順時針。

若只有單個方向的內邊距與其他內邊距不同，可以先設定總體，再用單一屬性單獨設定不同的內邊距。

在這裡插入圖片描述

3.邊框

border 邊框
盒子佔有的最外層的區域。

border是一個複合屬性。
border有三個要素：寬度，線的型別，顏色。

  1. 按三要素拆分：
    border-width 設定寬度
    border-style 設定線的型別
    border-color 設定顏色
  2. 按照三要素與方向設定
    border-left-width 設定左邊框寬度
    border-left-style 設定左邊框線的型別
    border-left-color 設定左邊框顏色
  3. 按照方向設定
    border-left 左邊框
    border-right 右邊框
    border-top 上邊框
    border-bottom 下邊框

4.margin外邊距

可以用於盒子盒子之間的距離。
margin有四個方向：上下左右。
寫法：

  1. 小屬性
  • margin-left 左外邊距
  • margin-right 右外邊距
  • margin-top 上外邊距
  • margin-bottom 下外邊距
  1. 複合屬性寫法：
    四種寫法:
  • 一值法：
    margin:20px; 上下左右的margin相等。
  • 二值法：
    margin:20px 10px; 上下 左右。
  • 三值法：
    margin:20px 10px 30px; 上 左右 下。
  • 四值法：
    margin：10px 20px 30px 40px; 上 右 下 左 順時針。

auto：代表自適應。
會將剩餘的空間自動分配給設定auto的外邊距。
margin : 0 auto;
可以讓盒子水平居中。

示例1

/*margin屬性後只跟一個值，同時設定四條邊的邊距相等*/
margin: 10px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

示例2

/*margin屬性後跟兩個值，第一個值設定上下邊距，第二個是設定左右邊距*/
margin: 10px 20px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

示例3

/*margin屬性後跟三個值，第一個值設定上邊距，第二個是設定左右邊距，第三個值設定下邊距*/
margin: 10px 20px 30px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

示例4

/*margin屬性後跟四個值，第一個值設定上邊距，第二個是設定右邊距，第三個值設定下邊距，第四個值設定左邊距*/
margin: 10px 20px 30px 40px;
/*下面樣式與上面的樣式等價*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;

當盒子高度不固定：盒子的內容多少不確定時，為了保證元素的高度始終合適，不會出現大片留白與溢位，這種情況下一般不設定高度，而是用內容去撐開高度。

5.父子盒模型

子盒子的整體佔有的位置不要超過父盒子的內容區域若子盒子不設定寬度，會自動撐滿父盒子的內容區域。
若不設定寬，只設定內邊距和邊框，寬度會自適應。
示例：

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

css樣式

        .father{
            width: 300px;
            height: 300px;
            background-color: seagreen;/*綠色*/
            padding: 50px;
        }
        .son{
            height: 200px;
            padding-left: 10px;
            border: 10px solid #000;/*黑色*/
            background-color: sienna;/*赭色*/
        }

執行如圖
在這裡插入圖片描述
在這裡插入圖片描述

6.外邊距塌陷

上下盒子的外邊距塌陷
垂直方向上相鄰的兩個元素，如果都有外邊距，則相交的地方會出現外邊距重合現象，也叫作外邊距塌陷。
在垂直方向上，margin有相遇的部分，不是取兩個margin的和，而是取最大值。
示例

   <div class="box1">

    </div>
    <div class="box2">

    </div>

css樣式

       div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: sienna;
            margin-bottom: 20px;
        }
        .box2{
            margin-top: 40px;
            background-color: slateblue;
        }

在這裡插入圖片描述

盒模型

在這裡插入圖片描述

當margin相遇的部分，一個值為正，一個值為負，結果為兩個值的和。
當margin相遇的部分，兩個值都為負數，結果為絕對值最大的。

【注】兩個上下相鄰的同級盒子之間，為了避免出現外邊距塌陷，儘量只設定上盒子的底部margin或下盒子的頂部margin。

7.巢狀盒子的外邊距塌陷

父盒子沒有填充內容，也沒有設定頂部邊框，那麼子盒子的margin-top會讓父盒子與子盒子一起掉下來。
示例

    <div class="father">
        <div class="son">

        </div>
    </div>
    <!--完成父級巢狀關係 -->

css樣式

        .father {
            width: 300px;
            height: 300px;
            background-color: slateblue;
            margin: 0 auto;
            border-top: 1px solid;/* 新增填充內容使.son中的margin-top:100px;
            有上外邊距
             */
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: tan;
            margin-top: 100px;
        }

執行結果
在這裡插入圖片描述

解決辦法：
1.有填充內容即可。（不推薦）
2.給父盒子新增頂部的邊框。（不推薦）
3.將margin換成padding。
同級之間的盒子距離使用margin，父子盒子使用padding。

8.盒模型

盒模型分為兩類：

  1. 標準盒模型
    box-sizing: content-box;
    設定的width和height是指內容的寬和高。增加內邊距與邊框會影響盒子的真實尺寸，但不會影響內容區域的大小。
  2. IE盒模型（怪異盒模型）
    box-sizing: border-box;
    設定的width和height是指盒子的真實尺寸。增加內邊距與邊框會影響內容區域的大小，但不會影響盒子的真實尺寸。
    示例
    <div class="normal">

    </div>
    <div class="ie">
        我是IE，我怕誰
    </div>

css樣式

        .normal {
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 預設值  標準盒模型 */
            box-sizing: content-box;
        }
        .ie {
            margin-top: 50px;
            /* IE盒模型 */
            box-sizing: border-box;
            padding-left: 50px;/* 增加內邊距內容變少 */
            width: 200px;
            height: 200px;
            background-color: tomato;
        }

執行檢視樣式
在這裡插入圖片描述

9.標準文件流

什麼叫做標準文件流？
定義：內容必須是從左到右，由上往下書寫。前面的內容大小或位置發生變化時，後面的內容也會隨之變化。

html網頁就是一個標準文件流。

  1. 空白摺疊現象
    無論多少個空格，換行 縮排，都會摺疊成一個空格。
  2. 高矮不齊，底部對齊。
  3. 自動換行。

行內塊元素

1.行內塊元素與塊級元素

標準文件流將HTML元素分為了三種

  1. 行內元素 inline
  • 可以與其他行內元素並排展示。
  • 設定寬高無效。
  • 實際的寬高，由內容的寬高來決定。
  1. 塊級元素 block
  • 獨佔一行。
  • 可以設定寬高
  1. 行內塊元素 inline-block
  • 可以設定寬高
  • 可以與其他行內元素或行內塊元素並排。

容器級標籤 div h li dt dd
文字級標籤 span p a i em b

行內元素：
除了p標籤之外，所有的文字級標籤都是行內元素。p標籤是文字級標籤，但屬於塊級元素。
塊級元素：
所有的容器級標籤都是塊級元素，包括p標籤。

通過display屬性來檢視當前元素的型別。
也可以通過該屬性修改當前元素的型別。
他們之間的轉換
示例：

    <div>
        我是div元素。
    </div>
    <span>我是span標籤</span>
    <a href="#">百度一下</a>
    <input type="text">

css樣式

        div {
            height: 100px;
            width: 200px;
            background-color: teal;
            display: inline-block;/* 轉換行內塊元素 */
            font-size: 16px;
        }
        span {
            width: 200px;
            height: 100px;
            background-color: thistle;
            display: block;/* 轉換塊元素 */
        }
        input {
            width: 200px;
            height: 100px;
        }

執行
在這裡插入圖片描述

塊級元素轉行內元素：
display:inline; 擁有行內元素的屬性，塊級元素屬性就會失效。
行內元素轉塊級元素：
display:block; 擁有塊級元素的屬性，行內元素屬性就會失效。
轉行內塊元素：
display:inline-block；
1.可以設定寬高
2.可以與其他行內元素並排。

2.按顯示分類

將html元素按照顯示型別分類：

  1. 替換元素
    瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。 img/input
  2. 非替換元素
    不是通過標籤的屬性來決定顯示內容的，而是通過標籤所包裹的具體內容來決定。

3.浮動

標準文件流的限制比較多，導致頁面效果很多無法實現。
為了可以並排展示，又可以設定寬高，我們可以脫離標準文件流。

css中一共有三種方法可以脫標：
1.浮動
2.絕對定位
3.固定定位

設定浮動的方法：
float：left/right

示例

        div:nth-child(1){
            float: left;
            width: 200px;
            height: 300px;
            background-color: teal;
        }
        div:nth-child(2){
            float: left;
            width: 300px;
            height: 300px;
            background-color: tomato;
        }

執行
在這裡插入圖片描述

4.脫標

設定浮動的元素會脫離標準文件流
浮動會在原來的位置上浮起來。
一個元素一旦浮動，那麼就可以並排展示，同時可以設定寬高。

示例

   <div class="box1">

    </div>
    <div class="box2">

    </div>
    <span class="box3">

    </span>

在這裡插入圖片描述

在這裡插入圖片描述

【注】
設定浮動之後，不要再設定display屬性了。

元素停靠：
每一個浮動元素都會去緊靠上一個浮動元素。

5.字型圍繞效果

給圖片設定浮動

示例
在這裡插入圖片描述

在這裡插入圖片描述

達到字圍效果。

6.收縮

一個浮動的元素，如果沒有設定寬高，那麼元素將自動收縮為內容的寬高

示例：
在這裡插入圖片描述

這裡只設定的寬，沒有設定高，浮動後

在這裡插入圖片描述

元素自動收縮為內容的高。

7.浮動的巢狀

如果浮動的子元素的寬的和大於父盒子的寬，那麼後面的子元素會換行。

示例：
先整個小於父盒子的看一下。

在這裡插入圖片描述
在這裡插入圖片描述

試試子元素大於父盒子看看效果：

在這裡插入圖片描述
執行一下

在這裡插入圖片描述

相關文章