頁面佈局的三大核心：盒子模型、浮動、定位。
網頁佈局的核心：透過css擺放盒子。
盒子模型的組成包括：邊框、外邊距、內邊距、實際內容
padding：預設頂著盒子顯示，控製文字與盒子的距離
margin：控制盒子與盒子之間的距離
邊框包含：邊框寬度（粗細）、邊框樣式（實線、虛線、點線）、邊框顏色
div {
width: 300px;
height: 200px;
border-width: 5px; 邊框寬度 border-style: solid; 邊框樣式：實線 border-style: dashed; 虛線 border-style: dotted; 點線 border-style: pink; 邊框顏色}border: 1px solid red; 沒有順序
邊框分開寫法（用來修改某邊）：
border-top: 1px solid blue; border-bottom:1px solid pink;
邊框只有一條不一樣的時候，可以利用層疊性來書寫：
border: 5px dashed pink; border-top: 1px solid blue; 覆蓋了上面整個盒子的一條上邊框
表格的細線邊框：
當給一個表格中的儲存格與儲存格之間的間距設定為0時，由於相鄰兩個儲存格的邊框放在了一起，所以會出現這個部分的寬度比設定的一個儲存格邊框的寬度要大，為了解決這個問題，可以使用border-collapse屬性。
border-collapse屬性控制瀏覽器繪製表格邊框的方式，它控制相鄰單元格的邊框。把相鄰的邊框合併在一起：
table {
border-collapse: collapse; 這個屬性必須加在table上才有效}邊框會影響盒子的實際大小<br/>邊框的存在會增加盒子的大小，因為有兩種方案：
（1）測量盒子大小的時候，不要量邊框（2）如果測量的時候包含了邊框，則需要將width和height的值減去邊框的寬度
邊框與內容之間的距離。
內邊距會影響盒子的實際大小<br/>為了確保盒子大小和效果圖保持一致，則需要將width和height的值減去內邊距的寬度
如果盒子本身沒有指定width、height屬性，則padding不會撐開盒子的大小：沒有指定寬，則左右的padding不會撐大盒子；沒有指定高度，則上下的padding不會撐大盒子
控制盒子與盒子之間的距離
典型應用：讓塊級盒子實現水平居中，必須滿足兩個條件：盒子必須指定了寬度；盒子左右的邊距設定為auto
行內元素、行內塊元素：想要實現水平居中對齊、只要給其父親元素添加text-align：center即可
外邊距合併（1）巢狀區塊元素垂直外邊距的塌陷問題：對於兩個巢狀關係（父子關係）的區塊元素，父元素有上邊距同時子元素也有上邊距，此時父元素會塌陷較大的外邊距值。
解決方案：為父元素指定一個外部邊框；為父元素指定一個內邊距；為父親新增一個overflow：hidden（常用）
網頁元素很多帶有預設的內外邊距，且瀏覽器不同預設的也不同，因為在佈局前，要清除一下網頁元素的內外邊距。
* {
margin: 0px; 清除內邊距 padding: 0px; 清除外邊距}行內元素為了照顧相容性，盡量只設定左右內外邊距，不要設定上下內外邊距，但是轉換為區塊級和行內級元素就可以了。
讓盒子變成圓角。
border-radius屬性用來設定元素的內外框圓角。
文法:
border-radius：length；參數越大弧度越明顯，這個參數可以是具體數組也可以是百分比
其原理：
圓角邊框的寫法：
（1）圆形的写法：當盒子是一個正方形，當length=盒子高度或寬度的一半時，這個盒子就是一個圓形。一半：可以是精確數值，也可以是50%。 】
（2）圆角矩形的写法：参数设置为高度的一半
（3）該屬性是簡寫屬性，其實是：左上角、右上角、右下角、左下角（順時針）
（4）如果只想設定一個角，可以寫成：border-top-left-radius、border-bottom-right-radius等，注意順序不能顛倒。
box-shadow屬性為盒子添加陰影。
文法:
box-shadow：h-shadow v-shadow blur spread color inset; 盒子預設外陰影
blur：影子的虛實，參數越大，越模糊
text-shadow
文法:
text-shadow：h-shadow、v-shadow、blur、color
到此這篇關於CSS盒子模型、圓角邊框、盒子陰影的文章就介紹到這了,更多相關CSS盒子模型內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支援downcodes.com！