CSS盒子模型與浮動

阿新 • • 發佈：2020-12-10

技術標籤：筆記 css

CSS盒子模型與浮動

CSS Float(浮動)

CSS盒子模型說明

在這裡插入圖片描述

css盒子模型就像一個盒子，就像下邊的相框。最常見的盒子div

和span。

css有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區  別： IE的content部分把 border 和 padding計算了進去;

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-gOkduulL-1607515292887)(C:\Users\Administrator\Desktop\練習\1209\img\20170727_2128[2].png)]

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框)

- 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文字和影象。

【注】盒子真實的所佔內容區域為寬高加上內邊距和邊框

【注】盒子不設定寬度，預設為百分之百，但高度有時候不會做設定。

內邊距（padding）

定義為邊框與內容之間的間距，如下圖所示。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-WTImVyrt-1607515292891)(C:\Users\Administrator\Desktop\練習\1209\img\VlwVi.png)]

依照上圖，padding有四個簡寫屬性。

padding-top ，上內邊距。
padding-bottom，下內邊距。
padding-right，右內邊距。
padding-left，左內邊距。

簡寫屬性為

注意：padding 後面 4 個值定義的順序分別為 – 上右下左

padding: 10px;             /* 意思是上下左右值全是 10px */
padding:5px 10px;          /* 意思是上下為 5px，左右為 10px */
padding:1px 2px 3px 4px;   /* 這個寫法意思是：上為 1px，右為 2px，下為 3px，左為 4px */
padding:5px 10px 7px;      /* 這種寫法意思是：上為 5px，左右為 10px，下為 7px

小技巧若只有單個方向的邊距與其他方向的邊距不相同，可以先設定整體邊距，再設定單一方向的邊距。

先設定所有內邊距25px
padding:25px;
單一設定左邊距50px
padding-left:50px;

但是 padding-top 或者 padding-bottom 這種寫法，只是單方面的定義了一個方向的值，這樣寫會增加 CSS 程式碼的長度，增加 CSS 樣式的程式碼量，拖慢頁面的載入速度。

關鍵點：將 padding 設定為負值無效：margin：0 auto; 只對塊級元素起作用

外邊距（margin）

就是這個盒子距離周圍盒子之間的距離，如下圖。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-AE1rS6IF-1607515292892)(C:\Users\Administrator\Desktop\練習\1209\img\VlwVi.png)]

依照上圖

margin有四個簡寫屬性。

margin-top ，上外邊距。
margin-bottom，下外邊距。
margin-right，右外邊距。
margin-left，左外邊距。

簡寫屬性為注意：margin 後面 4 個值定義的順序分別為 – 上右下左

margin: 10px;/* 意思是上下左右值全是 10px */  
margin:5px 10px; /* 意思是上下為 5px，左右為 10px */ 
margin:1px 2px 3px 4px; /* 這個寫法意思是：上為 1px，右為 2px，下為 3px，左為 4px */
margin:5px 10px 7px;/* 這種寫法意思是：上為 5px，左右為 10px，下為 7px

小技巧

margin:0 auto;讓盒子水平居中

邊框（border）

css邊框允許你為一個元素新增邊框的顏色和樣式

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-MYKfQ4x1-1607515292894)(C:\Users\Administrator\Desktop\練習\1209\img\微信截圖_20201209135556.png)]

邊框有三個簡寫屬性。

邊框寬度 border-width

可以單獨設定各邊寬度

  border-left-width: 10px;
            border-right-width: 10px;
            border-top-width: 10px;
            border-bottom-width: 10px;

邊框顏色 border-color屬性用於設定邊框的顏色。可以設定的顏色：
- name - 指定顏色的名稱，如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16進位制值, 如 “#ff0000”
【注】您還可以設定邊框的顏色為"transparent"。

可以單獨設定各個邊的顏色。
```
 border-left-color: brown;
 border-bottom-color: #000;
 border-right-color: blue;
 border-top-color: #f40;
```

邊框樣式border-style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>邊框</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">無邊框。</p>
<p class="dotted">虛線邊框。</p>
<p class="dashed">虛線邊框。</p>
<p class="solid">實線邊框。</p>
<p class="double">雙邊框。</p>
<p class="groove"> 凹槽邊框。</p>
<p class="ridge">壟狀邊框。</p>
<p class="inset">嵌入邊框。</p>
<p class="outset">外凸邊框。</p>
<p class="hidden">隱藏邊框。</p>
</body>

</html>

邊框連寫格式。

border: 10px solid brown;四個邊框都是10px 紅色實線

練習

小三角製作

  <style>
        div {
            width: 0;
            height: 0;
            border: 50px solid;
            /* border-left-width: 0; 設定直角*/
            border-color: red transparent transparent transparent;
        }
    </style>
<div></div>

聖誕樹製作

 <style>
        div{
            margin: 0 auto;
        }
        .twig{
            width: 0;
            height: 0;
            border: 150px solid transparent;
            border-top: none;
            border-bottom-color: green;
        }
        .twig:nth-child(1){
            border-width: 90px;
        }
        .twig:nth-child(2){
            border-width: 120px;
        }
        .bole{
            width: 100px;
            height: 200px;
            background-color: brown;
        }
    </style>
    <div class="twig"></div>
    <div class="twig"></div>
    <div class="twig"></div>
    <div class="bole"></div>

外邊距塌陷

相鄰元素外邊距塌陷

垂直方向上相鄰的兩個元素，如果都有外邊距，則相交的地方會出現外邊距重合現象，也叫作外邊距塌陷。

在垂直方向上，margin有相遇的部分，不是取兩個margin的和，而是取最大值。

