MyBatis查詢結果resultType返回值型別的說明

阿新 • • 發佈：2020-11-24

文件流（normal flow）

網頁是一個多層的結構，一層疊著一層。通過 css 可以分別為每一層來設定樣式

使用者只能看到最頂上一層，這些層中，最底下的一層稱為文件流，文件流是網頁的基礎

我們所建立的元素預設都是在文件流中進行排列。

對於我們來元素主要有兩個狀態

在文件流中
不在文件流中（脫離文件流）

元素在文件流中有什麼特點

塊元素
塊元素會在頁面中獨佔一行(自上向下垂直排列)
預設寬度是父元素的全部（會把父元素撐滿）
預設高度是被內容撐開（子元素）
行內元素
行內元素不會獨佔頁面的一行，只佔自身的大小
行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素

則元素會換到第二行繼續自左向右排列（書寫習慣一致）
行內元素沒有 width 和 height 屬性的，所以預設寬度和高度都是被內容撐開的

盒子模型（box model）

CSS將頁面中的所有元素都設定為了一個矩形的盒子，將元素設定為矩形的盒子後，對頁面的佈局就變成將不同的盒子擺放到不同的位置

組成（由裡到外）：

內容區（content）
內邊距（padding）
邊框（border）
外邊距（margin）

內容區（content）

元素中的所有的子元素和文字內容都在內容區中排列。內容區的大小由 width 和 height 兩個屬性來設定

width 設定內容區的寬度
height 設定內容區的高度

邊框（border）

邊框屬於盒子邊緣，邊框裡邊屬於盒子內部，出了邊框都是盒子的外部

邊框的大小會影響到整個盒子的大小

要設定邊框，需要至少設定三個樣式：

邊框的寬度 border-width
邊框的顏色 border-color
邊框的樣式 border-style

內邊距（padding）

內容區和邊框之間的距離是內邊距

一共有四個方向的內邊距：

padding-top
padding-right
padding-bottom
padding-left

內邊距的設定會影響到盒子的大小

背景顏色會延伸到內邊距上

一共盒子的可見框的大小，由內容區

內邊距和邊框 共同決定，所以在計算盒子大小時，需要將這三個區域加到一起計算

padding 內邊距的簡寫屬性，可以同時指定四個方向的內邊距

padding: 10px 20px 30px 40px;	// 上，右，下，左（順時針）的順序
padding: 10px 20px 30px ;	// 上，左右，下
padding: 10px 20px ;	// 上下，左右
padding: 10px ;	// 上下左右

外邊距（margin）

外邊距不會影響盒子可見框的大小，但是外邊距會影響盒子的位置

一共有四個方向的外邊距：

margin-top

上外邊距，設定一個正值，元素會向下移動
margin-right

預設情況下設定margin-right不會產生任何效果
margin-bottom

外邊距，設定一個正值，其下邊的元素會向下移動
margin-left

左外邊距，設定一個正值，元素會向右移動

注意：margin-right 也可以設定負值，如果是負值則元素會向相反的方向移動

元素在頁面中是按照自左向右的順序排列的，

所以預設情況下如果我們設定的左和上外邊距則會移動元素自身
而設定下和右外邊距會移動其他元素

margin的簡寫屬性：margin 可以同時設定四個方向的外邊距，用法和padding一樣

margin會影響到盒子實際佔用空間

盒子的水平佈局

元素的水平方向的佈局：元素在其父元素中水平方向的位置由以下幾個屬性共同決定

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

水平佈局公式

一個元素在其父元素中，水平佈局必須要滿足以下的等式：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素內容區的寬度（必須滿足）

以上等式必須滿足，如果相加結果使等式不成立，則稱為過度約束，則等式會自動調整

如果這七個值中沒有為 auto 的情況，則瀏覽器會自動調整margin-right值以使等式滿足
如果某個值為 auto ，則會自動調整為 auto 的值以使等式成立

<style>
    div.outer {
        padding: 800px;
        height: 200px;
        border: 10px red solid;
    }
    div.inner {
        height: 200px;
        width: 200px;
        background-color: #afb;
    }
</style>
<body>
    <div class="outer">
		<div class="inner"></div>
	</div>
</body>

此時就有

0 + 0 + 0 + 200 + 0 + 0 + 0 = 800

但明顯不滿足，所以瀏覽器會自動調整 margin-right = 800 - 200 = 600

如果將 .inner 裡 width=auto 那麼，auto 會自動調整

0 + 0 + 0 + auto(800) + 0 + 0 + 0 = 800
如果將一個寬度和一個外邊距設定為auto，則寬度會調整到最大，設定為auto的外邊距會自動為0

如果將三個值都設定為auto，則外邊距都是0，寬度最大

如果將兩個外邊距設定為auto，寬度固定值，則會將外邊距設定為相同的值

所以我們經常利用這個特點來使一個元素在其父元素中水平居中

eg： width: xxpx; margin: 0 auto;

注意：如果子元素的 width 的值大於父元素的 width 時，那麼瀏覽器會將子元素的 margin-right 設定為負值，顯示的效果就是子元素的內容超出了父元素的框架。

垂直方向的佈局

垂直方向的佈局沒有水平那麼複雜，也不需要滿足什麼公式

當父元素 height 沒有設具體值（預設和 auto ）時，父元素的高度會被子元素的 height 撐開
若父元素 height 設的有具體值，且子元素的高度超出時，則子元素會從父元素中溢位

使用 overflow 屬性來設定父元素如何處理溢位的子元素
- overflow: visible 預設值子元素會從父元素中溢位，在父元素外部的位置顯示
- overflow: hidden 溢位內容將會被裁剪不會顯示
- overflow: scroll 生成兩個滾動條，通過滾動條來檢視完整的內容
- overflow: auto 根據需要生成滾動條（常用）
另外還有 overflow-x 和 overflow-y 表示 x 軸和 y 軸上的設定