CSS中的盒子尺寸、輪廓、圓角；浮動的簡介
一、盒子的尺寸
1. 預設情況下，盒子可見框大小由內容區、內邊距和邊框共同決定；
2. box-sizing 用來設定盒子尺寸的計算方式（即 width 和 height 的作用）
可選值有 content - box：寬高用來設定內容區大小；
border - box : 寬高用來設定整個盒子的可見框大小。
二、 盒子的輪廓和圓角
1. 輪廓： box - shadow : xpx xpx xpx rgba(x, x, x, x) ;
第一個值為水平偏移量；
第二個值為垂直偏移量；
第三個值為模糊半徑；
第四個值為陰影顏色 。
2. outline：用法與border一樣，但它不會影響可見框的大小。
3. 圓角：border - radius：x px ; （用來設定圓角的半徑）
三、浮動的簡介及特點
1. 通過浮動可使一個元素向其父元素的左側或右側移動；
2. 可選值 ：none 預設值
left / right
3. 設定浮動後，水平佈局的等式不需要再成立；所以其下面文件流中的元素會上移；
4. 設定浮動後，會向父元素的左側或右側移動；
5. 浮動元素左右移動時，不會超過它前面的浮動元素；
6. 如果浮動元素前面是文件流中的塊元素，它將不會上移；
7. 浮動元素不會超過上一個浮動元素，最多就是和它一樣高；
8. 浮動元素不會蓋住文字，以此可設定文字環繞效果；
9. 脫離文件流後，不用區分行內元素和塊元素了，天下大同。
四、練習：製作簡單的導航條
1. 超連結在一個塊元素中時，要想點選塊時也會跳轉，應該將超連結文字display 為block
2. 將文字在父元素中水平垂直居中的辦法：
text-align: center; line-height：x px；（此處x為父元素高度）
3.程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>導航條練習</title> <link rel="stylesheet" href="C:\data\計算機學習\index3.html\02.CSS\reset.css.css"> <style>
.box1{ width: 166px; background-color:#E8E7E3 ; } .box2{ width: 191px; background-color:#E8E7E3 ; } .box3{ width: 175px; background-color:#E8E7E3 ; } .box4{ width: 198px; background-color:#E8E7E3 ; } .box5{ width: 113px; background-color:#E8E7E3 ; } .box6{ width: 197px; background-color:#E8E7E3 ; } .box7{ width: 170px; background-color:#E8E7E3 ; } a{ font-size: 20px; color: #888887; /*把a設定為塊元素是因為要將整個框弄成超連結*/ display: block; } div:hover{ background-color: #3F3F3F; } div{ /*將文字在父元素中水平垂直居中*/ line-height: 48px; text-align: center; float: left; } </style> </head> <body> <img src="C:\data\計算機學習\index3.html\02.CSS\圖片\螢幕截圖 2022-03-26 173359.png" alt=""> <div class="box1"> <a href="http:www.baidu.com">HTML/CSS </a> </div> <div class="box2"> <a href="#">Browser Side</a> </div> <div class="box3"> <a href="#">Server Side</a> </div> <div class="box4"> <a href="#">Programming</a> </div> <div class="box5"> <a href="#">XML</a> </div> <div class="box6"> <a href="#">Web Building</a> </div> <div class="box7"> <a href="#">Referance</a> </div>
</body> </html>