<style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: sienna;
             margin-bottom: 40px; 
        }
        .box2{
            margin-top: 40px;
            background-color: slateblue;
        }
    </style>
   
    -->
    <div class="box1">
    </div>
    <div class="box2">
    </div>

在垂直方向上，margin相遇，一正一負，值相加。

 .box1{
            background-color: sienna;
             margin-bottom: -40px; 
        }
        .box2{
            margin-top: 40px;
            background-color: slateblue;
        }

如果都為負值，取絕對值最大的那個負值。

 .box1{
            background-color: sienna;
             margin-bottom: -40px; 
        }
        .box2{
            margin-top: -90px;
            background-color: slateblue;
        }

巢狀盒子的外邊距塌陷

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

解決方法：

給父親上邊框
border: 1px solid transparent
給父親內邊距
padding-top: 1px;
給父元素新增 overflow: hidden
子元素新增 position:absolute/relative 或 float

【注】同級之間的盒子距離使用margin，父子盒子使用padding。

標準文件流

定義：內容必須是從左到右，由上往下書寫。前面的內容大小或位置發生變化時，後面的內容也會隨之變化。網頁的製作，是個“流”。

標準文件流有以下四個現象。

空白摺疊現象

多個空格會被合併為一個空格，圖片img標籤如果在一行書寫，沒有間距，換行書寫，就會在圖片之間產生間隙。

矮不齊，底邊對齊

文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器檢視我們的頁面總會發現底邊對齊

自動換行，一行寫不滿，換行寫

一行文字書寫過度，瀏覽器就會給我們換行限時2我們的文字。

內聯元素(inline)特性

與其他行內元素並排；
不能設定寬、高。預設的寬度，就是文字的寬度。
行內元素有：a b span img input select strong（強調的語氣）

塊級元素(block)特性

霸佔一行，不能與其他任何元素並列；
能接受寬、高。如果不設定寬度，那麼寬度將預設變為父親的100%。
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

行內塊元素

具有行內元素的屬性，但是可以設定寬高，如果沒有寬高由內容決定，表現為同行顯示並可修改寬高內外邊距等屬性。

空(void)元素

常見的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

塊級元素和行內元素的相互轉換

使用display屬性

  block         像塊型別元素一樣顯示。
  none          此元素不會被顯示。
  inline-block  像行內元素一樣顯示，但其內容像塊型別元素一樣顯示。
  list-item     像塊型別元素一樣顯示，並新增樣式列表標記。
  table         此元素會作為塊級表格來顯示
  inherit       規定應該從父元素繼承 display 屬性的值

元素脫離標準文件流：

浮動
絕對定位
固定定位

替換與非替換元素

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

CSS Float(浮動)

什麼是 CSS Float（浮動）？

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用於影象，但它在佈局時一樣非常有用。

元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果影象是右浮動，下面的文字流將環繞在它左邊：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>浮動</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中，我們添加了一個 <b>float:right</b> 的圖片。導致圖片將會浮動在段落的右邊。</p>
<p>
    圖片自己新增
<img src="logocss.gif" width="95" height="84" />
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
這是一些文字。這是一些文字。這是一些文字。
</p>
</body>

</html>

彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

在這裡，我們對多個圖片設定 float 屬性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>多個圖片浮動</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>圖片庫</h3>
<p>試著調整視窗,看看當圖片沒有足夠的空間會發生什麼。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

浮動拖標、元素貼靠、

浮動的元素會脫離標註流，原來的位置不再佔有，後邊元素取代其位置。

浮動的元素會緊緊地貼靠在一起，如果父元素有寬度，浮動元素寬度大於父元素寬度會換行顯示。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            float: left;
            width: 300px;
        }
        .box1{
            height: 200px;
            background-color: teal;
        }
        .box2{
            height: 400px;
            background-color: thistle;
        }
        .box3{
            height: 600px;
            background-color: tomato;
        }

    </style>
</head>
<body>
    <!-- 每一個浮動元素都會去緊靠上一個浮動元素 -->
    <div class="box1">
    </div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

案例淘寶導航欄

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font: 16px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .container {
            width: 970px;
            height: 30px;
            margin: 30px auto;
            background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
        }
        
        .container ul {
            float: left;
        }
        
        .container ul li {
            float: left;
            margin: 0 3px;
            padding: 0 4px;
        }
        
        .container li a {
            float: left;
            font-weight: bold;
            line-height: 30px;
            color: white;
        }
        
        .container li span {
            line-height: 30px;
            color: white;
        }
        
        h2 {
            float: left;
            width: 190px;
            height: 30px;
            font-weight: bold;
            color: white;
            text-align: center;
            background-color: #ff5500;
        }
    </style>

</head>

<body>
    <div class="container">
        <h2>主題市場</h2>
        <ul>
            <li>
                <a href="#">天貓</a>
            </li>
            <li>
                <a href="#">聚划算</a>
            </li>
            <li>
                <a href="#">天貓超市</a>
            </li>
            <li><span>|</span></li>
        </ul>
        <ul>
            <li>
                <a href="#">淘搶購</a>
            </li>
            <li>
                <a href="#">電器城</a>
            </li>
            <li>
                <a href="#">司法拍賣</a>
            </li>
            <li>
                <a href="#">淘寶新選</a>
            </li>
            <li><span>|</span></li>
        </ul>
        <ul>
            <li>
                <a href="#">飛豬旅行</a>
            </li>
            <li>
                <a href="#">智慧生活</a>
            </li>
            <li>
                <a href="#">蘇寧易購</a>
            </li>
        </ul>
    </div>
</body>

</html>

CSS盒子模型與浮動