網頁布局流程:
盒子模型:把HTML頁面中的布局元素想象成壹個矩形框，也就是內容的容器。
CSS box模型本質上是壹個封裝了周圍HTML元素的盒子，包括:邊框、外部邊距、內部邊距和實際內容。
1，border可以設置元素的邊框。邊框由三部分組成:邊框寬度(粗細)、邊框樣式和邊框顏色；
2.語法:
邊框樣式邊框樣式可設置如下:
3，文筆的邊界。
邊框縮寫:
邊框是分開寫的:
1和邊框折疊屬性控制瀏覽器如何繪制表格邊框。它控制相鄰單元格的邊界。
2.語法:
單詞collapse的意思是合並。
邊框-塌陷:塌陷；指示相鄰的邊框合並在壹起。
邊框會增加盒子的實際尺寸。所以我們有兩個解決方案:
在CSS3中，添加了圓角邊框樣式，這樣我們的框就可以是圓角的。
border-radius屬性用於設置元素外邊框的圓角。
語法:
CSS3中增加了方框陰影。我們可以使用box-shadow屬性給盒子添加陰影。語法:
在CSS3中，我們可以使用text-shadow屬性對文本應用陰影。語法:
1和padding屬性用於設置內部邊距，即邊框和內容之間的距離。
2.語法:
合寫屬性:
拆分-寫入屬性:
1.當我們給盒子分配壹個填充值時，發生了兩件事:
2.內邊距對盒子大小的影響:
3.解決方案:
如果框的大小與渲染壹致，就讓寬度/高度減去額外的內邊距大小。
margin屬性用於設置外部邊距，即控制框之間的距離。
外部邊距可以使塊級框水平居中:
常見的寫法，以下三種都可以:
註意:上面的方法是將塊級元素水平居中。
註意:壹個行內元素或者壹個行內塊元素將它的子元素水平居中，只需要將text-align:center添加到它的父元素中。
文本對齊:居中.您可以在父框中將內聯元素(例如，span)和內聯塊元素(例如，img)居中。
當邊距用於定義塊元素的垂直外邊距時，可能會發生外邊距合並。
主要有兩種情況:
1.相鄰塊元素的垂直外邊緣的合並
當兩個相鄰的塊元素(兄弟)相遇時，如果上面的元素具有下邊距-底部，而下面的元素具有上邊距-頂部，則它們之間的垂直間距不是邊距-底部和邊距-頂部之和。取兩個值中較大值的現象稱為相鄰塊元素的垂直外邊距的組合。
解決方案:嘗試只在壹個框中添加邊距值。
2.嵌套塊元素的垂直外緣折疊
第壹種:對於兩個嵌套的塊元素(父子關系)，父元素有壹個上邊距，子元素也有壹個上邊距。此時，父元素將折疊到更大的邊距值。
第二，對於兩個嵌套的block元素(父子關系)，在子元素上設置margin-top:10px，會導致父div下移10px；並不是子元素下移10px；在父元素中；
解決方案:
許多網頁元素都有默認的內外邊距，不同的瀏覽器有不同的默認邊距。因此，在布局之前，我們必須首先清除下壹個頁面元素的內外邊距。
上述方法對內嵌塊元素輸入按鈕的默認邊距無效。浮動可以用來解決*
註意:為了照顧兼容性，盡量只設置左、右、內、外邊距，不要設置上、下、內、外邊距。設置了上下邊距後，實際上並不會生效。但是轉換成塊級和內聯塊元素就足夠了。