今天學習一下html中盒子模型的部分。

首先了解盒子模型之前，我們需要了解一下什么是 normal flow（文檔流）。

?網頁是一個多層的結構,設置樣式，也是一層一層的設置，最終我們看到的最上面的一層

?文檔流是網頁最底層。我們創建的元素默認情況下，都在文檔流中。元素分為兩種狀態：在文檔流中，脫離文檔流。

元素在文檔流中的特點：

? ? ? ? 塊元素類

? ? ? ? ? ?1:會獨占一行

? ? ? ? ? ?2:塊元素的寬度默認是父元素的100%

? ? ? ? ? ?3:塊元素的高度默認是被內容撐開的

? ? ? ? 內聯元素（行內元素）

? ? ? ? ? ?1:不會獨占一行

? ? ? ? ? ?2:寬度高度默認都是被內容撐開的，不能自己定義寬高

? ? ? ? 行內塊元素

?元素脫離文檔流后的特點

? ? ? ? ?元素脫離文檔流之后，就不再區分塊元素，行內元素，行內塊元素，?也就是塊元素不會獨占一行，行內也可以設置寬高，三像素問題也沒有。

? ? 脫離文檔流的途徑有：?浮動 ?絕對定位 ?flex 等。

? ? 把元素布局到頁面，就像買個家具，想要把它擺放到合適的位置，你需要了解它的大小和尺寸，以及如何組合它們，對此我們把這些元素都想想成盒子（一盒矩形）。

影響盒子大小的因素有：內容區（盒子里的內容），邊框（border），內邊框（padding），外邊距（margin）則不影響盒子大小。

1.內容區(content) ?元素中所有的子元素和文本內容都在內容區中排列。

? ? ? ? width ? 設置內容區的寬度

? ? ? ? height ?設置內容區的高度

?2.邊框（border）元素設置邊框

? ? ? 邊框屬于盒子邊緣，邊框里面屬于盒子內部，出了邊框都是盒子的外部。

? ? ? 設置邊框必須指定三個樣式 分別是顏色，大小，樣式。

? ? ? ? ?border-color: ; ?設置邊框的顏色。

? ? ? ? ? ? （1）、有默認值，默認顏色是黑色。

? ? ? ? ? ? （2）、可以寫多個顏色 ?以空格隔開。

? ? ? ? ? ? ? ? ? ?4個 ? 上 ?右 ?下 ? 左

? ? ? ? ? ? ? ? ? ?3個 ? 上 ? 左右 ? 下

? ? ? ? ? ? ? ? ? ?2個 ? 上下 ?左右

? ? ? ? ? ? ? ? ? ?1個 ? 上下左右

? ? ? ? ? ? ?(3)、border-xxx-color ?特指top ?right ?bottom left某一邊顏色

? ? ? ? ?border-width: ; ?設置邊框的大小

? ? ? ? ? ? （1）、默認值 ? 默認值大概1-3px

? ? ? ? ? ? （2）、也可以跟多個值 ?以空格隔開

? ? ? ? ? ? ? ? ? 4個 ? 上 ?右 ?下 ? 左

? ? ? ? ? ? ? ? ? 3個 ? 上 ? 左右 ? 下

? ? ? ? ? ? ? ? ? 2個 ? 上下 ?左右

? ? ? ? ? ? ? ? ? 1個 ? 上下左右

? ? ? ? ? ? （3）、border-xxx-width 特指top ?right ?bottom left某一邊寬度

? ? ? ? ?border-style: ; ?設置邊框的樣式

? ? ? ? ? ? ? (1)、默認值 ?none

? ? ? ? ? ? （2）、solid ?實線

? ? ? ? ? ? ? ? ? ? ? ? dashed ?虛線

? ? ? ? ? ? ? ? ? ? ? ? dotted ?點狀虛線

? ? ? ? ? ? ? ? ? ? ? ? double ?雙線

border簡寫有以下幾種形式：

? ? ? ? ?border:顏色，大小，樣式;

? ? ? ? ?border-top:顏色，大小，樣式;

? ? ? ? ?border-right:顏色，大小，樣式;

? ? ? ? ?border-bottom:顏色，大小，樣式;

? ? ? ? ?border-left:顏色，大小，樣式;

3.內邊距（padding）指的是內容區和邊框之間的距離。

? ? ? ? padding-top ?上內邊距；

? ? ? ? padding-right ?右內邊距；

? ? ? ? padding-bottom 下內邊距；

? ? ? ? padding-left ? 左內邊距；

4.margin ?外邊距 ? 指的是當前盒子和其他盒子之間的距離。

? ? ? ? ? margin-top ? ?上外邊距 ? ?盒子正值向下移動，負值向上移動；

? ? ? ? ? margin-right ?右外邊距 ? ?默認情況，設置margin-right是沒有效果；

? ? ? ? ? margin-bottom ?下外邊距 ? 盒子自己不動，擠下面的盒子移動，正值向下，負值向上；

? ? ? ? ? margin-left ? ?左外邊距 ? 盒子正值向右移動，負值向左移動；

? ? ? ? 注：大小可正可負！

? ?margin:?后也可跟多個值，4個，3個，2個，1個皆可，規則跟padding一樣。

總結

以上是生活随笔為你收集整理的html-盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。